/* global React */
/* ============ HOW IT WORKS ============ */
const HowItWorks = () => {
  const steps = [
    { n: '01', t: 'Lead & afspraak', d: 'Lead komt binnen via website, telefoon of doorverwijzing — meteen in het dossier.' },
    { n: '02', t: 'Opname in KozijnLAB', d: 'Teken elk element op locatie of op kantoor — profielen, glas, beslag.' },
    { n: '03', t: 'Offerte & akkoord', d: 'Eén klik naar PDF of klantportaal. Digitaal getekend? Order staat klaar.' },
    { n: '04', t: 'Productie & planning', d: 'Order wordt automatisch gepland en toegewezen aan een montageteam.' },
    { n: '05', t: 'Montage & oplevering', d: 'Teams werken met digitale werkbonnen. Oplevering sluit het dossier.' },
  ];
  return (
    <section className="section-tight" style={{ background: 'var(--ivory)', borderTop: '1px solid var(--line)' }}>
      <div className="shell">
        <div style={{ display: 'grid', gridTemplateColumns: '280px 1fr', gap: 40, alignItems: 'start' }}>
          <div>
            <div className="eyebrow eyebrow-line">Van lead tot montage</div>
            <h2 className="display" style={{ fontSize: 36, margin: '14px 0 12px' }}>Zo werkt het</h2>
            <p className="muted" style={{ fontSize: 14 }}>Vijf stappen, één systeem, nul dubbele invoer.</p>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0, position: 'relative' }}>
            <div aria-hidden style={{ position: 'absolute', top: 16, left: '10%', right: '10%', height: 1, borderTop: '1px dashed var(--gold)', opacity: 0.5 }}/>
            {steps.map((s, i) => (
              <div key={s.n} style={{ padding: '0 12px', position: 'relative' }}>
                <div style={{
                  width: 32, height: 32, borderRadius: '50%',
                  background: i === 0 ? 'var(--gold)' : 'var(--ivory)',
                  border: '1px solid var(--gold)',
                  color: i === 0 ? '#fff' : 'var(--gold)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontFamily: 'JetBrains Mono, monospace', fontSize: 12, fontWeight: 600,
                  marginBottom: 16, position: 'relative', zIndex: 1,
                }}>{s.n}</div>
                <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 14.5, color: 'var(--ink)', marginBottom: 4 }}>{s.t}</div>
                <div style={{ fontSize: 12.5, color: 'var(--text-muted)', lineHeight: 1.55 }}>{s.d}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

/* ============ ORDERS TABLE (live filter) ============ */
const OrdersTable = () => {
  const all = [
    { klant: 'Fam. Jansen', project: 'Verbouwing Enschede', status: 'Offerte verstuurd', tone: 'gold', fase: 'Offerte', eigenaar: 'Mark de Vries', datum: '25 apr', bedrag: 18865.00 },
    { klant: 'Mark de Vries B.V.', project: 'Nieuwbouw Hengelo', status: 'Akkoord ontvangen', tone: 'green', fase: 'Productie', eigenaar: 'Lisa T.', datum: '23 apr', bedrag: 9075.50 },
    { klant: 'Project Hofzicht', project: 'Hofzicht 16 woningen', status: 'In productie', tone: 'ink', fase: 'Productie', eigenaar: 'Kees B.', datum: '19 apr', bedrag: 124570.00 },
    { klant: 'Villa Lonneker', project: 'Lonneker — Zuidzijde', status: 'Montage ingepland', tone: 'olive', fase: 'Montage', eigenaar: 'Dennis V.', datum: '18 apr', bedrag: 12280.00 },
    { klant: 'Nieuwbouw De Esch', project: '12 woningen — De Esch', status: 'Offerte concept', tone: 'grey', fase: 'Offerte', eigenaar: 'Mark de Vries', datum: '22 apr', bedrag: 15420.00 },
    { klant: 'Fam. Visser', project: 'Renovatie Almelo', status: 'Akkoord ontvangen', tone: 'green', fase: 'Productie', eigenaar: 'Lisa T.', datum: '20 apr', bedrag: 7680.00 },
    { klant: 'Bakker Bouw', project: 'Serviceronde Oldenzaal', status: 'Afgerond', tone: 'grey', fase: 'Afgerond', eigenaar: 'Ruben S.', datum: '15 apr', bedrag: 3420.00 },
  ];
  const tones = {
    gold: { bg: 'rgba(184,138,59,0.12)', c: '#8E6624' },
    green: { bg: 'rgba(46,106,78,0.12)', c: '#2E6A4E' },
    ink: { bg: 'rgba(15,43,34,0.08)', c: '#0F2B22' },
    olive: { bg: 'rgba(122,132,106,0.16)', c: '#5B6551' },
    grey: { bg: '#EFEBE3', c: '#7E8C83' },
  };
  const filters = ['Alle','Offerte','Productie','Montage','Afgerond'];
  const [f, setF] = React.useState('Alle');
  const [q, setQ] = React.useState('');
  const shown = all.filter(r => (f === 'Alle' || r.fase === f) && (q === '' || (r.klant + r.project).toLowerCase().includes(q.toLowerCase())));
  const fmt = (n) => '€ ' + n.toLocaleString('nl-NL', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

  return (
    <section className="section" style={{ background: 'var(--ink)', color: 'var(--ivory)' }}>
      <div className="shell">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', gap: 24, marginBottom: 32, flexWrap: 'wrap' }}>
          <div>
            <div className="eyebrow" style={{ color: '#B88A3B' }}>
              <span className="eyebrow-line">Fictieve orders — live demo</span>
            </div>
            <h2 className="display" style={{ color: '#F7F5F2', fontSize: 'clamp(32px, 3.6vw, 48px)', margin: '14px 0 0' }}>
              Van offerte<br/>tot oplevering.
            </h2>
          </div>
          <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
            <div style={{ position: 'relative' }}>
              <Ic.search style={{ position: 'absolute', left: 12, top: 11, color: '#8AA093' }}/>
              <input value={q} onChange={e => setQ(e.target.value)} placeholder="Zoek klant of project…" style={{
                background: 'rgba(255,255,255,0.06)', border: '1px solid rgba(255,255,255,0.12)',
                color: '#F7F5F2', padding: '9px 12px 9px 32px', borderRadius: 999, fontSize: 13, outline: 'none', width: 240,
              }}/>
            </div>
          </div>
        </div>

        <div style={{ display: 'flex', gap: 6, marginBottom: 18, flexWrap: 'wrap' }}>
          {filters.map(x => (
            <button key={x} onClick={() => setF(x)} style={{
              padding: '7px 14px', borderRadius: 999, fontSize: 12.5, fontWeight: 500,
              background: f === x ? '#B88A3B' : 'rgba(255,255,255,0.06)',
              color: f === x ? '#fff' : '#B8C9BF',
              border: f === x ? '1px solid #B88A3B' : '1px solid rgba(255,255,255,0.1)',
              transition: 'all 160ms ease',
            }}>{x} <span style={{ opacity: 0.6, marginLeft: 4 }}>{x === 'Alle' ? all.length : all.filter(r => r.fase === x).length}</span></button>
          ))}
        </div>

        <div style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 14, overflow: 'hidden' }}>
          <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 13 }}>
            <thead>
              <tr style={{ color: '#8AA093', textTransform: 'uppercase', fontSize: 10.5, letterSpacing: '0.1em' }}>
                <th style={{ textAlign: 'left', padding: '14px 20px', fontWeight: 500 }}>Klant</th>
                <th style={{ textAlign: 'left', padding: '14px 20px', fontWeight: 500 }}>Project</th>
                <th style={{ textAlign: 'left', padding: '14px 20px', fontWeight: 500 }}>Status</th>
                <th style={{ textAlign: 'left', padding: '14px 20px', fontWeight: 500 }}>Eigenaar</th>
                <th style={{ textAlign: 'left', padding: '14px 20px', fontWeight: 500 }}>Datum</th>
                <th style={{ textAlign: 'right', padding: '14px 20px', fontWeight: 500 }}>Bedrag</th>
              </tr>
            </thead>
            <tbody>
              {shown.map((r, i) => (
                <tr key={i} style={{ borderTop: '1px solid rgba(255,255,255,0.06)', cursor: 'pointer', transition: 'background 140ms' }}
                  onMouseEnter={(e) => e.currentTarget.style.background = 'rgba(184,138,59,0.06)'}
                  onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}>
                  <td style={{ padding: '14px 20px', fontWeight: 500, color: '#F7F5F2' }}>{r.klant}</td>
                  <td style={{ padding: '14px 20px', color: '#B8C9BF' }}>{r.project}</td>
                  <td style={{ padding: '14px 20px' }}>
                    <span style={{ fontSize: 11, padding: '4px 9px', borderRadius: 999, background: tones[r.tone].bg, color: tones[r.tone].c, fontWeight: 500 }}>{r.status}</span>
                  </td>
                  <td style={{ padding: '14px 20px', color: '#B8C9BF' }}>{r.eigenaar}</td>
                  <td style={{ padding: '14px 20px', color: '#8AA093' }} className="mono">{r.datum}</td>
                  <td style={{ padding: '14px 20px', textAlign: 'right', fontWeight: 500, color: '#F7F5F2' }} className="num">{fmt(r.bedrag)}</td>
                </tr>
              ))}
              {shown.length === 0 && (
                <tr><td colSpan={6} style={{ padding: '40px', textAlign: 'center', color: '#8AA093' }}>Geen resultaten — probeer een andere filter.</td></tr>
              )}
            </tbody>
          </table>
        </div>

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginTop: 18, color: '#8AA093', fontSize: 12 }}>
          <div>{shown.length} van {all.length} orders · Live data uit KozijnSuite demo-omgeving</div>
          <a href="#" style={{ color: '#B88A3B', fontWeight: 500 }}>Open volledig dashboard →</a>
        </div>
      </div>
    </section>
  );
};

