/* IR Bau Deko — App */
const { useState, useEffect, useRef } = React;

// ---------- Icons (stroke, currentColor) ----------
const Icon = {
  Drywall: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="18" height="18" rx="1.5"/>
      <path d="M3 9h18M3 15h18M9 3v18M15 3v18"/>
    </svg>
  ),
  Tile: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <rect x="3" y="3" width="8" height="8" rx="1"/>
      <rect x="13" y="3" width="8" height="8" rx="1"/>
      <rect x="3" y="13" width="8" height="8" rx="1"/>
      <rect x="13" y="13" width="8" height="8" rx="1"/>
    </svg>
  ),
  Paint: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M4 7h14v4H4z"/>
      <path d="M4 9v2a2 2 0 0 0 2 2h6a2 2 0 0 1 2 2v2"/>
      <path d="M18 7V5a1 1 0 0 0-1-1h-2"/>
      <rect x="12" y="17" width="4" height="5" rx="1"/>
    </svg>
  ),
  Renovation: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 2 3 7v13h18V7l-9-5z"/>
      <path d="M9 20v-6h6v6"/>
      <path d="M3 10l9-5 9 5"/>
    </svg>
  ),
  Garden: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22V10"/>
      <path d="M12 10c0-4 3-6 6-6 0 4-3 6-6 6z"/>
      <path d="M12 13c0-3-2-5-5-5 0 3 2 5 5 5z"/>
      <path d="M4 22h16"/>
    </svg>
  ),
  Assembly: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="m14.7 6.3-1 1 2 2 1-1 3 3a2 2 0 0 1-2.8 2.8l-3-3-6 6-2.8-2.8 6-6-3-3A2 2 0 0 1 10.7 3.3z"/>
    </svg>
  ),
  Concrete: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 7 12 3l9 4-9 4-9-4z"/>
      <path d="M3 12l9 4 9-4"/>
      <path d="M3 17l9 4 9-4"/>
    </svg>
  ),
  Arrow: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M5 12h14M13 6l6 6-6 6"/>
    </svg>
  ),
  ArrowSmall: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M7 17 17 7M8 7h9v9"/>
    </svg>
  ),
  Check: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="m5 12 5 5L20 7"/>
    </svg>
  ),
  Phone: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.3 1.8.6 2.6a2 2 0 0 1-.5 2.1L8 9.6a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.8.3 1.7.5 2.6.6a2 2 0 0 1 1.7 2z"/>
    </svg>
  ),
  Mail: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2" y="4" width="20" height="16" rx="2"/>
      <path d="m22 7-10 7L2 7"/>
    </svg>
  ),
  Pin: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 1 1 16 0z"/>
      <circle cx="12" cy="10" r="3"/>
    </svg>
  ),
  Clock: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <circle cx="12" cy="12" r="10"/>
      <path d="M12 6v6l4 2"/>
    </svg>
  ),
  Shield: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
      <path d="m9 12 2 2 4-4"/>
    </svg>
  ),
  Instagram: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <rect x="2.5" y="2.5" width="19" height="19" rx="5"/>
      <circle cx="12" cy="12" r="4"/>
      <circle cx="17.5" cy="6.5" r="1" fill="currentColor" stroke="none"/>
    </svg>
  ),
  Play: () => (
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M8 5v14l11-7z"/>
    </svg>
  ),
  Plus: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
      <path d="M12 5v14M5 12h14"/>
    </svg>
  ),
  Trash: () => (
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
      <path d="M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/>
      <path d="M10 11v6M14 11v6"/>
    </svg>
  ),
};

// ---------- Nav ----------
const NAV_LINKS = [
  ['#leistungen', 'Leistungen'],
  ['#ueber-uns', 'Über uns'],
  ['#prozess', 'Ablauf'],
  ['#projekte', 'Projekte'],
  ['#kontakt', 'Kontakt'],
];

