/* global React */
const { useState } = React;

/* ============ PRIJZEN ============ */
const PagePrijzen = () => {
  const [cycle, setCycle] = useState('jaarlijks');
  const plans = [
    {
      name: 'Starter',
      sub: 'Voor kleine kozijnbedrijven',
      price: { maand: 249, jaar: 199 },
      feats: ['Tot 3 gebruikers','KozijnLAB configurator','CRM & offertes','Klantportaal (basis)','E-mail support'],
      cta: 'Start proefperiode',
    },
    {
      name: 'Business',
      sub: 'Voor groeiende teams',
      price: { maand: 549, jaar: 449 },
      feats: ['Tot 15 gebruikers','Alles in Starter','Orderdashboard','Planning & montage','API-integraties','Priority support'],
      cta: 'Plan een afspraak',
      highlight: true,
    },
    {
      name: 'Enterprise',
      sub: 'Voor grote bedrijven & keten',
      price: { maand: null, jaar: null },
      feats: ['Onbeperkte gebruikers','Alles in Business','Multi-vestiging','SSO & audit logs','Dedicated success manager','Custom SLA'],
      cta: 'Neem contact op',
    },
  ];

  return (
    <div>
      <section style={{ background: 'var(--ivory)', padding: '80px 0 30px' }}>
        <div className="shell" style={{ maxWidth: 820, textAlign: 'center' }}>
          <div className="eyebrow eyebrow-line" style={{ justifyContent: 'center', display: 'inline-flex', marginBottom: 16 }}>Prijzen</div>
          <h1 className="display" style={{ fontSize: 'clamp(42px, 5vw, 68px)', margin: 0, lineHeight: 1 }}>
            Eerlijke prijs.<br/><span style={{ color: 'var(--gold)' }}>Geen verrassingen.</span>
          </h1>
          <p className="muted" style={{ fontSize: 16, marginTop: 20, lineHeight: 1.6 }}>
            Eén abonnement, alle modules, geen dure implementatietrajecten. 14 dagen gratis uitproberen.
          </p>

          <div style={{ display: 'inline-flex', padding: 4, background: '#fff', border: '1px solid var(--line)', borderRadius: 999, marginTop: 28 }}>
            {['maandelijks','jaarlijks'].map(c => (
              <button key={c} onClick={() => setCycle(c)} style={{
                padding: '9px 20px', borderRadius: 999, fontSize: 13.5, fontWeight: 500,
                background: cycle === c ? 'var(--ink)' : 'transparent',
                color: cycle === c ? 'var(--ivory)' : 'var(--text-muted)',
                textTransform: 'capitalize',
              }}>
                {c} {c === 'jaarlijks' && <span style={{ fontSize: 11, marginLeft: 6, color: cycle === c ? 'var(--gold)' : 'var(--gold)', fontWeight: 600 }}>−20%</span>}
              </button>
            ))}
          </div>
        </div>
      </section>

      <section style={{ background: 'var(--ivory)', padding: '40px 0 80px' }}>
        <div className="shell">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {plans.map(p => (
              <div key={p.name} style={{
                background: p.highlight ? 'var(--ink)' : '#fff',
                color: p.highlight ? '#F7F5F2' : 'inherit',
                border: p.highlight ? '1px solid var(--ink)' : '1px solid var(--line)',
                borderRadius: 18, padding: 32,
                boxShadow: p.highlight ? '0 30px 60px -20px rgba(15,43,34,0.35)' : 'var(--shadow-sm)',
                position: 'relative',
              }}>
                {p.highlight && (
                  <div style={{ position: 'absolute', top: -10, left: 24, background: 'var(--gold)', color: '#fff', fontSize: 11, padding: '4px 10px', borderRadius: 999, fontWeight: 500, letterSpacing: '0.05em' }}>
                    MEEST GEKOZEN
                  </div>
                )}
                <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 22, color: p.highlight ? '#F7F5F2' : 'var(--ink)' }}>{p.name}</div>
                <div style={{ fontSize: 13, color: p.highlight ? '#8AA093' : 'var(--text-muted)', marginTop: 4 }}>{p.sub}</div>
                <div style={{ margin: '26px 0', height: 56 }}>
                  {p.price[cycle === 'jaarlijks' ? 'jaar' : 'maand'] === null ? (
                    <div className="display" style={{ fontSize: 36, color: p.highlight ? '#F7F5F2' : 'var(--ink)' }}>Op aanvraag</div>
                  ) : (
                    <>
                      <span className="display num" style={{ fontSize: 48, color: p.highlight ? '#F7F5F2' : 'var(--ink)', letterSpacing: '-0.03em' }}>
                        € {p.price[cycle === 'jaarlijks' ? 'jaar' : 'maand']}
                      </span>
                      <span style={{ fontSize: 13, color: p.highlight ? '#8AA093' : 'var(--text-muted)', marginLeft: 6 }}>/mnd per bedrijf</span>
                    </>
                  )}
                </div>
                <a href="Demo.html" className={p.highlight ? 'btn btn-gold' : 'btn btn-primary'} style={{ width: '100%', justifyContent: 'center', marginBottom: 22 }}>
                  {p.cta} <Ic.arrow/>
                </a>
                <div style={{ borderTop: p.highlight ? '1px solid rgba(255,255,255,0.1)' : '1px solid var(--line)', paddingTop: 18, display: 'grid', gap: 10 }}>
                  {p.feats.map(f => (
                    <div key={f} style={{ display: 'flex', alignItems: 'center', gap: 10, fontSize: 13.5, color: p.highlight ? '#B8C9BF' : 'var(--ink)' }}>
                      <Ic.check style={{ color: 'var(--gold)', flexShrink: 0 }}/> {f}
                    </div>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <div style={{ textAlign: 'center', marginTop: 40, fontSize: 13, color: 'var(--text-muted)' }}>
            Alle prijzen exclusief BTW. Geen setup-kosten. Opzegbaar per maand.
          </div>
        </div>
      </section>

      <section className="section-tight" style={{ background: '#fff', borderTop: '1px solid var(--line)' }}>
        <div className="shell" style={{ maxWidth: 760 }}>
          <div className="eyebrow eyebrow-line" style={{ marginBottom: 16 }}>Veelgestelde vragen</div>
          <h2 className="display" style={{ fontSize: 36, margin: '0 0 32px' }}>Prijzen & facturatie</h2>
          <Faq items={[
            ['Zit er een opstartfee bij?','Nee. Je betaalt alleen je maandelijkse abonnement. Implementatie en onboarding zijn inbegrepen.'],
            ['Kan ik tussendoor upgraden?','Ja. Je kan op elk moment wisselen van plan. Het verschil wordt pro-rata verrekend.'],
            ['Hoe zit het met de proefperiode?','Je kan 14 dagen volledig gratis proeven met echte data. Geen creditcard nodig.'],
            ['Hoeveel bedrijven gebruiken KozijnSuite?','Op dit moment werken meer dan 250 kozijnbedrijven dagelijks met KozijnSuite.'],
          ]}/>
        </div>
      </section>
    </div>
  );
};

const Faq = ({ items }) => {
  const [open, setOpen] = useState(0);
  return (
    <div style={{ border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden', background: 'var(--ivory)' }}>
      {items.map(([q, a], i) => (
        <div key={q} style={{ borderBottom: i < items.length - 1 ? '1px solid var(--line)' : 'none' }}>
          <button onClick={() => setOpen(open === i ? -1 : i)} style={{
            width: '100%', textAlign: 'left', padding: '18px 22px',
            display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 12,
            fontFamily: 'Sora', fontWeight: 500, fontSize: 15, color: 'var(--ink)',
          }}>
            {q}
            <span style={{ color: 'var(--gold)', transform: open === i ? 'rotate(45deg)' : 'none', transition: 'transform 180ms', fontSize: 20 }}>+</span>
          </button>
          {open === i && (
            <div style={{ padding: '0 22px 20px', fontSize: 14, color: 'var(--text-muted)', lineHeight: 1.65 }}>{a}</div>
          )}
        </div>
      ))}
    </div>
  );
};

/* ============ OVER ONS ============ */
const PageOverOns = () => {
  const team = [
    ['Mark de Vries','CEO & mede-oprichter','MV'],
    ['Lisa Tenhoeve','COO','LT'],
    ['Kees Brinkman','CTO','KB'],
    ['Dennis Veldhuis','Head of Product','DV'],
    ['Ilse Korteweg','Head of Customer Success','IK'],
    ['Ruben Simonse','Head of Sales','RS'],
  ];
  return (
    <div>
      <section style={{ background: 'var(--ink)', 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.03) 1px, transparent 1px), linear-gradient(90deg, rgba(232,217,184,0.03) 1px, transparent 1px)', backgroundSize: '60px 60px', maskImage: 'radial-gradient(circle at 40% center, black, transparent 75%)' }}/>
        <div className="shell" style={{ position: 'relative', maxWidth: 900 }}>
          <div className="chip chip-dark" style={{ marginBottom: 18 }}><Ic.dot style={{ color: '#B88A3B' }}/> Over ons</div>
          <h1 className="display" style={{ color: '#F7F5F2', fontSize: 'clamp(44px, 5.2vw, 72px)', margin: 0, lineHeight: 1 }}>
            Gebouwd door mensen<br/><span style={{ color: '#B88A3B', fontStyle: 'italic', fontWeight: 500 }}>die kozijnen kennen.</span>
          </h1>
          <p style={{ fontSize: 17, color: '#B8C9BF', maxWidth: 680, marginTop: 22, lineHeight: 1.6 }}>
            KozijnSuite is in 2022 opgericht vanuit een simpele observatie: kozijnbedrijven werken met vakmanschap, maar vaak met losse software uit vier verschillende tijdperken. Wij bouwen de software die erbij past.
          </p>
        </div>
      </section>

      <section className="section-tight" style={{ background: 'var(--ivory)' }}>
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 20 }}>
          {[['2022','Opgericht in Enschede'],['250+','Actieve kozijnbedrijven'],['€ 45M+','Omzet via platform verwerkt'],['28','Mensen in het team']].map(([k, v]) => (
            <div key={k} style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 14, padding: 24 }}>
              <div className="display num" style={{ fontSize: 40, letterSpacing: '-0.03em' }}>{k}</div>
              <div style={{ fontSize: 13, color: 'var(--text-muted)', marginTop: 4 }}>{v}</div>
            </div>
          ))}
        </div>
      </section>

      <section className="section-tight" style={{ background: '#fff' }}>
        <div className="shell" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 60, alignItems: 'center' }}>
          <div>
            <div className="eyebrow eyebrow-line" style={{ marginBottom: 14 }}>Missie</div>
            <h2 className="display" style={{ fontSize: 36, margin: '0 0 18px', lineHeight: 1.1 }}>
              Kozijnbedrijven verdienen software<br/>op het niveau van hun vakmanschap.
            </h2>
            <p className="muted" style={{ fontSize: 15, lineHeight: 1.7, marginBottom: 14 }}>
              Te veel bedrijven werken met losse pakketjes: een tekenprogramma uit 2008, een Excel-offerte, een boekhoudpakket en een WhatsApp-planning. Wij bouwen de software die dat eindelijk verenigt.
            </p>
            <p className="muted" style={{ fontSize: 15, lineHeight: 1.7 }}>
              Onze belofte: geen overbodige features, geen dure implementatie, geen jaarlange trajecten. Wel: strakke software, eerlijke prijs, en een team dat de branche écht begrijpt.
            </p>
          </div>
          <div style={{ background: 'linear-gradient(135deg, #EFEBE3, #D9D0BB)', borderRadius: 16, aspectRatio: '4/5', display: 'flex', alignItems: 'center', justifyContent: 'center', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', inset: 0, backgroundImage: 'repeating-linear-gradient(45deg, transparent 0 8px, rgba(15,43,34,0.04) 8px 9px)' }}/>
            <div style={{ position: 'relative', fontFamily: 'JetBrains Mono, monospace', fontSize: 12, color: '#8A968E', textAlign: 'center', padding: 30 }}>
              [ Teamfoto — KozijnSuite HQ Enschede ]<br/>
              <span style={{ fontSize: 10, opacity: 0.7 }}>Placeholder — echte foto later</span>
            </div>
          </div>
        </div>
      </section>

      <section className="section-tight" style={{ background: 'var(--ivory)' }}>
        <div className="shell">
          <div className="eyebrow eyebrow-line" style={{ marginBottom: 14 }}>Het team</div>
          <h2 className="display" style={{ fontSize: 36, margin: '0 0 32px' }}>Kopstukken</h2>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 18 }}>
            {team.map(([n, r, i]) => (
              <div key={n} style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 14, padding: 22, display: 'flex', gap: 16, alignItems: 'center' }}>
                <div style={{ width: 56, height: 56, borderRadius: 10, background: 'var(--ink)', color: 'var(--gold)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Sora', fontWeight: 600, fontSize: 18, flexShrink: 0 }}>{i}</div>
                <div>
                  <div style={{ fontFamily: 'Sora', fontWeight: 600, fontSize: 15 }}>{n}</div>
                  <div style={{ fontSize: 12.5, color: 'var(--text-muted)' }}>{r}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

/* ============ RESOURCES ============ */
const PageResources = () => {
  const [cat, setCat] = useState('Alle');
  const cats = ['Alle','Verkoop','Productie','Planning','Nieuws'];
  const articles = [
    { cat: 'Verkoop', t: 'Waarom 80% van de kozijn-offertes te lang duren', d: 'Drie patronen uit 1.200 offerte-trajecten — en hoe ze sneller kunnen.', datum: '22 apr 2026', tijd: '6 min' },
    { cat: 'Productie', t: 'Van tekening tot productielijn zonder overtypen', d: 'Hoe KozijnLAB direct data levert aan Sikkens, Schüco en Kömmerling.', datum: '18 apr 2026', tijd: '8 min' },
    { cat: 'Planning', t: 'Dubbele planning voorkomen bij meerdere ploegen', d: 'Vier simpele regels voor montage-teamplanning die altijd kloppen.', datum: '14 apr 2026', tijd: '5 min' },
    { cat: 'Verkoop', t: 'Het verschil tussen offerte-concept en offerte-verstuurd', d: 'Waarom dat verschil je conversie met 12% kan verhogen.', datum: '10 apr 2026', tijd: '4 min' },
    { cat: 'Nieuws', t: 'KozijnSuite haalt serie A van € 8M op', d: 'Groeikapitaal voor verdere uitbreiding in Nederland, België en Duitsland.', datum: '04 apr 2026', tijd: '3 min' },
    { cat: 'Productie', t: 'Live: integratie met Kömmerling 76 AD systeem', d: 'Directe bestelbon vanaf geaccordeerde offerte. Beschikbaar voor alle Business-klanten.', datum: '28 mrt 2026', tijd: '5 min' },
  ];
  const shown = cat === 'Alle' ? articles : articles.filter(a => a.cat === cat);

  return (
    <div>
      <section style={{ background: 'var(--ivory)', padding: '80px 0 30px' }}>
        <div className="shell" style={{ maxWidth: 820 }}>
          <div className="eyebrow eyebrow-line" style={{ marginBottom: 16 }}>Resources</div>
          <h1 className="display" style={{ fontSize: 'clamp(42px, 5vw, 68px)', margin: 0, lineHeight: 1 }}>
            Kennis voor<br/><span style={{ color: 'var(--gold)' }}>vakkundige bedrijven.</span>
          </h1>
          <p className="muted" style={{ fontSize: 16, marginTop: 20, lineHeight: 1.6 }}>
            Praktische artikelen, benchmarks en productupdates — geschreven voor verkopers, planners en directie in kozijnland.
          </p>
        </div>
      </section>

      <section style={{ background: 'var(--ivory)', padding: '20px 0 80px' }}>
        <div className="shell">
          <div style={{ display: 'flex', gap: 6, marginBottom: 24, flexWrap: 'wrap' }}>
            {cats.map(x => (
              <button key={x} onClick={() => setCat(x)} style={{
                padding: '8px 16px', borderRadius: 999, fontSize: 13, fontWeight: 500,
                background: cat === x ? 'var(--ink)' : '#fff',
                color: cat === x ? 'var(--ivory)' : 'var(--text-muted)',
                border: '1px solid ' + (cat === x ? 'var(--ink)' : 'var(--line)'),
              }}>{x}</button>
            ))}
          </div>

          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 20 }}>
            {shown.map(a => (
              <article key={a.t} style={{ background: '#fff', border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden', display: 'flex', flexDirection: 'column', cursor: 'pointer', transition: 'transform 180ms, box-shadow 180ms' }}
                onMouseEnter={(e) => { e.currentTarget.style.transform = 'translateY(-2px)'; e.currentTarget.style.boxShadow = 'var(--shadow-lg)'; }}
                onMouseLeave={(e) => { e.currentTarget.style.transform = 'none'; e.currentTarget.style.boxShadow = 'none'; }}>
                <div style={{ aspectRatio: '16/10', background: 'linear-gradient(135deg, #0F2B22, #163A2E)', position: 'relative', overflow: 'hidden' }}>
                  <div aria-hidden style={{ position: 'absolute', inset: 0, backgroundImage: 'linear-gradient(rgba(232,217,184,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(232,217,184,0.05) 1px, transparent 1px)', backgroundSize: '24px 24px' }}/>
                  <div style={{ position: 'absolute', top: 14, left: 14, fontSize: 10.5, color: '#B88A3B', letterSpacing: '0.1em', fontFamily: 'JetBrains Mono, monospace', textTransform: 'uppercase' }}>{a.cat}</div>
                  <div style={{ position: 'absolute', bottom: 14, right: 14, fontSize: 10, color: '#8AA093', fontFamily: 'JetBrains Mono, monospace' }}>{a.tijd} lezen</div>
                </div>
                <div style={{ padding: 22 }}>
                  <h3 className="display" style={{ fontSize: 18, margin: '0 0 10px', lineHeight: 1.25 }}>{a.t}</h3>
                  <p style={{ fontSize: 13.5, color: 'var(--text-muted)', lineHeight: 1.55, margin: 0 }}>{a.d}</p>
                  <div style={{ marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--line)', display: 'flex', justifyContent: 'space-between', fontSize: 12, color: 'var(--text-subtle)' }}>
                    <span className="mono">{a.datum}</span>
                    <span style={{ color: 'var(--gold)', fontWeight: 500 }}>Lees artikel →</span>
                  </div>
                </div>
              </article>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
};

Object.assign(window, { PagePrijzen, PageOverOns, PageResources, Faq });