/* ============ TESTIMONIALS ============ */
const Testimonials = () => {
  const items = [
    { q: 'Voor het eerst hebben we écht inzicht in wat er in de fabriek én bij verkoop gebeurt. Minder chaos, minder fouten, veel meer grip.', n: 'Bas van Veen', r: 'Algemeen directeur', c: 'De Veen Kozijnen', loc: 'Enschede' },
    { q: 'Onze verkopers maken nu offertes bij de klant thuis in een half uur. Dat was twee dagen. KozijnLAB is een game changer.', n: 'Ilse Korteweg', r: 'Commercieel manager', c: 'KozijnOnline Twente', loc: 'Hengelo' },
    { q: 'Klanten zijn rustiger sinds het portaal er is. Ze zien zelf waar hun order staat en bellen ons veel minder met vragen.', n: 'Rinus Bosman', r: 'Eigenaar', c: 'EcoPro Kozijnen', loc: 'Almelo' },
  ];
  return (
    <section className="section-tight" style={{ background: 'var(--ivory)' }}>
      <div className="shell">
        <div className="eyebrow eyebrow-line" style={{ marginBottom: 14 }}>Kozijnbedrijven aan het woord</div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
          {items.map(t => (
            <div key={t.n} style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 16, padding: 24, display: 'flex', flexDirection: 'column', gap: 18 }}>
              <div style={{ display: 'flex', gap: 2, color: '#B88A3B' }}>
                {[0,1,2,3,4].map(i => <Ic.star key={i}/>)}
              </div>
              <p className="display" style={{ fontSize: 17, lineHeight: 1.45, margin: 0, fontWeight: 500, color: 'var(--ink)', letterSpacing: '-0.015em' }}>
                "{t.q}"
              </p>
              <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', gap: 10, paddingTop: 16, borderTop: '1px solid var(--line)' }}>
                <div style={{ width: 36, height: 36, borderRadius: 6, background: 'var(--ink)', color: 'var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Sora', fontWeight: 600, fontSize: 14 }}>
                  {t.c.split(' ').map(w => w[0]).slice(0,2).join('')}
                </div>
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--ink)' }}>{t.n}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--text-muted)' }}>{t.r} · {t.c}, {t.loc}</div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

