// ─── Site sections ─────────────────────────────────────────

const QR_SRC = 'https://api.qrserver.com/v1/create-qr-code/?size=240x240&margin=0&color=1F1A17&bgcolor=FBF7EC&data=mailto%3Atennis%40esotenniscademy.nl%3Fsubject%3DGratis%2520intake%2520%25C2%25A1eso!';

// ── Filosofie ─────────────────────────────────────────────
function Filosofie() {
  return (
    <section id="filosofie" style={{
      padding: '140px 0 100px', position: 'relative',
    }}>
      <div className="container">
        <div className="reveal eyebrow" style={{ color: ESO.red }}>filosofie</div>
        <h2 className="display reveal" data-delay="1" style={{
          fontSize: 'clamp(36px, 6vw, 84px)', margin: '20px 0 0',
          maxWidth: 1100,
        }}>
          "¡eso!" is wat een coach zegt op het moment dat een speler{' '}
          <span style={{ color: ESO.red }}>iets goed doet.</span>
        </h2>
        <div className="reveal" data-delay="2" style={{
          marginTop: 44, display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 44, maxWidth: 1100,
        }}>
          <p style={{ fontSize: 17, lineHeight: 1.6, opacity: 0.85, margin: 0 }}>
            Geen aanmoediging vanaf de tribune — feedback van de baan. Dat is hoe wij werken.
            Wij begeleiden een select aantal talenten van 8 tot 15 jaar, met persoonlijke
            aandacht en de discipline die top-tennis vraagt.
          </p>
          <p style={{ fontSize: 17, lineHeight: 1.6, opacity: 0.85, margin: 0 }}>
            Latijns-Amerikaanse coaching, Nederlandse discipline. Twee coaches die
            elk talent persoonlijk kennen — geen klas, geen nummer, geen
            massa-inschrijving. Slechts acht plekken per seizoen.
          </p>
        </div>
      </div>
    </section>
  );
}

// ── 4 Pijlers ────────────────────────────────────────────
const PILLARS = [
  ['techniek', 'wat onder druk standhoudt, niet wat er mooi uitziet.', [
    'slow-motion video-analyse per slag',
    'slag-mechaniek tot op detail',
    'voet- en heuppositie corrigeren',
    'contactpunt en raket-pad finetunen',
    'variatie in spin, tempo en hoogte',
    'repetitie tot automatisme',
  ]],
  ['tactiek', 'het juiste shot kiezen, niet de hardste slaan.', [
    'tegenstanders lezen en zwaktes uitspelen',
    'speelpatronen opbouwen en herkennen',
    'eerste serve + één opbouwen',
    'beslissen op cruciale punten',
    'score-bewust spelen (voor- en achterstand)',
    'wedstrijdritme controleren',
  ]],
  ['fysiek', 'tennis-specifiek bewegen, een heel seizoen blessurevrij.', [
    'split-step en eerste-stap-snelheid',
    'lateraal voetwerk en recovery',
    'tennis-specifieke kracht (benen, romp, schouder)',
    'duurvermogen voor lange wedstrijden',
    'herstel tussen punten en games',
    'blessurepreventie (elleboog, schouder, knie)',
  ]],
  ['mentaal', 'veerkracht onder druk — sterker terugkomen dan je vertrok.', [
    'routines tussen punten (ademhaling, reset)',
    'omgaan met fouten zonder spiraal',
    'focus vasthouden over een hele wedstrijd',
    'druk hanteren op match- en break-points',
    'lichaamstaal als prestatie-tool',
    'scenario-denken bij achterstand',
  ]],
];

