/* global React */
const { useState, useRef, useEffect } = React;

/* ============ DEVICE FRAMES ============ */
const Laptop = ({ children, scale = 1, style }) => (
  <div style={{ ...style }}>
    <div style={{ position: 'relative', aspectRatio: '16/10', background: '#0F2B22', borderRadius: '14px 14px 6px 6px', padding: 10, border: '1px solid #1E4A3A', boxShadow: '0 40px 80px -30px rgba(15,43,34,0.5)' }}>
      <div style={{ width: '100%', height: '100%', background: '#FBFAF7', borderRadius: 6, overflow: 'hidden', position: 'relative' }}>
        {children}
      </div>
    </div>
    <div style={{ height: 14, background: 'linear-gradient(180deg, #0F2B22, #091C17)', borderRadius: '0 0 20px 20px', width: '110%', marginLeft: '-5%', position: 'relative' }}>
      <div style={{ position: 'absolute', top: 0, left: '50%', transform: 'translateX(-50%)', width: 80, height: 6, background: '#091C17', borderRadius: '0 0 8px 8px' }}/>
    </div>
  </div>
);

const Tablet = ({ children, style }) => (
  <div style={{ ...style }}>
    <div style={{ background: '#0F2B22', borderRadius: 18, padding: 8, border: '1px solid #1E4A3A', aspectRatio: '4/3', boxShadow: '0 30px 60px -20px rgba(15,43,34,0.5)' }}>
      <div style={{ width: '100%', height: '100%', background: '#FBFAF7', borderRadius: 12, overflow: 'hidden' }}>
        {children}
      </div>
    </div>
  </div>
);

const Phone = ({ children, style }) => (
  <div style={{ ...style }}>
    <div style={{ background: '#0F2B22', borderRadius: 36, padding: 6, border: '1px solid #1E4A3A', aspectRatio: '9/19', boxShadow: '0 40px 80px -30px rgba(15,43,34,0.55)', position: 'relative' }}>
      <div style={{ position: 'absolute', top: 12, left: '50%', transform: 'translateX(-50%)', width: 60, height: 14, background: '#000', borderRadius: 10, zIndex: 2 }}/>
      <div style={{ width: '100%', height: '100%', background: '#0F2B22', borderRadius: 30, overflow: 'hidden', position: 'relative' }}>
        {children}
      </div>
    </div>
  </div>
);

/* ============ NAV ============ */
const Nav = ({ dark = false, active = '' }) => {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const links = [
    { l: 'Product', href: 'Product.html' },
    { l: 'Oplossingen', href: 'Oplossingen.html' },
    { l: 'Prijzen', href: 'Prijzen.html' },
    { l: 'Over ons', href: 'Over ons.html' },
    { l: 'Resources', href: 'Resources.html' },
  ];
  const textColor = dark ? '#B8C9BF' : 'var(--text-muted)';
  const linkNodes = links.map(({ l, href }) => (
    <a key={l} href={href} style={{
      display: 'flex', alignItems: 'center', gap: 4,
      color: active === l ? (dark ? '#F7F5F2' : 'var(--ink)') : textColor,
      fontWeight: active === l ? 500 : 400,
    }}>{l}</a>
  ));
  return (
    <nav className="site-nav" style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: scrolled ? (dark ? 'rgba(15,43,34,0.85)' : 'rgba(247,245,242,0.88)') : 'transparent',
      backdropFilter: scrolled ? 'blur(12px)' : 'none',
      borderBottom: scrolled ? (dark ? '1px solid rgba(255,255,255,0.08)' : '1px solid var(--line)') : '1px solid transparent',
      transition: 'all 200ms ease',
    }}>
      <div className="shell nav-shell">
        <a href="index.html" className="nav-logo"><Logo size={30} variant={dark ? 'dark' : 'light'}/></a>
        <div className="nav-links">
          {linkNodes}
        </div>
        <div className="nav-actions">
          <a href="Demo.html" className="btn btn-gold btn-sm">Plan een afspraak <Ic.arrow/></a>
        </div>
        <button className="nav-toggle" type="button" aria-label="Menu" aria-expanded={open} onClick={() => setOpen(!open)}>
          <Ic.menu/>
        </button>
      </div>
      {open && (
        <div className="nav-mobile-panel">
          {linkNodes}
          <a href="Demo.html" className="btn btn-gold btn-sm">Plan een afspraak <Ic.arrow/></a>
        </div>
      )}
    </nav>
  );
};

