/* global React */
/* ============ PRODUCT PAGE ============ */
const PageProduct = () => {
  const modules = [
    { k: '01', t: 'Verkoopdossier', d: 'Een centraal dossier per klant. Lead, contactpersoon, elementen, documenten en communicatie — allemaal op één plek.', bullets: ['Eén waarheid per klant','Volledige tijdlijn','Documenten gebundeld','Status en eigenaar zichtbaar'], Comp: ScreenDossier },
    { k: '02', t: 'KozijnLAB configurator', d: 'Teken elk element op maat. Profiel, glas, beslag, kleur en opening — met technisch gecontroleerde prijs in dezelfde flow.', bullets: ['Stap-voor-stap configuratie','Automatische prijsberekening','Technische tekening & productiedata','Export naar fabriek'], Comp: ScreenKozijnLab },
    { k: '03', t: 'Offertes', d: 'Professionele PDF én digitaal akkoord-scherm. Getekend? De order staat klaar in productie.', bullets: ['Strakke huisstijl','Digitaal ondertekenen','Automatisch omzetten naar order','Versiebeheer'], Comp: ScreenOfferte },
    { k: '04', t: 'Orderdashboard', d: 'Zie pipeline, omzet, statussen en knelpunten in één oogopslag. Stuur bij waar het nodig is.', bullets: ['KPI\'s realtime','Pipeline per fase','Omzetontwikkeling','Drill-down per dossier'], Comp: ScreenDashboard },
    { k: '05', t: 'Klantportaal', d: 'Nette communicatie richting de klant. Ze zien status, documenten, betalingen en planning — jij wordt minder gebeld.', bullets: ['Inzicht in status','Documenten & facturen','Planning van montage','Veilige communicatie'], Comp: ScreenKlantportaal, isPhone: true },
    { k: '06', t: 'Planning & montage', d: 'Plan montageteams, koppel orders aan dagen en voorkom dubbel inboeken. Elke montage wordt teruggekoppeld naar het dossier.', bullets: ['Teamplanning','Dagroosters','Werkbonnen digitaal','Oplevering per order'], Comp: ScreenPlanning },
  ];

  return (
    <div>
      {/* Hero */}
      <section style={{ background: 'linear-gradient(180deg, #0F2B22, #163A2E)', color: '#F7F5F2', padding: '80px 0 60px', position: 'relative', overflow: 'hidden' }}>
        <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', maskImage: 'radial-gradient(circle at center, black 40%, transparent 80%)' }}/>
        <div className="shell" style={{ position: 'relative', maxWidth: 860 }}>
          <div className="chip chip-dark" style={{ marginBottom: 18 }}><Ic.dot style={{ color: '#B88A3B' }}/> Product</div>
          <h1 className="display" style={{ color: '#F7F5F2', fontSize: 'clamp(44px, 5.2vw, 72px)', margin: 0, lineHeight: 1 }}>
            Zes modules.<br/><span style={{ color: '#B88A3B', fontStyle: 'italic', fontWeight: 500 }}>Eén systeem.</span>
          </h1>
          <p style={{ fontSize: 17, color: '#B8C9BF', maxWidth: 600, marginTop: 20, lineHeight: 1.55 }}>
            Alles wat een kozijnbedrijf nodig heeft: van eerste lead tot laatste montage — zonder dubbele invoer, zonder losse systemen.
          </p>
        </div>
      </section>

      {/* Module deep-dives — alternating layout */}
      {modules.map((m, i) => (
        <section key={m.k} style={{ padding: '72px 0', background: i % 2 === 0 ? 'var(--ivory)' : '#fff', borderTop: '1px solid var(--line)' }}>
          <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1fr 1.3fr', gap: 60, alignItems: 'center', direction: i % 2 === 1 ? 'rtl' : 'ltr' }}>
            <div style={{ direction: 'ltr' }}>
              <div className="mono" style={{ fontSize: 12, color: 'var(--gold)', letterSpacing: '0.15em' }}>{m.k} / 06</div>
              <h2 className="display" style={{ fontSize: 42, margin: '10px 0 16px' }}>{m.t}</h2>
              <p className="muted" style={{ fontSize: 15.5, lineHeight: 1.6, marginBottom: 22 }}>{m.d}</p>
              <div style={{ display: 'grid', gap: 10, marginBottom: 24 }}>
                {m.bullets.map(b => (
                  <div key={b} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 14 }}>
                    <span style={{ width: 20, height: 20, borderRadius: '50%', background: 'rgba(184,138,59,0.14)', color: 'var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                      <Ic.check style={{ width: 11, height: 11 }}/>
                    </span>
                    {b}
                  </div>
                ))}
              </div>
              <a href="Demo.html" className="btn btn-primary btn-sm">Plan afspraak <Ic.arrow/></a>
            </div>
            <div style={{ direction: 'ltr' }}>
              {m.isPhone ? (
                <div style={{ background: 'linear-gradient(135deg, #EFEBE3, #E4DFD4)', borderRadius: 20, padding: 30, display: 'flex', justifyContent: 'center' }}>
                  <Phone style={{ width: 280 }}><m.Comp/></Phone>
                </div>
              ) : (
                <div style={{ background: 'linear-gradient(135deg, #EFEBE3, #E4DFD4)', borderRadius: 16, padding: 18 }}>
                  <div style={{ aspectRatio: '16/10', background: '#0F2B22', borderRadius: 10, padding: 7, boxShadow: 'var(--shadow-lg)' }}>
                    <div style={{ width: '100%', height: '100%', borderRadius: 5, overflow: 'hidden' }}>
                      <m.Comp/>
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </section>
      ))}
    </div>
  );
};

/* ============ OPLOSSINGEN PAGE ============ */
const PageOplossingen = () => {
  const rollen = [
    { t: 'Voor verkopers', d: 'Sluit sneller deals, met minder typewerk en nooit meer een mismatch tussen offerte en wat er technisch kan.', points: ['Offerte bij klant thuis in 30 min','Altijd technische juiste prijs','Digitaal akkoord via klantportaal','Leads en dossiers in één overzicht'] },
    { t: 'Voor uitvoering', d: 'Van werkbon tot oplevering — geen losse mappen, geen dubbele planning, geen zoekgeraakte documenten.', points: ['Planning gekoppeld aan order','Teams en dagen in één kalender','Werkbonnen digitaal','Oplevering sluit het dossier'] },
    { t: 'Voor de directie', d: 'Zie precies waar het bedrijf staat: pipeline, marge, teambezetting en knelpunten in real-time.', points: ['Pipeline-KPI\'s realtime','Marge per project','Bezettingsgraad van teams','Voorspelling van komende maand'] },
    { t: 'Voor de klant', d: 'Een eigen portaal met status, documenten en planning. Minder vragen, meer vertrouwen, betere reviews.', points: ['Status realtime zichtbaar','Documenten en facturen','Planning van montage','Veilige messaging'] },
  ];

  const branches = [
    ['Kleine kozijnbedrijven', '5 – 20 medewerkers', '2 – 5 verkopers'],
    ['Middelgrote bedrijven', '20 – 100 medewerkers', '5 – 15 verkopers'],
    ['Grote bedrijven & keten', '100+ medewerkers', 'Meerdere vestigingen'],
  ];

  return (
    <div>
      <section style={{ background: 'var(--ivory)', padding: '80px 0 40px' }}>
        <div className="shell" style={{ maxWidth: 860 }}>
          <div className="eyebrow eyebrow-line" style={{ marginBottom: 18 }}>Oplossingen</div>
          <h1 className="display" style={{ fontSize: 'clamp(44px, 5.2vw, 72px)', margin: 0, lineHeight: 1 }}>
            Eén platform.<br/><span style={{ color: 'var(--gold)' }}>Vier perspectieven.</span>
          </h1>
          <p className="muted" style={{ fontSize: 17, maxWidth: 640, marginTop: 22, lineHeight: 1.6 }}>
            Ieder team binnen een kozijnbedrijf heeft andere informatie nodig. KozijnSuite levert één systeem waarin iedereen precies vindt wat hij of zij zoekt — zonder versnippering.
          </p>
        </div>
      </section>

      <section className="section-tight" style={{ background: 'var(--ivory)' }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 18 }}>
            {rollen.map((r, i) => (
              <div key={r.t} style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 18, padding: 28 }}>
                <div className="mono" style={{ fontSize: 12, color: 'var(--gold)', letterSpacing: '0.15em' }}>{String(i+1).padStart(2,'0')}</div>
                <h3 className="display" style={{ fontSize: 26, margin: '8px 0 10px' }}>{r.t}</h3>
                <p className="muted" style={{ fontSize: 14, lineHeight: 1.6, marginBottom: 18 }}>{r.d}</p>
                <div style={{ display: 'grid', gap: 8 }}>
                  {r.points.map(p => (
                    <div key={p} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13.5, color: 'var(--ink)' }}>
                      <span style={{ width: 5, height: 5, borderRadius: '50%', background: 'var(--gold)' }}/>
                      {p}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-tight" style={{ background: 'var(--ink)', color: '#F7F5F2' }}>
        <div className="shell">
          <div className="eyebrow eyebrow-line" style={{ marginBottom: 14, color: '#B88A3B' }}>Bedrijfsgrootte</div>
          <h2 className="display" style={{ color: '#F7F5F2', fontSize: 36, margin: '0 0 30px' }}>Schaalt mee met je bedrijf</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
            {branches.map(([t, a, b]) => (
              <div key={t} style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(255,255,255,0.08)', borderRadius: 14, padding: 22 }}>
                <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 16, color: '#F7F5F2' }}>{t}</div>
                <div style={{ fontSize: 13, color: '#8AA093', marginTop: 6 }}>{a}</div>
                <div style={{ fontSize: 13, color: '#8AA093' }}>{b}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { PageProduct, PageOplossingen });