function Nav({ scrollY }) {
  const scrolled = scrollY > 20;
  const [open, setOpen] = useState(false);

  // Lock page scroll while the mobile menu is open
  useEffect(() => {
    document.body.style.overflow = open ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [open]);

  // Close menu, unlock scroll, then glide to the target section
  const goTo = (e, href) => {
    e.preventDefault();
    setOpen(false);
    document.body.style.overflow = '';
    const el = document.querySelector(href);
    if (el) {
      const top = el.getBoundingClientRect().top + window.scrollY - 72;
      window.scrollTo({ top, behavior: 'smooth' });
    }
  };

  return (
    <header className={`nav ${scrolled ? 'scrolled' : ''} ${open ? 'menu-open' : ''}`}>
      <div className="container nav-inner">
        {/* Logo space — actual logo is rendered by MorphLogo (fixed) so it can fly in from the hero */}
        <div className="nav-logo-slot" aria-hidden="true"></div>
        <nav className="nav-links">
          {NAV_LINKS.map(([href, label]) => (
            <a key={href} className="nav-link" href={href}>{label}</a>
          ))}
        </nav>
        <a href="#kontakt" className="btn btn-primary">
          Angebot anfragen <span className="arrow"><Icon.Arrow /></span>
        </a>
        <button
          className={`nav-mobile-toggle ${open ? 'open' : ''}`}
          aria-label={open ? 'Menü schließen' : 'Menü öffnen'}
          aria-expanded={open}
          onClick={() => setOpen(o => !o)}
        ><span></span></button>
      </div>

      <nav className={`mobile-menu ${open ? 'open' : ''}`} aria-hidden={!open}>
        {NAV_LINKS.map(([href, label], i) => (
          <a key={href} className="mm-link" href={href} onClick={(e) => goTo(e, href)}>
            <span>{label}</span>
            <span className="mm-num">0{i + 1}</span>
          </a>
        ))}
        <a href="#kontakt" className="btn btn-primary mm-cta" onClick={(e) => goTo(e, '#kontakt')}>
          Angebot anfragen <span className="arrow"><Icon.Arrow /></span>
        </a>
      </nav>
    </header>
  );
}

// ---------- MorphLogo ----------
// One logo, fixed-positioned. At scrollY=0 it sits big on the left of the hero.
// As you scroll past the threshold it flies up into the nav bar position and
// becomes the home button.
function MorphLogo({ scrollY }) {
  const THRESHOLD = 260;
  const p = Math.min(1, Math.max(0, scrollY / THRESHOLD));
  const scrolled = p > 0.5;
  return (
    <a
      href="#top"
      className={`morph-logo ${scrolled ? 'is-nav' : ''}`}
      style={{ '--p': p }}
      aria-label="Zum Anfang"
      onClick={(e) => {
        e.preventDefault();
        window.scrollTo({ top: 0, behavior: 'smooth' });
      }}
    >
      <img src={window.__ASSETS.logo} alt="IR Bau Deko" />
    </a>
  );
}

// ---------- Hero ----------
function Hero({ headline = 'precision' }) {
  const labelMap = {
    precision: 'Kreativität',
    passion: 'Hingabe',
    quality: 'Qualität',
  };
  const italicWord = labelMap[headline] || 'Kreativität';
  return (
    <section className="hero" id="top">
      <div className="hero-photo" style={{ backgroundImage: `url(${window.__ASSETS.heroPhoto})` }} aria-hidden="true" />
      <div className="hero-overlay" aria-hidden="true" />
      <div className="container hero-center">
        <div className="hero-copy">
          <div className="eyebrow light">Sierksdorf · Ostholstein</div>
          <h1>
            <span className="line"><span className="word">Handwerk</span></span>
            <span className="line"><span className="word">mit</span> <span key={italicWord} className="word display-italic">{italicWord}</span></span>
            <span className="line"><span className="word">&</span> <span className="word">Sorgfalt.</span></span>
          </h1>
          <p className="hero-lead">
            Trockenbau, Fliesenlegerei und mehr — von der ersten Skizze bis zum letzten Millimeter.
            Wir gestalten Räume, in denen Qualität sichtbar wird.
          </p>
          <div className="hero-ctas">
            <a href="#kontakt" className="btn btn-primary">
              Kostenloses Angebot <span className="arrow"><Icon.Arrow /></span>
            </a>
            <a href="#leistungen" className="btn btn-ghost on-dark">Leistungen ansehen</a>
          </div>
        </div>
      </div>

      <div className="scroll-cue">
        <span>Scroll</span>
        <div className="bar"/>
      </div>
    </section>
  );
}

// ---------- Reveal wrapper ----------
function Reveal({ children, delay = 0, as: Tag = 'div', className = '', ...rest }) {
  const ref = useRef(null);
  const [inView, setInView] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setInView(true); io.disconnect(); }
    }, { threshold: .15 });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  const dClass = delay ? ` d${delay}` : '';
  return (
    <Tag ref={ref} className={`reveal${dClass} ${inView ? 'in' : ''} ${className}`} {...rest}>
      {children}
    </Tag>
  );
}