/* ============ HERO ============ */
const Hero = () => (
  <section style={{ position: 'relative', background: 'linear-gradient(180deg, #0F2B22 0%, #0F2B22 55%, #163A2E 100%)', color: '#F7F5F2', overflow: 'hidden', paddingBottom: 80 }}>
    {/* Decorative rules */}
    <div aria-hidden style={{ position: 'absolute', inset: 0, backgroundImage: 'radial-gradient(circle at 15% 20%, rgba(184,138,59,0.18), transparent 40%), radial-gradient(circle at 85% 30%, rgba(122,132,106,0.2), transparent 40%)', pointerEvents: 'none' }}/>
    <div aria-hidden style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(232,217,184,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(232,217,184,0.04) 1px, transparent 1px)', backgroundSize: '60px 60px', pointerEvents: 'none', maskImage: 'radial-gradient(circle at center, black 40%, transparent 80%)' }}/>
    <div className="shell" style={{ position: 'relative', paddingTop: 72, paddingBottom: 40 }}>
      <div style={{ maxWidth: 820 }}>
        <div className="chip chip-dark" style={{ marginBottom: 20 }}>
          <Ic.dot style={{ color: '#B88A3B' }}/> Speciaal voor kozijnbedrijven
        </div>
        <h1 className="display" style={{ fontSize: 'clamp(48px, 6vw, 84px)', color: '#F7F5F2', margin: 0, lineHeight: 0.98 }}>
          Van lead tot montage.<br/>
          <span style={{ color: '#B88A3B', fontStyle: 'italic', fontFamily: 'Sora', fontWeight: 500 }}>Alles in één systeem.</span>
        </h1>
        <p style={{ fontSize: 18, color: '#B8C9BF', maxWidth: 620, marginTop: 24, lineHeight: 1.55 }}>
          KozijnSuite combineert KozijnLAB, CRM, offertes, planning en klantportaal in één platform — zodat je slimmer verkoopt en strakker uitvoert.
        </p>
        <div style={{ display: 'flex', gap: 12, marginTop: 32 }}>
          <a href="Demo.html" className="btn btn-gold btn-lg">Plan een afspraak <Ic.arrow/></a>
          <a href="#tour" className="btn btn-ghost-dark btn-lg"><Ic.play/> Bekijk video</a>
        </div>
        <div style={{ display: 'flex', gap: 28, marginTop: 36, color: '#8AA093', fontSize: 13 }}>
          {['250+ kozijnbedrijven','€ 45M+ omzet verwerkt','4,8 / 5 klantwaardering'].map(s => (
            <div key={s} style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
              <Ic.check style={{ color: '#B88A3B' }}/> {s}
            </div>
          ))}
        </div>
      </div>
    </div>

    {/* 3 product shots layered */}
    <div className="shell" style={{ position: 'relative', marginTop: 40 }}>
      <div className="hero-device-stage" style={{ position: 'relative', height: 560 }}>
        {/* Laptop — dashboard */}
        <div className="hero-laptop" style={{ position: 'absolute', left: '4%', right: '22%', top: 0 }}>
          <Laptop>
            <ScreenDashboard />
          </Laptop>
        </div>
        {/* Tablet — KozijnLAB */}
        <div className="hero-tablet" style={{ position: 'absolute', right: '2%', top: 90, width: '34%' }}>
          <Tablet>
            <ScreenKozijnLab />
          </Tablet>
        </div>
        {/* Phone — Klantportaal */}
        <div className="hero-phone" style={{ position: 'absolute', right: '26%', bottom: -40, width: '14%' }}>
          <Phone>
            <ScreenKlantportaal />
          </Phone>
        </div>
      </div>
    </div>
  </section>
);