function Pijlers() {
  return (
    <section id="pijlers" style={{
      padding: '100px 0', background: ESO.paper, position: 'relative',
      overflow: 'hidden',
    }}>
      <div className="container">
        <div style={{
          display: 'flex', flexWrap: 'wrap', gap: 24,
          alignItems: 'flex-end', justifyContent: 'space-between',
          marginBottom: 56,
        }}>
          <div>
            <div className="reveal eyebrow" style={{ color: ESO.red }}>de vier pijlers</div>
            <h2 className="display reveal" data-delay="1" style={{
              fontSize: 'clamp(36px, 5vw, 72px)', margin: '12px 0 0',
            }}>
              waar wij op trainen.
            </h2>
          </div>
          <div className="reveal" data-delay="2" style={{
            maxWidth: 420, fontSize: 16, lineHeight: 1.55, opacity: 0.78,
          }}>
            Talent ontwikkelt zich niet door één facet, maar door vier samen.
            Elke training raakt minstens twee pijlers.
          </div>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 24,
        }}>
          {PILLARS.map(([t, b, items], i) => (
            <article key={t} className="reveal" data-delay={(i % 4)} style={{
              background: ESO.cream, padding: '32px 30px',
              borderTop: `3px solid ${ESO.ink}`,
              display: 'flex', flexDirection: 'column',
              transition: 'transform 0.3s, box-shadow 0.3s',
            }} onMouseEnter={(e) => {
              e.currentTarget.style.transform = 'translateY(-4px)';
              e.currentTarget.style.boxShadow = '0 20px 40px rgba(31,26,23,0.08)';
            }} onMouseLeave={(e) => {
              e.currentTarget.style.transform = 'none';
              e.currentTarget.style.boxShadow = 'none';
            }}>
              <div style={{
                display: 'flex', alignItems: 'baseline', gap: 12, marginBottom: 14,
              }}>
                <span className="display" style={{
                  fontSize: 18, color: ESO.muted,
                }}>0{i + 1}</span>
                <span className="display" style={{
                  fontSize: 32, color: ESO.ink,
                }}>{t}</span>
              </div>
              <p style={{
                margin: 0, fontSize: 14.5, lineHeight: 1.5, opacity: 0.78,
                fontStyle: 'italic',
              }}>{b}</p>
              <ul style={{
                margin: '20px 0 0', padding: 0, listStyle: 'none',
                display: 'flex', flexDirection: 'column', gap: 8,
              }}>
                {items.map((x) => (
                  <li key={x} style={{
                    display: 'grid', gridTemplateColumns: '14px 1fr', gap: 10,
                    fontSize: 13.5, lineHeight: 1.4, opacity: 0.85,
                  }}>
                    <span style={{ color: ESO.red, fontWeight: 700 }}>·</span>
                    <span>{x}</span>
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Coaches ──────────────────────────────────────────────
function Coaches() {
  return (
    <section id="coaches" style={{
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Full-bleed photo strip */}
      <div className="reveal" style={{ position: 'relative' }}>
        <CoachPhoto crop="wide" height={520} />
        <div style={{
          position: 'absolute', inset: 0,
          background: 'linear-gradient(180deg, rgba(31,26,23,0.0) 30%, rgba(31,26,23,0.65) 100%)',
          display: 'flex', alignItems: 'flex-end', padding: '0 0 36px',
        }}>
          <div className="container" style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end',
            color: ESO.cream, gap: 24, flexWrap: 'wrap',
          }}>
            <div>
              <div className="eyebrow" style={{ color: 'var(--eso-accent)' }}>head coaches</div>
              <h2 className="display" style={{
                fontSize: 'clamp(36px, 6vw, 88px)', margin: '10px 0 0',
                color: ESO.cream,
              }}>
                jorge & ariana arevalo.
              </h2>
            </div>
            <div style={{
              fontSize: 14, opacity: 0.78, maxWidth: 360,
              letterSpacing: '0.02em', alignSelf: 'flex-end',
            }}>
              twee coaches · één visie · 16 jaar gecombineerde ervaring
            </div>
          </div>
        </div>
      </div>

      {/* Bios */}
      <div className="container" style={{ padding: '80px 56px 100px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
          gap: 48,
        }}>
          {[
            ['ariana osorio',
             'coach · jeugdspecialist',
             'Ariana groeide op met tennis in Latijns-Amerika en bouwde haar coaching-stijl op rond persoonlijke aandacht en mentale veerkracht. Ze speelt zelf wedstrijdtennis en specialiseert zich in tactische ontwikkeling en fysieke begeleiding van jeugd.',
             'Bij ¡eso! heeft ze de blik die elk talent ziet, niet de groep — met de discipline om te corrigeren waar het ertoe doet.',
            ],
            ['jorge arevalo',
             'coach · head of program',
             'Jorge bracht zijn coaching-DNA mee uit Latijns-Amerika: techniek tot in detail, hard werken, plezier door progressie. Hij focust op slag-mechaniek en jeugdtalent en werkte met spelers door alle leeftijden heen.',
             'Bij ¡eso! is hij de coach die op de baan staat en «¡eso!» roept op het juiste moment — niet als beloning, maar als bevestiging dat het klopt.',
            ],
          ].map(([name, role, p1, p2], i) => (
            <article key={name} className="reveal" data-delay={i + 1} style={{
              borderTop: `2px solid ${ESO.ink}`, paddingTop: 24,
            }}>
              <div style={{
                display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start',
                marginBottom: 18, gap: 16,
              }}>
                <div>
                  <h3 className="display" style={{
                    fontSize: 36, margin: 0,
                  }}>{name}</h3>
                  <div className="eyebrow" style={{ color: ESO.red, marginTop: 6 }}>{role}</div>
                </div>
                <ExclamMark which="close" size={32} color={ESO.red} />
              </div>
              <p style={{ fontSize: 15, lineHeight: 1.6, opacity: 0.82, margin: '0 0 14px' }}>{p1}</p>
              <p style={{ fontSize: 15, lineHeight: 1.6, opacity: 0.82, margin: 0 }}>{p2}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── Programma ────────────────────────────────────────────
function Programma() {
  const schedule = [
    ['ma', 'individueel + fysiek',  '15:00 — 16:15'],
    ['di', 'groepstraining',        '18:00 — 19:00'],
    ['wo', 'duo + fysiek',          '14:00 — 15:15'],
    ['vr', 'groepstraining',        '18:00 — 19:00'],
    ['vr', 'duo-tennis',            '19:00 — 20:00'],
    ['za', 'duo / individueel',     '11:00 / 12:00'],
  ];
  const tarieven = [
    ['individueel tennis (1u)',   '€35'],
    ['individueel tennis (1u15)', '€42'],
    ['duo-tennis (1u)',           '€40 p.p.'],
    ['duo-tennis (1u15)',         '€46 p.p.'],
    ['fysieke training',          '€25'],
    ['groepstraining',            'op aanvraag'],
  ];

  return (
    <section id="programma" style={{
      padding: '120px 0', background: ESO.ink, color: ESO.cream,
      position: 'relative', overflow: 'hidden',
    }}>
      <div className="container">
        {/* Header */}
        <div className="reveal" style={{ display: 'flex', flexWrap: 'wrap', gap: 24, justifyContent: 'space-between', alignItems: 'flex-end' }}>
          <div>
            <div className="eyebrow" style={{ color: 'var(--eso-accent)' }}>programma 2026</div>
            <h2 className="display" style={{
              fontSize: 'clamp(40px, 7vw, 96px)', margin: '12px 0 0',
              color: ESO.cream,
            }}>
              14 weken<br />
              <span style={{ color: 'var(--eso-accent)' }}>competitietennis.</span>
            </h2>
          </div>
          <div style={{ maxWidth: 360, fontSize: 14.5, opacity: 0.82, lineHeight: 1.55 }}>
            Start eind augustus 2026, doorlopend tot eind november. Iedere week:
            groepstraining, individuele of duo-sessies en fysieke training.
            Toernooi-begeleiding op zaterdagen.
          </div>
        </div>

        {/* Schedule + Tarieven */}
        <div style={{
          marginTop: 72,
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: 56,
        }}>
          <div className="reveal">
            <div className="eyebrow" style={{ opacity: 0.65, marginBottom: 18 }}>weekschema</div>
            <div>
              {schedule.map(([d, t, h], i) => (
                <div key={`${d}-${i}`} style={{
                  display: 'grid', gridTemplateColumns: '40px 1fr auto', gap: 16,
                  padding: '14px 0',
                  borderTop: i === 0 ? `2px solid ${ESO.cream}` : `1px solid rgba(251,247,236,0.18)`,
                  borderBottom: i === schedule.length - 1 ? `2px solid ${ESO.cream}` : 'none',
                  fontSize: 15,
                }}>
                  <div className="display" style={{
                    color: 'var(--eso-accent)', fontSize: 18,
                  }}>{d}</div>
                  <div style={{ textTransform: 'lowercase' }}>{t}</div>
                  <div style={{ opacity: 0.72, fontVariantNumeric: 'tabular-nums' }}>{h}</div>
                </div>
              ))}
            </div>
            <p style={{ fontSize: 12.5, opacity: 0.55, marginTop: 16, fontStyle: 'italic' }}>
              geen training tijdens de meivakantie · individueel/duo flexibel inplanbaar
            </p>
          </div>

          <div className="reveal" data-delay="1">
            <div className="eyebrow" style={{ opacity: 0.65, marginBottom: 18 }}>tarieven</div>
            <div>
              {tarieven.map(([k, v], i) => (
                <div key={k} style={{
                  display: 'flex', justifyContent: 'space-between',
                  padding: '14px 0',
                  borderTop: i === 0 ? `2px solid ${ESO.cream}` : `1px solid rgba(251,247,236,0.18)`,
                  borderBottom: i === tarieven.length - 1 ? `2px solid ${ESO.cream}` : 'none',
                  fontSize: 15, textTransform: 'lowercase',
                }}>
                  <span>{k}</span>
                  <span className="display" style={{
                    color: 'var(--eso-accent)', fontSize: 17,
                    fontVariantNumeric: 'tabular-nums', letterSpacing: '-0.015em',
                  }}>{v}</span>
                </div>
              ))}
            </div>
            <p style={{ fontSize: 12.5, opacity: 0.55, marginTop: 16, fontStyle: 'italic' }}>
              tarieven excl. eventuele baanhuur
            </p>
          </div>
        </div>

        {/* Commitment block */}
        <div className="reveal" style={{
          marginTop: 80, padding: '28px 32px',
          background: 'rgba(255,255,255,0.04)',
          borderLeft: `4px solid ${ESO.red}`,
          display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 24, alignItems: 'flex-start',
          maxWidth: 880,
        }}>
          <ExclamMark which="close" size={48} color={ESO.red} />
          <div>
            <h3 className="display" style={{ fontSize: 22, margin: '0 0 10px' }}>
              commitment: 2 groepstrainingen per week verplicht.
            </h3>
            <p style={{ fontSize: 14.5, lineHeight: 1.6, opacity: 0.82, margin: 0 }}>
              Vaste aanwezigheid, vaste betaling. Alleen toernooi of ziekte zijn
              geldige redenen voor afwezigheid. Individuele en duo-sessies blijven
              flexibel. Talenten ontwikkelen zich door consistente herhaling — niet
              door losse lessen.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// ── Testimonial + Wat krijgt het talent ─────────────────
function Testimonial() {
  return (
    <section style={{ padding: '120px 0', position: 'relative' }}>
      <div className="container">
        <div className="reveal" style={{
          maxWidth: 920, margin: '0 auto', textAlign: 'center',
        }}>
          <ExclamMark which="open" size={56} color={ESO.red}
                       style={{ margin: '0 auto 24px' }} />
          <blockquote className="display" style={{
            fontSize: 'clamp(24px, 3.4vw, 40px)',
            lineHeight: 1.25, margin: 0, color: ESO.ink,
            letterSpacing: '-0.025em', fontStyle: 'normal',
          }}>
            "onze dochter is in een jaar 1.5 speelsterkte gestegen.
            maar belangrijker: ze gaat met plezier naar elke training,
            durft te falen en pakt zichzelf op na een verloren game."
          </blockquote>
          <div className="eyebrow" style={{ marginTop: 28, opacity: 0.7 }}>
            — ouder van talent (12 jr)
          </div>
        </div>
      </div>
    </section>
  );
}

function WatKrijgt() {
  const items = [
    ['persoonlijk plan', 'individueel ontwikkelingsplan na intake — niet één-grootte voor de groep.'],
    ['rapportage', 'schriftelijke voortgangsrapportage elke 6 weken, met video-momenten.'],
    ['starterskit', '¡eso! kit: trainingsshirt × 2, short, polo. niet als gimmick — als deel van het programma.'],
    ['toernooi-coaching', 'begeleiding op zaterdagse toernooien — coaching tussen de games.'],
    ['satelliet-clinics', 'toegang tot specialistische clinics op partner-clubs.'],
    ['video-analyse', 'per blok één slow-motion video-sessie van een kernslag.'],
  ];
  return (
    <section style={{
      padding: '100px 0 120px', background: ESO.paper,
      position: 'relative', overflow: 'hidden',
    }}>
      <div className="container">
        <div className="reveal eyebrow" style={{ color: ESO.red }}>inbegrepen</div>
        <h2 className="display reveal" data-delay="1" style={{
          fontSize: 'clamp(36px, 5vw, 72px)', margin: '12px 0 56px',
        }}>
          wat krijgt het talent.
        </h2>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))',
          gap: 1, background: ESO.rule,
          border: `1px solid ${ESO.rule}`,
        }}>
          {items.map(([t, b], i) => (
            <div key={t} className="reveal" data-delay={i % 4} style={{
              background: ESO.paper, padding: '36px 32px',
            }}>
              <div className="display" style={{
                fontSize: 26, marginBottom: 12, color: ESO.ink,
              }}>{t}</div>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, opacity: 0.78 }}>{b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ── FAQ ─────────────────────────────────────────────────
function FAQ() {
  const faqs = [
    ['voor welke leeftijd is ¡eso!?',
     'we werken met talenten van 8 tot 15 jaar. de groep is bewust gemengd qua leeftijd zodat oudere talenten als rolmodel fungeren en jongere talenten zien wat mogelijk is.'],
    ['hoe selecteren jullie?',
     'na een gratis intake (30 min) kijken we naar motivatie, commitment en speelniveau. we nemen maximaal 8 talenten per seizoen aan. niet noodzakelijk de beste spelers — wel de meest leerbare.'],
    ['hoeveel kost het hele programma?',
     'het 14-weken programma rekenen we niet als pakketprijs. je betaalt per sessietype (zie tarieven). reken ongeveer op €600-€900 per maand voor een volledig schema, afhankelijk van keuzes.'],
    ['wat als mijn kind ziek is of een toernooi heeft?',
     'ziekte en toernooi zijn geldige redenen voor afwezigheid bij groepstrainingen. individuele en duo-sessies kun je verzetten in overleg. alle andere afwezigheid telt als afgenomen.'],
    ['waar trainen jullie?',
     'op tc bas dongen — een vast complex met goede banen. we trainen er buiten en, in winterperiode, op de hal van een partner-club. exacte adressen krijg je bij intake.'],
    ['wat als mijn kind nog geen toernooien speelt?',
     'dat hoeft niet. we coachen vanaf het niveau «kan een wedstrijdje spelen». binnen het programma stimuleren we wel toernooi-deelname, in eigen tempo.'],
  ];
  return (
    <section id="faq" style={{ padding: '120px 0', position: 'relative' }}>
      <div className="container">
        <div className="reveal eyebrow" style={{ color: ESO.red }}>veelgestelde vragen</div>
        <h2 className="display reveal" data-delay="1" style={{
          fontSize: 'clamp(36px, 5vw, 72px)', margin: '12px 0 56px',
        }}>
          eerlijke antwoorden.
        </h2>
        <div style={{ maxWidth: 880 }}>
          {faqs.map(([q, a], i) => (
            <FAQItem key={q} q={q} a={a} delay={i % 4} />
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQItem({ q, a, delay = 0 }) {
  const [open, setOpen] = React.useState(false);
  return (
    <div className="reveal" data-delay={delay} style={{
      borderTop: `1px solid ${ESO.rule}`,
    }}>
      <button onClick={() => setOpen(!open)} style={{
        all: 'unset', cursor: 'pointer', display: 'flex',
        width: '100%', justifyContent: 'space-between', alignItems: 'center',
        padding: '24px 0', gap: 24,
      }}>
        <span className="display" style={{
          fontSize: 'clamp(18px, 2.2vw, 24px)', color: ESO.ink,
        }}>{q}</span>
        <span style={{
          width: 32, height: 32, borderRadius: '50%',
          background: open ? ESO.red : 'transparent',
          border: `1px solid ${open ? ESO.red : ESO.ink}`,
          color: open ? ESO.cream : ESO.ink,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontSize: 18, transition: 'all 0.25s', flexShrink: 0,
          transform: open ? 'rotate(45deg)' : 'rotate(0)',
        }}>+</span>
      </button>
      <div style={{
        maxHeight: open ? 320 : 0, overflow: 'hidden',
        transition: 'max-height 0.4s cubic-bezier(0.2, 0.7, 0.2, 1)',
      }}>
        <p style={{
          margin: 0, padding: '0 0 28px', maxWidth: 720,
          fontSize: 15, lineHeight: 1.65, opacity: 0.82,
        }}>{a}</p>
      </div>
    </div>
  );
}

// ── Inschrijven CTA ──────────────────────────────────
function Inschrijven() {
  const [name, setName] = React.useState('');
  const [age, setAge] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [msg, setMsg] = React.useState('');
  const [sent, setSent] = React.useState(false);

  function submit(e) {
    e.preventDefault();
    setSent(true);
  }

  return (
    <section id="inschrijven" style={{
      padding: '140px 0 120px',
      background: ESO.red, color: ESO.cream,
      position: 'relative', overflow: 'hidden',
    }}>
      {/* Decorative oversized ! mark on the right */}
      <div style={{
        position: 'absolute', top: -40, right: -40, opacity: 0.18,
        pointerEvents: 'none',
      }}>
        <ExclamMark which="close" size={620} color={ESO.cream} />
      </div>

      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
          gap: 56, alignItems: 'flex-start',
        }}>
          <div className="reveal">
            <div className="eyebrow" style={{ color: 'var(--eso-accent)' }}>gratis intake</div>
            <h2 className="display" style={{
              fontSize: 'clamp(40px, 6.5vw, 88px)', margin: '12px 0 0',
              color: ESO.cream,
            }}>
              boek een<br />
              kennismaking.
            </h2>
            <p style={{
              fontSize: 17, lineHeight: 1.55, marginTop: 24, maxWidth: 480, opacity: 0.92,
            }}>
              30 minuten op de baan, één-op-één met Jorge of Ariana. We kijken
              naar techniek, motivatie en of we matchen. Geen verkoopgesprek.
              Plekken zijn beperkt — voor seizoen 2026 nemen we maximaal 8 talenten aan.
            </p>
            <div style={{
              marginTop: 36, display: 'grid', gap: 14, fontSize: 14.5,
            }}>
              <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                <span className="eyebrow" style={{ color: 'var(--eso-accent)', minWidth: 88 }}>e-mail</span>
                <a href="mailto:tennis@esotenniscademy.nl" style={{ color: ESO.cream, textDecoration: 'none' }}>
                  tennis@esotenniscademy.nl
                </a>
              </div>
              <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                <span className="eyebrow" style={{ color: 'var(--eso-accent)', minWidth: 88 }}>telefoon</span>
                <span>06 12 34 56 78</span>
              </div>
              <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                <span className="eyebrow" style={{ color: 'var(--eso-accent)', minWidth: 88 }}>locatie</span>
                <span>tc bas dongen · trainingen in dongen</span>
              </div>
              <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                <span className="eyebrow" style={{ color: 'var(--eso-accent)', minWidth: 88 }}>scan</span>
                <span style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                  <div style={{ width: 56, height: 56, padding: 4, background: ESO.cream }}>
                    <img src={QR_SRC} alt="QR" style={{ width: '100%', height: '100%', display: 'block' }} />
                  </div>
                  <span style={{ fontSize: 12, opacity: 0.78, maxWidth: 200 }}>
                    open je camera-app en scan voor directe e-mail.
                  </span>
                </span>
              </div>
            </div>
          </div>

          <form onSubmit={submit} className="reveal" data-delay="1" style={{
            background: ESO.cream, color: ESO.ink, padding: '36px 36px 32px',
            display: 'flex', flexDirection: 'column', gap: 20,
            position: 'relative',
          }}>
            <div className="eyebrow" style={{ color: ESO.red }}>aanmelden voor intake</div>
            {sent ? (
              <div style={{ padding: '20px 0' }}>
                <h3 className="display" style={{
                  fontSize: 28, margin: '0 0 12px',
                }}>
                  bedankt, {name || 'tennistalent'}!
                </h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.55, opacity: 0.82, margin: 0 }}>
                  We nemen binnen 48 uur contact op om een datum te plannen.
                  In de tussentijd: leg vast welk shot je het meeste wilt verbeteren.
                </p>
              </div>
            ) : (
              <React.Fragment>
                <Field label="naam talent">
                  <input type="text" required value={name} onChange={(e) => setName(e.target.value)}
                         placeholder="bv. nora" style={inputStyle} />
                </Field>
                <Field label="leeftijd">
                  <input type="number" required value={age} onChange={(e) => setAge(e.target.value)}
                         min={6} max={18} placeholder="12" style={inputStyle} />
                </Field>
                <Field label="e-mail ouder/voogd">
                  <input type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
                         placeholder="ouder@voorbeeld.nl" style={inputStyle} />
                </Field>
                <Field label="huidig niveau / opmerkingen">
                  <textarea value={msg} onChange={(e) => setMsg(e.target.value)} rows={3}
                            placeholder="bv. speelsterkte 7, focus op forehand"
                            style={{ ...inputStyle, resize: 'vertical', minHeight: 76 }} />
                </Field>
                <button type="submit" style={{
                  background: ESO.ink, color: ESO.cream, border: 'none', padding: '16px 24px',
                  fontFamily: 'Archivo Black, sans-serif', fontSize: 15,
                  letterSpacing: '-0.005em', textTransform: 'lowercase', cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between',
                  marginTop: 4,
                }}>
                  vraag intake aan
                  <ExclamMark which="close" size={18} color="var(--eso-accent)" />
                </button>
                <p style={{ margin: 0, fontSize: 11, opacity: 0.55, textAlign: 'center' }}>
                  geen spam · we mailen alleen om de afspraak te plannen.
                </p>
              </React.Fragment>
            )}
          </form>
        </div>
      </div>
    </section>
  );
}

const inputStyle = {
  width: '100%', padding: '12px 14px',
  border: `1px solid ${ESO.rule}`,
  background: ESO.cream, color: ESO.ink,
  fontFamily: 'Inter, sans-serif', fontSize: 15,
  outline: 'none',
  transition: 'border 0.15s',
};

function Field({ label, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
      <span style={{
        fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
        fontWeight: 600, opacity: 0.65,
      }}>{label}</span>
      {children}
    </label>
  );
}

// ── Footer ─────────────────────────────────────────────
function Footer() {
  return (
    <footer style={{
      background: ESO.ink, color: ESO.cream, padding: '64px 0 36px',
    }}>
      <div className="container" style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(220px, 1fr))',
        gap: 48,
      }}>
        <div>
          <img src="website-assets/logo.png" alt="¡eso! tennis academy"
               style={{ height: 40, filter: 'brightness(0) invert(1)' }} />
          <p style={{
            margin: '24px 0 0', fontSize: 13, lineHeight: 1.6, opacity: 0.7,
            maxWidth: 280,
          }}>
            Een kleine tennisacademie voor talenten van 8–15 jaar.
            Trainingen in Dongen.
          </p>
        </div>
        <div>
          <div className="eyebrow" style={{ opacity: 0.55, marginBottom: 14 }}>navigatie</div>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none',
                       display: 'flex', flexDirection: 'column', gap: 8,
                       fontSize: 14 }}>
            {[
              ['filosofie', '#filosofie'],
              ['de pijlers', '#pijlers'],
              ['coaches', '#coaches'],
              ['programma', '#programma'],
              ['inschrijven', '#inschrijven'],
            ].map(([l, h]) => (
              <li key={h}>
                <a href={h} style={{ color: ESO.cream, opacity: 0.8, textDecoration: 'none' }}>{l}</a>
              </li>
            ))}
          </ul>
        </div>
        <div>
          <div className="eyebrow" style={{ opacity: 0.55, marginBottom: 14 }}>contact</div>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none',
                       display: 'flex', flexDirection: 'column', gap: 8,
                       fontSize: 14, opacity: 0.85 }}>
            <li>tennis@esotenniscademy.nl</li>
            <li>06 12 34 56 78</li>
            <li>esotennisacademy.nl</li>
            <li style={{ marginTop: 6 }}>@esotennisacademy</li>
          </ul>
        </div>
        <div>
          <div className="eyebrow" style={{ opacity: 0.55, marginBottom: 14 }}>locatie</div>
          <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, opacity: 0.85 }}>
            tc bas dongen<br />
            tramstraat 14<br />
            5104 gr dongen
          </p>
        </div>
      </div>
      <div className="container" style={{
        marginTop: 56, paddingTop: 24, borderTop: '1px solid rgba(251,247,236,0.12)',
        display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16,
        fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase', opacity: 0.6,
      }}>
        <span>© ¡eso! tennis academy 2026</span>
        <span>made with care · in dongen</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  Filosofie, Pijlers, Coaches, Programma,
  Testimonial, WatKrijgt, FAQ, Inschrijven, Footer,
});