// ---------- Services ----------
const SERVICES = [
  {
    ico: 'Drywall', num: '01', title: 'Trockenbau', featured: true,
    desc: 'Wände, Decken, Vorsatzschalen und Akustiklösungen — sauber verarbeitet, millimetergenau gespachtelt.',
    long: 'Vom einfachen Wandaufbau bis zur abgehängten Akustikdecke: Wir planen tragfähige Konstruktionen, integrieren Installation und Licht sauber und übergeben gespachtelte Oberflächen in jeder gewünschten Qualitätsstufe.',
    highlights: ['Trennwände & Vorsatzschalen', 'Abgehängte Decken & Lichtvouten', 'Schall- und Brandschutz', 'Spachtelung Q1 – Q4', 'Revisionsöffnungen & Aussparungen'],
  },
  {
    ico: 'Tile', num: '02', title: 'Fliesenlegerei',
    desc: 'Bad, Küche, Bodenflächen. Fugen ruhig, Kanten sauber — auf Tausendstel.',
    long: 'Wir verlegen Fliesen, Mosaik und Großformate für Bad, Küche, Flur und Außenbereich — inklusive Untergrundvorbereitung, Abdichtung und Verfugung. Jeder Schnitt sitzt, jede Fuge läuft.',
    highlights: ['Bad- & Küchenfliesen', 'Großformate bis 120 × 240 cm', 'Naturstein & Mosaik', 'Abdichtung nach DIN 18534', 'Sockel, Übergänge & Profile'],
  },
  {
    ico: 'Renovation', num: '03', title: 'Renovierung',
    desc: 'Von Einzelraum bis Komplettsanierung — durchdachte Planung, zuverlässige Ausführung.',
    long: 'Egal ob einzelner Raum oder komplette Wohnung — wir koordinieren alle Gewerke, halten den Zeitplan und übernehmen Verantwortung für das Gesamtergebnis. Ein Ansprechpartner, ein fester Preis.',
    highlights: ['Komplette Wohnungssanierung', 'Bad- & Küchenrenovierung', 'Gewerkekoordination aus einer Hand', 'Festpreis & Zeitplan', 'Saubere Übergabe inkl. Endreinigung'],
  },
  {
    ico: 'Garden', num: '04', title: 'Garten & Landschaftsbau',
    desc: 'Pflasterwege, Terrassen, Außenanlagen — Ihre Vision für draußen.',
    long: 'Wir gestalten Außenbereiche, die zur Architektur passen — von der Hofeinfahrt über die Terrasse bis zur kompletten Außenanlage. Solider Unterbau, präzise Verlegung, dauerhafte Optik.',
    highlights: ['Pflaster- & Plattenarbeiten', 'Terrassen aus Holz oder Stein', 'Einfahrten & Zugangswege', 'Mauern, Stufen & Einfassungen', 'Drainage & Untergrundaufbau'],
  },
  {
    ico: 'Assembly', num: '05', title: 'Montage & Demontage',
    desc: 'Präziser Aufbau und fachgerechter Rückbau — strukturiert und sauber.',
    long: 'Aufbau neuer Elemente oder fachgerechter Rückbau bestehender Strukturen — planvoll, dokumentiert und mit Rücksicht auf umliegende Gewerke. Ohne Kollateralschäden, mit ordentlicher Entsorgung.',
    highlights: ['Möbel- & Küchenmontage', 'Türen, Zargen & Treppen', 'Trockenbau-Rückbau', 'Entkernung & Entsorgung', 'Maschinen- & Anlagenversetzungen'],
  },
  {
    ico: 'Paint', num: '06', title: 'Malerarbeiten',
    desc: 'Innen und außen, Tapete, Lasur, Spachteltechnik — Oberflächen mit Charakter.',
    long: 'Klassische Anstriche, dekorative Spachteltechniken, Tapeten und Lasuren — innen wie außen. Wir bereiten Untergründe sorgfältig vor und arbeiten ausschließlich mit hochwertigen Materialien.',
    highlights: ['Innen- & Außenanstriche', 'Tapezierarbeiten', 'Spachteltechnik & Stuccolustro', 'Lasuren auf Holz & Beton', 'Untergrundvorbereitung & Grundierung'],
  },
  {
    ico: 'Concrete', num: '07', title: 'Beton & Maurerarbeiten', featured: true,
    desc: 'Fundament, Mauerwerk, Schalung — solide Substanz, die Bestand hat.',
    long: 'Solides Fundament für alles, was darauf folgt: Beton-, Schalungs- und Maurerarbeiten — sauber bewehrt, statisch korrekt, dauerhaft. Auch Sichtbeton mit definierter Schalhautstruktur.',
    highlights: ['Fundamente & Bodenplatten', 'Mauerwerk (KS, Ziegel, Porenbeton)', 'Schalung & Bewehrung', 'Sichtbeton-Oberflächen', 'Durchbrüche & Kernbohrungen'],
  },
];

function ServiceModal({ service, onClose }) {
  useEffect(() => {
    if (!service) return;
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = 'hidden';
    return () => {
      window.removeEventListener('keydown', onKey);
      document.body.style.overflow = prev;
    };
  }, [service, onClose]);

  if (!service) return null;
  const Ic = Icon[service.ico];
  const toForm = () => {
    onClose();
    window.__prefillContactForm && window.__prefillContactForm(service.title);
    const el = document.getElementById('kontakt');
    if (el) window.scrollTo({ top: el.offsetTop - 60, behavior: 'smooth' });
  };

  return (
    <div className="modal-backdrop" onClick={onClose} role="dialog" aria-modal="true" aria-label={service.title}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Schließen">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
        </button>

        <div className="modal-head">
          <div className="modal-ico"><Ic /></div>
          <div>
            <div className="modal-num">Leistung {service.num}</div>
            <h3>{service.title}</h3>
          </div>
        </div>

        <p className="modal-desc">{service.long}</p>

        <ul className="modal-highlights">
          {service.highlights.map((h) => (
            <li key={h}>
              <span className="check-pill"><Icon.Check /></span>
              <span>{h}</span>
            </li>
          ))}
        </ul>

        <div className="modal-cta">
          <button className="btn btn-primary" onClick={toForm}>
            Angebot zu „{service.title}“ <span className="arrow"><Icon.Arrow /></span>
          </button>
          <button className="btn btn-ghost" onClick={onClose}>Schließen</button>
        </div>
      </div>
    </div>
  );
}