/* ============ CTA + FOOTER ============ */
const CTA = () => (
  <section id="demo" style={{ background: 'var(--gold)', color: '#fff', padding: '60px 0', position: 'relative', overflow: 'hidden' }}>
    <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'radial-gradient(circle at 80% 50%, rgba(15,43,34,0.18), transparent 60%)' }}/>
    <div className="shell" style={{ position: 'relative', display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24 }}>
      <div style={{ maxWidth: 640 }}>
        <h2 className="display" style={{ color: '#fff', fontSize: 'clamp(32px, 3.8vw, 52px)', margin: 0, lineHeight: 1.05 }}>
          Klaar om slimmer te verkopen<br/>en strakker uit te voeren?
        </h2>
        <p style={{ fontSize: 15, color: '#F7E8CB', marginTop: 14 }}>
          Ontdek zelf in 30 minuten hoe KozijnSuite jouw bedrijf laat groeien.
        </p>
      </div>
      <div style={{ display: 'flex', gap: 10 }}>
        <a href="Demo.html" className="btn btn-primary btn-lg">Plan een afspraak <Ic.arrow/></a>
        <a href="Demo.html" className="btn" style={{ background: 'rgba(255,255,255,0.14)', color: '#fff', border: '1px solid rgba(255,255,255,0.3)', padding: '16px 26px' }}>Neem contact op</a>
      </div>
    </div>
  </section>
);