/* ============ PRODUCT TOUR (interactive) ============ */
const ProductTour = () => {
  const screens = [
    { id: 'dossier', label: 'Verkoopdossier', kicker: '01', title: 'Een centraal dossier per klant', body: 'Alle informatie, elementen, documenten en communicatie voor een project — op één plek. Lead, klant, project en status blijven automatisch in sync.', Comp: ScreenDossier },
    { id: 'lab', label: 'KozijnLAB', kicker: '02', title: 'Configureren en offreren in minuten', body: 'Teken elk element exact op maat, bepaal profiel, glas en beslag, en krijg direct een technisch gecontroleerde prijs terug.', Comp: ScreenKozijnLab },
    { id: 'offerte', label: 'Offerte', kicker: '03', title: 'Professionele output — met één klik', body: 'Je klant ontvangt een strakke PDF én een digitaal akkoord-scherm. Getekend? De order staat automatisch klaar.', Comp: ScreenOfferte },
    { id: 'dashboard', label: 'Orderdashboard', kicker: '04', title: 'Pipeline en omzet in één oogopslag', body: 'Zie precies welke dossiers welke fase bereiken, hoeveel omzet er in de pipeline zit, en waar je moet bijsturen.', Comp: ScreenDashboard },
    { id: 'portaal', label: 'Klantportaal', kicker: '05', title: 'Nette communicatie richting de klant', body: 'Geef de klant inzicht in status, documenten, betalingen en planning — zonder dat jij ernaar omkijkt.', Comp: ScreenKlantportaal },
    { id: 'montage', label: 'Montage & planning', kicker: '06', title: 'Uitvoering gekoppeld aan verkoop', body: 'Plan montageteams, koppel orders aan dagen en voorkom dubbel inboeken. Elke montage is direct teruggekoppeld naar het dossier.', Comp: ScreenPlanning },
  ];
  const [active, setActive] = useState('dossier');
  const current = screens.find(s => s.id === active);
  const Comp = current.Comp;
  const isPhone = active === 'portaal';

  return (
    <section id="tour" className="section" style={{ background: 'var(--ivory)' }}>
      <div className="shell">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 40 }}>
          <div style={{ maxWidth: 620 }}>
            <div className="eyebrow eyebrow-line">Alles wat je nodig hebt</div>
            <h2 className="display" style={{ fontSize: 'clamp(36px, 4.2vw, 60px)', margin: '14px 0 0' }}>
              Eén platform.<br/><span style={{ color: 'var(--gold)' }}>Zes modules die samenwerken.</span>
            </h2>
          </div>
          <p className="muted" style={{ maxWidth: 420, fontSize: 15, margin: 0 }}>
            Klik op een module hieronder om te zien hoe KozijnSuite er voor jouw team uitziet.
          </p>
        </div>

        {/* Segmented tabs */}
        <div style={{ display: 'flex', gap: 4, padding: 4, background: '#fff', border: '1px solid var(--line)', borderRadius: 999, width: 'fit-content', maxWidth: '100%', overflowX: 'auto', marginBottom: 32, boxShadow: 'var(--shadow-sm)' }}>
          {screens.map(s => (
            <button key={s.id} onClick={() => setActive(s.id)} style={{
              padding: '10px 16px', borderRadius: 999, fontSize: 13, fontWeight: 500,
              background: active === s.id ? 'var(--ink)' : 'transparent',
              color: active === s.id ? 'var(--ivory)' : 'var(--text-muted)',
              transition: 'all 180ms ease',
              whiteSpace: 'nowrap',
            }}>
              <span style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 11, opacity: 0.6, marginRight: 8 }}>{s.kicker}</span>
              {s.label}
            </button>
          ))}
        </div>

        {/* Content */}
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2.2fr', gap: 40, alignItems: 'stretch' }}>
          <div style={{ paddingTop: 20 }}>
            <div className="mono" style={{ fontSize: 12, color: 'var(--gold)', letterSpacing: '0.15em' }}>{current.kicker} / 06</div>
            <h3 className="display" style={{ fontSize: 32, margin: '10px 0 14px' }}>{current.title}</h3>
            <p className="muted" style={{ fontSize: 15, lineHeight: 1.65 }}>{current.body}</p>
            <div style={{ marginTop: 22, borderTop: '1px solid var(--line)', paddingTop: 18 }}>
              {[
                ['Verkoopdossier','Eén dossier, alles terugvindbaar'],
                ['KozijnLAB','Tekening en prijs in dezelfde flow'],
                ['Offerte','Digitaal akkoord zonder heen-en-weer'],
                ['Orderdashboard','Pipeline, omzet, statussen, knelpunten'],
                ['Klantportaal','Klant blijft geïnformeerd, altijd'],
                ['Montage & planning','Teams, dagen, kozijnen — strak gekoppeld'],
              ].map(([label, desc], i) => {
                const isActive = label === current.label;
                return (
                  <div key={label} onClick={() => setActive(screens[i].id)} style={{
                    padding: '10px 0', cursor: 'pointer',
                    borderBottom: '1px dashed var(--line)',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12,
                  }}>
                    <div>
                      <div style={{ fontFamily: 'Sora', fontSize: 14, fontWeight: 500, color: isActive ? 'var(--gold)' : 'var(--ink)' }}>{label}</div>
                      <div style={{ fontSize: 12, color: 'var(--text-subtle)' }}>{desc}</div>
                    </div>
                    <Ic.chevron style={{ color: isActive ? 'var(--gold)' : 'var(--text-subtle)' }}/>
                  </div>
                );
              })}
            </div>
          </div>

          <div style={{ position: 'relative' }}>
            <div style={{ background: 'linear-gradient(135deg, #EFEBE3, #E4DFD4)', borderRadius: 20, padding: 24, border: '1px solid var(--line)' }}>
              {isPhone ? (
                <div style={{ display: 'flex', justifyContent: 'center' }}>
                  <Phone style={{ width: 280 }}>
                    <Comp />
                  </Phone>
                </div>
              ) : (
                <div style={{ aspectRatio: '16/10', background: '#0F2B22', borderRadius: 12, padding: 8, boxShadow: 'var(--shadow-lg)' }}>
                  <div style={{ width: '100%', height: '100%', borderRadius: 6, overflow: 'hidden' }}>
                    <Comp />
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Nav, Hero, ProductTour, Laptop, Tablet, Phone });