function Services() {
  const [active, setActive] = useState(null);
  return (
    <section className="services pad" id="leistungen">
      <div className="container">
        <Reveal className="section-head">
          <div className="eyebrow">Leistungen</div>
          <h2>Alles aus einer Hand. <span className="display-italic">Sauber gebaut.</span></h2>
          <p>Sieben Gewerke unter einem Dach — von tragender Substanz bis zur letzten Fuge. Wir koordinieren, planen und führen aus.</p>
        </Reveal>

        <div className="services-grid">
          {SERVICES.map((s, i) => {
            const Ic = Icon[s.ico];
            return (
              <Reveal
                key={s.num}
                delay={(i % 3) + 1}
                className={`service-card ${s.featured ? 'featured' : ''}`}
                onClick={() => setActive(s)}
                role="button"
                tabIndex={0}
                onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); setActive(s); } }}
              >
                <div className="num">{s.num}</div>
                <div className="ico"><Ic /></div>
                <h3>{s.title}</h3>
                <p>{s.desc}</p>
                <div className="tag">Mehr erfahren <Icon.ArrowSmall /></div>
              </Reveal>
            );
          })}
        </div>
      </div>

      <ServiceModal service={active} onClose={() => setActive(null)} />
    </section>
  );
}

// ---------- About ----------
function AboutVisual() {
  const [i, setI] = useState(0);
  const total = 4;
  const go = (d) => setI((p) => (p + d + total) % total);
  const touch = useRef(null);
  const onTouchStart = (e) => { touch.current = e.touches[0].clientX; };
  const onTouchEnd = (e) => {
    if (touch.current == null) return;
    const dx = e.changedTouches[0].clientX - touch.current;
    if (Math.abs(dx) > 40) go(dx < 0 ? 1 : -1);
    touch.current = null;
  };
  return (
    <div className="about-slider" onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}>
      <div className="about-slides" style={{ transform: `translateX(-${i * 100}%)` }}>
        <div className="about-slide">
          <img src={window.__ASSETS.teamPhoto} alt="Das Team von IR Bau Deko" />
        </div>
        <div className="about-slide bauleiter-slide">
          <img src="uploads/PHOTO-2026-07-06-10-12-30-7a933804.jpg" alt="Inita Rihtere — Inhaberin von IR Bau Deko" style={{objectPosition:'50% 30%'}} />
          <div className="bauleiter-meta">
            <div className="eyebrow">Ihre Ansprechpartnerin</div>
            <span className="role">Inita Rihtere</span>
            <span className="note">Inhaberin — führt den Betrieb seit 2016 mit klarem Blick für Qualität und Kundenzufriedenheit.</span>
          </div>
        </div>
        <div className="about-slide bauleiter-slide">
          <img src={window.__ASSETS.bauleiter} alt="Edgars — Projektleitung & Kundenbetreuung bei IR Bau Deko" />
          <div className="bauleiter-meta">
            <div className="eyebrow">Ihr Ansprechpartner</div>
            <span className="role">Edgars</span>
            <span className="note">Projektleitung & Kundenbetreuung — von der ersten Begehung bis zur Übergabe an Ihrer Seite.</span>
          </div>
        </div>
        <div className="about-slide bauleiter-slide">
          <img src="uploads/PHOTO-2026-06-29-08-16-34.jpg" alt="Armin Hollatz — Technische Leitung & Qualitätssicherung bei IR Bau Deko" style={{objectPosition:'12% 30%'}} />
          <div className="bauleiter-meta">
            <div className="eyebrow">Ihr Ansprechpartner</div>
            <span className="role">Armin Hollatz</span>
            <span className="note">Technische Leitung & Qualitätssicherung — prüft jedes Detail, damit das Ergebnis hält, was wir versprechen.</span>
          </div>
        </div>
      </div>
      <button className="slider-arrow prev" onClick={() => go(-1)} aria-label="Vorheriges Bild"><Icon.Arrow /></button>
      <button className="slider-arrow next" onClick={() => go(1)} aria-label="Nächstes Bild"><Icon.Arrow /></button>
      <div className="slider-dots">
        {[0, 1, 2, 3].map((n) => (
          <button key={n} className={n === i ? 'active' : ''} onClick={() => setI(n)} aria-label={`Bild ${n + 1}`}></button>
        ))}
      </div>
    </div>
  );
}