const Footer = () => {
  const cols = [
    { h: 'Product', href: 'Product.html', l: ['KozijnLAB','CRM & offertes','Klantportaal','Planning & montage','Rapportages'] },
    { h: 'Oplossingen', href: 'Oplossingen.html', l: ['Voor kozijnbedrijven','Voor verkoopteams','Voor monteurs','Voor klanten'] },
    { h: 'Over ons', href: 'Over ons.html', l: ['Over KozijnSuite','Partners','Vacatures','Contact'] },
    { h: 'Resources', href: 'Resources.html', l: ['Blog','Kenniscentrum','Handleidingen','Webinars','Status'] },
  ];
  return (
    <footer style={{ background: 'var(--ink)', color: '#B8C9BF', padding: '60px 0 30px' }}>
      <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1.4fr repeat(4, 1fr)', gap: 40 }}>
        <div>
          <Logo variant="dark" size={30}/>
          <p style={{ fontSize: 13, color: '#8AA093', marginTop: 14, maxWidth: 240, lineHeight: 1.6 }}>
            Complete softwaresuite voor kozijnbedrijven — van verkoop tot montage.
          </p>
        </div>
        {cols.map(c => (
          <div key={c.h}>
            <div style={{ fontSize: 12, color: '#F7F5F2', fontWeight: 500, marginBottom: 14, textTransform: 'uppercase', letterSpacing: '0.1em' }}>{c.h}</div>
            {c.l.map(x => (
              <a key={x} href={c.href} style={{ display: 'block', fontSize: 13, color: '#8AA093', padding: '5px 0' }}>{x}</a>
            ))}
          </div>
        ))}
      </div>
      <div className="shell" style={{ marginTop: 48, paddingTop: 22, borderTop: '1px solid rgba(255,255,255,0.08)', display: 'flex', justifyContent: 'space-between', color: '#627569', fontSize: 12 }}>
        <div>© 2026 KozijnSuite B.V. — Alle rechten voorbehouden.</div>
        <div style={{ display: 'flex', gap: 18 }}>
          <a href="Resources.html" style={{ color: '#627569' }}>Privacy</a>
          <a href="Resources.html" style={{ color: '#627569' }}>Algemene voorwaarden</a>
          <a href="Resources.html" style={{ color: '#627569' }}>Cookies</a>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { HowItWorks, OrdersTable, Testimonials, CTA, Footer });