function About() {
  const points = [
    { title: 'Qualifizierte Fachkräfte & Fachexperten', desc: 'Qualifiziertes Team, geprüfte Verarbeitung — keine Kompromisse bei Material oder Ausführung.' },
    { title: 'Festpreis, fest geplant', desc: 'Transparente Kostenvoranschläge. Keine bösen Überraschungen am Ende.' },
    { title: 'Termintreue & Sauberkeit', desc: 'Wir halten Zeitpläne und hinterlassen Baustellen, wie wir sie selbst vorfinden wollen.' },
  ];
  return (
    <section className="pad" id="ueber-uns">
      <div className="container">
        <div className="about-grid">
          <Reveal className="about-visual">
            <AboutVisual />
          </Reveal>

          <div>
            <Reveal><div className="eyebrow">Über uns</div></Reveal>
            <Reveal delay={1}><h2 style={{margin:'16px 0 20px'}}>Ein Betrieb aus Sierksdorf — für ganz <span className="display-italic">Norddeutschland.</span></h2></Reveal>
            <Reveal delay={2}>
              <p style={{color:'var(--anthracite-600)', fontSize:18, maxWidth:560}}>
                IR Bau Deko ist Ihr Partner für Trockenbau, Fliesenlegerei und begleitende Gewerke.
                Unser eingespieltes Team verbindet handwerkliche Präzision mit einem klaren Blick für Ästhetik — damit jeder
                Raum das wird, was er werden soll.
              </p>
              <p style={{color:'var(--anthracite-600)', fontSize:16, maxWidth:560, marginTop:14}}>
                Wir legen großen Wert auf eine kundenorientierte und individuelle Herangehensweise — denn nach unserer
                Erfahrung erzielt man so das bestmögliche Verständnis für Ihr Vorhaben. Nach einem persönlichen Gespräch
                und der Besichtigung des Einsatzortes erstellen unsere fachkundigen und erfahrenen Kollegen Ihnen gerne
                ein Angebot, das ganz individuell auf Ihre Bedürfnisse, Wünsche und die Gegebenheiten vor Ort abgestimmt ist.
              </p>
              <p style={{color:'var(--anthracite-600)', fontSize:16, maxWidth:560, marginTop:14}}>
                Seit 2016 sind wir im Bauwesen tätig. Unsere verwirklichten Projekte und zufriedenen Kunden erzählen mehr
                als tausend Worte — werfen Sie gerne einen Blick auf unseren{' '}
                <a href="https://www.instagram.com/ir.baudeko/" target="_blank" rel="noopener noreferrer" style={{color:'var(--blue-600)', fontWeight:600}}>Instagram-Account</a>,
                um selbst einen ersten Eindruck davon zu gewinnen, was Sie erwartet. Wir freuen uns auf Ihre Anfrage!
              </p>
            </Reveal>
            <Reveal delay={3}>
              <div className="about-list">
                {points.map(p => (
                  <div className="item" key={p.title}>
                    <div className="check"><Icon.Check /></div>
                    <div>
                      <h4>{p.title}</h4>
                      <p>{p.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </Reveal>
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Process ----------
const STEPS = [
  { n: '01', t: 'Aufmaß & Planung', d: 'Millimetergenaues Messen und Anzeichnen. Jedes Maß sitzt, bevor der erste Schnitt fällt.', img: window.__ASSETS.cAufmass },
  { n: '02', t: 'Präziser Zuschnitt', d: 'Fliese für Fliese auf Maß gebracht — Kanten sauber, Fugen exakt, ohne Kompromisse.', img: window.__ASSETS.cAnzeichnen },
  { n: '03', t: 'Verlegen mit Sorgfalt', d: 'Ob Riemchen, Fliese oder Boden: Material für Material von Hand gesetzt und ausgerichtet.', img: window.__ASSETS.cBrick },
  { n: '04', t: 'Das Ergebnis', d: 'Saubere Übergabe — ein Resultat, hinter dem wir mit unserem Namen stehen.', img: window.__ASSETS.cResult },
];

function Process() {
  return (
    <section className="process pad" id="prozess">
      <div className="container">
        <Reveal className="section-head">
          <div className="eyebrow light">Ablauf</div>
          <h2>Von der Planung zum <span className="display-italic">Ergebnis</span> — mit Sorgfalt.</h2>
          <p>Vier Schritte, ein Anspruch: handwerkliche Präzision in jeder Phase. So entsteht aus einer Baustelle ein Raum, der überzeugt.</p>
        </Reveal>

        <div className="process-steps">
          {STEPS.map((s, i) => (
            <Reveal key={s.n} delay={i+1} className="step">
              <div className="step-photo">
                <img src={s.img} alt={s.t} loading="lazy" />
                <span className="step-num">{s.n}</span>
              </div>
              <div className="step-body">
                <h3>{s.t}</h3>
                <p>{s.d}</p>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Projects ----------
function Projects({ instagramUrl, instagramHandle }) {
  const items = [
    { img: window.__ASSETS.cBrickWall, cat: 'Riemchen · Wandgestaltung', title: 'Klinkeroptik im Innenraum' },
    { img: window.__ASSETS.cTile, cat: 'Fliesenlegerei', title: 'Großformat in Natursteinoptik' },
    { img: window.__ASSETS.cTeam, cat: 'Malerarbeiten', title: 'Wand- & Deckenanstrich' },
  ];
  return (
    <section className="pad" id="projekte">
      <div className="container">
        <Reveal className="section-head section-head-row">
          <div>
            <div className="eyebrow">Projekte</div>
            <h2>Ausgewählte <span className="display-italic">Arbeiten.</span></h2>
            <p>Ein Auszug aus fertigen Baustellen — jedes Projekt bekommt von uns die volle Aufmerksamkeit.</p>
          </div>
          {instagramUrl && (
            <a href={instagramUrl} target="_blank" rel="noopener noreferrer" className="ig-cta">
              <span className="ig-icon"><Icon.Instagram /></span>
              <span className="ig-text">
                <span className="ig-label">Mehr auf Instagram</span>
                <span className="ig-handle">{instagramHandle}</span>
              </span>
              <span className="ig-arrow"><Icon.ArrowSmall /></span>
            </a>
          )}
        </Reveal>

        <div className="projects-grid projects-photos">
          {items.map((p, i) => (
            <Reveal key={i} delay={(i%3)+1} className={`project photo-${i+1}`}>
              <img src={p.img} alt={p.title} className="project-img" />
              <div className="cap">
                <div>
                  <div className="t">{p.cat}</div>
                  <h4>{p.title}</h4>
                </div>
                <div className="go"><Icon.ArrowSmall /></div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Contact form ----------
function ContactForm() {
  const [sent, setSent] = useState(false);
  const [showDs, setShowDs] = useState(false);
  const [betreff, setBetreff] = useState('Angebot anfragen');
  const [nachricht, setNachricht] = useState('');
  useEffect(() => {
    window.__prefillContactForm = (title) => {
      setBetreff('Angebot anfragen');
      setNachricht(`Ich interessiere mich für Ihre Leistung „${title}“ und bitte um ein Angebot.\n\n`);
      setTimeout(() => { const n = document.querySelector('.cform textarea'); if (n) n.focus(); }, 600);
    };
    return () => { delete window.__prefillContactForm; };
  }, []);
  const submit = (e) => {
    e.preventDefault();
    const f = e.target;
    if (!f.checkValidity()) { f.reportValidity(); return; }
    if (!f.consent.checked) { f.consent.focus(); return; }
    const subject = `${f.betreff.value} — Anfrage über die Website von ${f.name.value}`;
    const body = `Name: ${f.name.value}\nE-Mail: ${f.email.value}\nTelefon: ${f.telefon.value || '—'}\n\n${f.nachricht.value}`;
    window.open(`mailto:ir.baudeko@gmail.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`, '_blank');
    setSent(true);
  };
  return (
    <Reveal delay={3} className="cform-wrap">
      <form className="cform" onSubmit={submit}>
        <h3>Angebot oder Frage senden</h3>
        <div className="cform-grid">
          <label>Name*<input name="name" type="text" required placeholder="Ihr Name" /></label>
          <label>E-Mail*<input name="email" type="email" required placeholder="ihre@email.de" /></label>
          <label>Telefon<input name="telefon" type="tel" placeholder="Optional" /></label>
          <label>Betreff*
            <select name="betreff" required value={betreff} onChange={(e) => setBetreff(e.target.value)}>
              <option>Angebot anfragen</option>
              <option>Allgemeine Frage</option>
              <option>Terminanfrage</option>
            </select>
          </label>
        </div>
        <label>Ihre Nachricht*<textarea name="nachricht" rows="5" required placeholder="Beschreiben Sie kurz Ihr Projekt oder Ihre Frage …" value={nachricht} onChange={(e) => setNachricht(e.target.value)}></textarea></label>
        <label className="cform-consent"><input type="checkbox" name="consent" required /><span>Ich habe die <a href="datenschutz.html" onClick={(e) => { e.preventDefault(); setShowDs(true); }}>Datenschutzerklärung</a> gelesen und bin mit der Verarbeitung meiner Angaben zur Bearbeitung der Anfrage einverstanden.*</span></label>
        <div className="cform-foot">
          <button type="submit" className="btn btn-primary">Nachricht senden <span className="arrow"><Icon.Arrow /></span></button>
          {sent && <span className="cform-sent">Ihr E-Mail-Programm wurde geöffnet — bitte dort auf „Senden“ klicken.</span>}
        </div>
        {showDs && ReactDOM.createPortal(
          <div className="ds-overlay" onClick={() => setShowDs(false)} role="dialog" aria-modal="true" aria-label="Datenschutzerklärung">
            <div className="ds-modal" onClick={(e) => e.stopPropagation()}>
              <button type="button" className="ds-close" onClick={() => setShowDs(false)} aria-label="Schließen">
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
              </button>
              <iframe src="datenschutz.html" title="Datenschutzerklärung"></iframe>
            </div>
          </div>,
          document.body
        )}
      </form>
    </Reveal>
  );
}

// ---------- CTA / Contact ----------
function CTA() {
  return (
    <section className="cta pad" id="kontakt">
      <div className="container cta-grid">
        <Reveal>
          <div className="eyebrow light" style={{color:'rgba(255,255,255,.85)'}}>Kontakt</div>
          <h2 style={{margin:'16px 0 0'}}>Lassen Sie uns über Ihr <span style={{fontFamily:'var(--font-display)', fontStyle:'italic', fontWeight:500, color:'white'}}>Projekt</span> sprechen.</h2>
          <p className="lead">
            Ob kleine Sanierung oder Komplettausbau – wir hören zu, beraten ehrlich
            und planen Ihr Projekt mit Verstand. Nach der gemeinsamen Besprechung
            erhalten Sie von uns zeitnah ein transparentes und verlässliches Angebot.
          </p>
          <div style={{display:'flex', gap:14, flexWrap:'wrap'}}>
            <a href="mailto:ir.baudeko@gmail.com" target="_blank" rel="noopener noreferrer" className="btn btn-primary">
              Angebot per E-Mail <span className="arrow"><Icon.Arrow /></span>
            </a>
            <a href="#ueber-uns" className="btn btn-ghost on-dark">Mehr über uns</a>
          </div>
        </Reveal>

        <Reveal delay={2} className="contact-card">
          <h3>So erreichen Sie uns</h3>
          <p className="sub">Direkt, ohne Formular. Antwort innerhalb eines Werktags.</p>

          <div className="contact-row">
            <div className="ic"><Icon.Pin /></div>
            <div>
              <div className="label">Adresse</div>
              <div className="val">Neustädter Straße 31<br/>23730 Sierksdorf</div>
            </div>
          </div>
          <div className="contact-row">
            <div className="ic"><Icon.Mail /></div>
            <div>
              <div className="label">E-Mail</div>
              <div className="val"><a href="mailto:ir.baudeko@gmail.com" target="_blank" rel="noopener noreferrer">ir.baudeko@gmail.com</a></div>
            </div>
          </div>
          <div className="contact-row">
            <div className="ic"><Icon.Clock /></div>
            <div>
              <div className="label">Bürozeiten</div>
              <div className="val">Mo – Fr · 08:00 – 18:00</div>
            </div>
          </div>
        </Reveal>

        <ContactForm />
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-top">
          <div className="footer-brand">
            <img src={window.__ASSETS.logo} alt="IR Bau Deko" />
            <p>Trockenbau, Fliesenlegerei und alles, was dazugehört — Handwerk aus Sierksdorf für ganz Norddeutschland.</p>
          </div>
          <div className="footer-col">
            <h5>Leistungen</h5>
            <ul>
              <li><a href="#leistungen">Trockenbau</a></li>
              <li><a href="#leistungen">Fliesenlegerei</a></li>
              <li><a href="#leistungen">Renovierung</a></li>
              <li><a href="#leistungen">Malerarbeiten</a></li>
              <li><a href="#leistungen">Garten & Landschaft</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Unternehmen</h5>
            <ul>
              <li><a href="#ueber-uns">Über uns</a></li>
              <li><a href="#prozess">Ablauf</a></li>
              <li><a href="#projekte">Projekte</a></li>
              <li><a href="#kontakt">Kontakt</a></li>
            </ul>
          </div>
          <div className="footer-col">
            <h5>Kontakt</h5>
            <ul>
              <li>Neustädter Straße 31</li>
              <li>23730 Sierksdorf</li>
              <li><a href="mailto:ir.baudeko@gmail.com" target="_blank" rel="noopener noreferrer">ir.baudeko@gmail.com</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 IR Bau Deko · Alle Rechte vorbehalten.</div>
          <div className="mini"><a href="impressum.html">Impressum</a> · <a href="datenschutz.html">Datenschutz</a></div>
        </div>
      </div>
    </footer>
  );
}

// ---------- WhatsApp Icon ----------
function WhatsAppIcon() {
  return (
    <svg viewBox="0 0 32 32" fill="currentColor" aria-hidden="true">
      <path d="M16.002 3C9.373 3 4 8.373 4 15c0 2.117.552 4.106 1.517 5.832L4 28l7.354-1.493A11.96 11.96 0 0 0 16.002 27C22.628 27 28 21.627 28 15S22.628 3 16.002 3zm6.98 16.928c-.297.83-1.72 1.592-2.39 1.693-.611.09-1.385.128-2.235-.14-.515-.163-1.176-.38-2.023-.744-3.559-1.538-5.885-5.12-6.063-5.356-.178-.236-1.45-1.927-1.45-3.678 0-1.75.917-2.612 1.243-2.969.327-.357.713-.446.95-.446.238 0 .476.002.684.012.22.011.515-.083.806.614.297.71 1.01 2.46 1.098 2.64.09.178.149.386.03.623-.119.237-.178.386-.357.594-.178.208-.376.464-.537.624-.179.178-.366.371-.158.727.208.357.925 1.524 1.988 2.47 1.366 1.215 2.518 1.59 2.875 1.768.357.179.565.149.773-.09.208-.237.891-1.04 1.128-1.396.238-.357.475-.297.803-.178.326.119 2.076.98 2.433 1.158.357.179.595.268.683.416.09.149.09.86-.208 1.69z"/>
    </svg>
  );
}

// ---------- Floating WhatsApp button ----------
function WhatsAppFloat({ phone, message, label, showTooltip }) {
  const [visible, setVisible] = useState(false);
  const [tipOpen, setTipOpen] = useState(false);

  useEffect(() => {
    const onScroll = () => setVisible(window.scrollY > 280);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  useEffect(() => {
    if (!visible || !showTooltip) { setTipOpen(false); return; }
    const t = setTimeout(() => setTipOpen(true), 1500);
    const t2 = setTimeout(() => setTipOpen(false), 6500);
    return () => { clearTimeout(t); clearTimeout(t2); };
  }, [visible, showTooltip]);

  const clean = (phone || '').replace(/[^0-9]/g, '');
  const href = `https://wa.me/${clean}?text=${encodeURIComponent(message || '')}`;

  return (
    <a
      href={href}
      target="_blank"
      rel="noopener noreferrer"
      className={`wa-float ${visible ? 'visible' : ''} ${tipOpen ? 'show-tip' : ''}`}
      aria-label="WhatsApp kontaktieren"
      onMouseEnter={() => setTipOpen(false)}
    >
      <span className="wa-icon"><WhatsAppIcon /></span>
      <span className="wa-label">{label}</span>
      {showTooltip && <span className="wa-tooltip">Fragen? Schreiben Sie uns!</span>}
    </a>
  );
}

// ---------- Tweak defaults ----------
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "waPhone": "491234567890",
  "waMessage": "Hallo IR Bau Deko, ich interessiere mich für ein Angebot.",
  "waLabel": "WhatsApp Chat",
  "waTooltip": true,
  "accentHue": 220,
  "showProcess": true,
  "showProjects": true,
  "instagramUrl": "https://www.instagram.com/ir.baudeko/",
  "instagramHandle": "@ir.baudeko",
  "heroHeadline": "precision"
}/*EDITMODE-END*/;

// ---------- App ----------
function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [scrollY, setScrollY] = useState(0);

  // Apply accent hue dynamically
  useEffect(() => {
    const root = document.documentElement;
    const h = t.accentHue;
    root.style.setProperty('--blue-500', `hsl(${h} 92% 60%)`);
    root.style.setProperty('--blue-600', `hsl(${h} 85% 52%)`);
    root.style.setProperty('--blue-400', `hsl(${h} 92% 68%)`);
    root.style.setProperty('--blue-50',  `hsl(${h} 90% 97%)`);
  }, [t.accentHue]);

  // Migrate previously-saved old Instagram URL to the correct one
  useEffect(() => {
    if (t.instagramUrl === 'https://instagram.com/ir.baudeko') {
      setTweak('instagramUrl', 'https://www.instagram.com/ir.baudeko/');
    }
  }, [t.instagramUrl]);

  // Track scroll once, share with Nav + MorphLogo
  useEffect(() => {
    const onScroll = () => setScrollY(window.scrollY);
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  return (
    <>
      <Nav scrollY={scrollY} />
      <MorphLogo scrollY={scrollY} />
      <Hero headline={t.heroHeadline} />
      <Services />
      <About />
      {t.showProcess && <Process />}
      {t.showProjects && <Projects instagramUrl={t.instagramUrl} instagramHandle={t.instagramHandle} />}
      <CTA />
      <Footer />

      <WhatsAppFloat
        phone={t.waPhone}
        message={t.waMessage}
        label={t.waLabel}
        showTooltip={t.waTooltip}
      />

      <TweaksPanel>
        <TweakSection label="WhatsApp Button" />
        <TweakText label="Telefonnummer" value={t.waPhone}
          onChange={(v) => setTweak('waPhone', v)} />
        <TweakText label="Nachricht" value={t.waMessage}
          onChange={(v) => setTweak('waMessage', v)} />
        <TweakText label="Button-Label" value={t.waLabel}
          onChange={(v) => setTweak('waLabel', v)} />
        <TweakToggle label="Tooltip anzeigen" value={t.waTooltip}
          onChange={(v) => setTweak('waTooltip', v)} />

        <TweakSection label="Farbe" />
        <TweakSlider label="Blau-Ton" value={t.accentHue} min={180} max={260} step={1} unit="°"
          onChange={(v) => setTweak('accentHue', v)} />

        <TweakSection label="Hero" />
        <TweakRadio label="Kursives Wort" value={t.heroHeadline}
          options={['precision', 'passion', 'quality']}
          onChange={(v) => setTweak('heroHeadline', v)} />

        <TweakSection label="Sektionen" />
        <TweakToggle label="Ablauf-Sektion" value={t.showProcess}
          onChange={(v) => setTweak('showProcess', v)} />
        <TweakToggle label="Projekte-Sektion" value={t.showProjects}
          onChange={(v) => setTweak('showProjects', v)} />

        <TweakSection label="Instagram" />
        <TweakText label="Instagram URL" value={t.instagramUrl}
          onChange={(v) => setTweak('instagramUrl', v)} />
        <TweakText label="Handle" value={t.instagramHandle}
          onChange={(v) => setTweak('instagramHandle', v)} />
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);
