// ─── Site sections — i18n-aware ─────────────────────────────

function Filosofie() {
  const t = useT();
  return (
    <section id="filosofie" style={{ padding: '140px 0 100px', position: 'relative' }}>
      <div className="container">
        <div className="reveal eyebrow" style={{ color: ESO.red }}>{t.filosofieEyebrow}</div>
        <h2 className="display reveal" data-delay="1" style={{
          fontSize: 'clamp(36px, 6vw, 84px)', margin: '20px 0 0',
          maxWidth: 1100,
        }}>
          "<span style={{ color: '#DCE21E', fontStyle: 'italic' }}>¡eso!</span>" {t.filosofieTitle1}{' '}
          <span style={{ color: ESO.red }}>{t.filosofieTitle2}</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 }}>{t.filosofiePara1}</p>
          <p style={{ fontSize: 17, lineHeight: 1.6, opacity: 0.85, margin: 0 }}>{t.filosofiePara2}</p>
        </div>
      </div>
    </section>
  );
}

function Pijlers() {
  const t = useT();
  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 }}>{t.pijlersEyebrow}</div>
            <h2 className="display reveal" data-delay="1" style={{
              fontSize: 'clamp(36px, 5vw, 72px)', margin: '12px 0 0',
            }}>{t.pijlersTitle}</h2>
          </div>
          <div className="reveal" data-delay="2" style={{
            maxWidth: 420, fontSize: 16, lineHeight: 1.55, opacity: 0.78,
          }}>{t.pijlersIntro}</div>
        </div>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)',
          gap: 24,
        }}>
          {t.pillars.map(([title, tag, items], i) => (
            <article key={title} 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 }}>{title}</span>
              </div>
              <p style={{
                margin: 0, fontSize: 14.5, lineHeight: 1.5, opacity: 0.78,
                fontStyle: 'italic',
              }}>{tag}</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={{
                      display: 'inline-block', position: 'relative',
                      width: 4, height: 14, verticalAlign: 'middle',
                    }} aria-hidden="true">
                      <span style={{
                        position: 'absolute', left: 0, top: 0,
                        width: 4, height: 8, background: '#DCE21E', borderRadius: 1,
                      }} />
                      <span style={{
                        position: 'absolute', left: 0, top: 10,
                        width: 4, height: 4, background: '#DCE21E', borderRadius: '50%',
                      }} />
                    </span>
                    <span>{x}</span>
                  </li>
                ))}
              </ul>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function Coaches() {
  const t = useT();
  return (
    <section id="coaches" style={{ position: 'relative', overflow: 'hidden' }}>
      <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)' }}>{t.coachesEyebrow}</div>
              <h2 className="display" style={{
                fontSize: 'clamp(36px, 6vw, 88px)', margin: '10px 0 0',
                color: ESO.cream,
              }}>{t.coachesTitle}</h2>
            </div>
            <div style={{
              fontSize: 14, opacity: 0.78, maxWidth: 360,
              letterSpacing: '0.02em', alignSelf: 'flex-end',
            }}>{t.coachesSubtitle}</div>
          </div>
        </div>
      </div>
      <div className="container" style={{ padding: '80px 56px 100px' }}>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
          gap: 48,
        }}>
          {t.coachesData.map(([name, role, initials, face, 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: 'center',
                marginBottom: 22, gap: 16,
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 18, minWidth: 0 }}>
                  {face ? (
                    <div style={{
                      width: 84, height: 84, borderRadius: '50%',
                      flexShrink: 0,
                      backgroundImage: `url(website-assets/${face}.png)`,
                      backgroundSize: 'cover',
                      backgroundPosition: 'center 25%',
                      boxShadow: '0 0 0 2px ' + ESO.ink + ', 0 0 0 4px ' + ESO.red,
                    }} role="img" aria-label={name} />
                  ) : (
                    <div style={{
                      width: 84, height: 84, borderRadius: '50%',
                      flexShrink: 0,
                      background: ESO.cream, color: ESO.red,
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: "'Source Serif 4', Georgia, serif",
                      fontStyle: 'italic', fontWeight: 900,
                      fontSize: 38, letterSpacing: '-0.04em',
                      boxShadow: '0 0 0 2px ' + ESO.ink + ', 0 0 0 4px ' + ESO.red,
                    }} aria-label={name}>{initials}</div>
                  )}
                  <div style={{ minWidth: 0 }}>
                    <h3 className="display" style={{
                      fontSize: 'clamp(26px, 3.6vw, 36px)', margin: 0,
                    }}>{name}</h3>
                    <div className="eyebrow" style={{ color: ESO.red, marginTop: 6 }}>{role}</div>
                  </div>
                </div>
                <ExclamMark which="close" size={28} 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>
  );
}

function Programma() {
  const t = useT();
  return (
    <section id="programma" style={{
      padding: '120px 0', background: ESO.ink, color: ESO.cream,
      position: 'relative', overflow: 'hidden',
    }}>
      <div className="container">
        <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)' }}>{t.programmaEyebrow}</div>
            <h2 className="display" style={{
              fontSize: 'clamp(40px, 7vw, 96px)', margin: '12px 0 0',
              color: ESO.cream,
            }}>
              {t.programmaTitle1}<br />
              <span style={{ color: 'var(--eso-accent)' }}>{t.programmaTitle2}</span>
            </h2>
          </div>
          <div style={{ maxWidth: 360, fontSize: 14.5, opacity: 0.82, lineHeight: 1.55 }}>
            {t.programmaIntro}
          </div>
        </div>
        <div style={{
          marginTop: 72,
          display: 'grid', gridTemplateColumns: '1fr',
          gap: 40, maxWidth: 720,
        }}>
          <div className="reveal">
            <div className="eyebrow" style={{ opacity: 0.65, marginBottom: 18 }}>{t.programmaScheduleLabel}</div>
            <div>
              {t.schedule.map(([d, x, 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 === t.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' }}>{x}</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' }}>
              {t.programmaScheduleNote}
            </p>
          </div>
        </div>
        <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' }}>
              {t.commitmentTitle}
            </h3>
            <p style={{ fontSize: 14.5, lineHeight: 1.6, opacity: 0.82, margin: 0 }}>
              {t.commitmentBody}
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Testimonial() {
  const t = useT();
  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',
          }}>
            {t.testimonial}
          </blockquote>
          <div className="eyebrow" style={{ marginTop: 28, opacity: 0.7 }}>
            {t.testimonialAuthor}
          </div>
        </div>
      </div>
    </section>
  );
}

function WatKrijgt() {
  const t = useT();
  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 }}>{t.krijgtEyebrow}</div>
        <h2 className="display reveal" data-delay="1" style={{
          fontSize: 'clamp(36px, 5vw, 72px)', margin: '12px 0 56px',
        }}>{t.krijgtTitle}</h2>
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)',
          gap: 1, background: ESO.rule,
          border: `1px solid ${ESO.rule}`,
        }}>
          {t.krijgtItems.map(([title, body], i) => (
            <div key={title} className="reveal" data-delay={i % 4} style={{
              background: ESO.paper, padding: '36px 32px',
            }}>
              <div className="display" style={{ fontSize: 26, marginBottom: 12, color: ESO.ink }}>{title}</div>
              <p style={{ margin: 0, fontSize: 14.5, lineHeight: 1.55, opacity: 0.78 }}>{body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}


function OpenClinic() {
  const t = useT();
  const waHref = `https://wa.me/31617490653?text=${encodeURIComponent(t.waMessage)}`;
  return (
    <section id="open-clinic" style={{
      padding: '120px 0', background: '#DCE21E', color: '#1A1208',
      position: 'relative', overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', top: -60, right: -60, opacity: 0.12,
        pointerEvents: 'none',
      }}>
        <ExclamMark which="close" size={520} color="#1A1208" />
      </div>
      <div className="container" style={{ position: 'relative', zIndex: 1 }}>
        <div className="reveal eyebrow" style={{ color: '#A33D22' }}>{t.clinicEyebrow}</div>
        <h2 className="display reveal" data-delay="1" style={{
          fontSize: 'clamp(36px, 5.5vw, 76px)', margin: '14px 0 0', maxWidth: 980,
        }}>{t.clinicTitle}</h2>
        <p className="reveal" data-delay="2" style={{
          margin: '24px 0 0', maxWidth: 720, fontSize: 17, lineHeight: 1.6,
        }}>{t.clinicLede}</p>

        <div className="reveal" data-delay="3" style={{
          marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
          gap: 40,
        }}>
          <div>
            <div className="eyebrow" style={{ color: '#A33D22', marginBottom: 16 }}>{t.clinicScheduleLabel}</div>
            {t.clinicSchedule.map(([time, what], i) => (
              <div key={i} style={{
                display: 'grid', gridTemplateColumns: '60px 1fr', gap: 14,
                padding: '12px 0',
                borderTop: i === 0 ? '2px solid #1A1208' : '1px solid rgba(26,18,8,0.18)',
                borderBottom: i === t.clinicSchedule.length - 1 ? '2px solid #1A1208' : 'none',
                fontSize: 14,
              }}>
                <span className="display" style={{ fontSize: 15 }}>{time}</span>
                <span>{what}</span>
              </div>
            ))}
          </div>
          <div>
            <div className="eyebrow" style={{ color: '#A33D22', marginBottom: 16 }}>{t.clinicWhoTitle}</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
              {t.clinicWho.map((x) => (
                <li key={x} style={{
                  display: 'grid', gridTemplateColumns: '14px 1fr', gap: 10,
                  fontSize: 14.5, lineHeight: 1.5, padding: '6px 0',
                }}>
                  <span style={{ color: '#C84D2C', fontWeight: 700 }}>›</span>
                  <span>{x}</span>
                </li>
              ))}
            </ul>
            <div className="eyebrow" style={{ color: '#A33D22', marginTop: 24, marginBottom: 16 }}>{t.clinicWhatTitle}</div>
            <ul style={{ margin: 0, padding: 0, listStyle: 'none' }}>
              {t.clinicWhat.map((x) => (
                <li key={x} style={{
                  display: 'grid', gridTemplateColumns: '14px 1fr', gap: 10,
                  fontSize: 14.5, lineHeight: 1.5, padding: '6px 0',
                }}>
                  <span style={{ color: '#C84D2C', fontWeight: 700 }}>›</span>
                  <span>{x}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>

        <div className="reveal" data-delay="4" style={{
          marginTop: 56, display: 'flex', gap: 14, flexWrap: 'wrap', alignItems: 'center',
        }}>
          <a href={waHref} target="_blank" rel="noopener" style={{
            background: '#1A1208', color: '#F8F4E8', padding: '18px 28px',
            fontFamily: "'Source Serif 4', Georgia, serif", fontStyle: 'italic', fontWeight: 900,
            fontSize: 17, textDecoration: 'none',
            display: 'inline-flex', alignItems: 'center', gap: 14,
          }}>
            {t.clinicCTA}
            <ExclamMark which="close" size={20} color="#DCE21E" />
          </a>
          <span style={{ fontSize: 13, opacity: 0.75 }}>{t.clinicNote}</span>
        </div>
      </div>
    </section>
  );
}
window.OpenClinic = OpenClinic;

function FAQ() {
  const t = useT();
  return (
    <section id="faq" style={{ padding: '120px 0', position: 'relative' }}>
      <div className="container">
        <div className="reveal eyebrow" style={{ color: ESO.red }}>{t.faqEyebrow}</div>
        <h2 className="display reveal" data-delay="1" style={{
          fontSize: 'clamp(36px, 5vw, 72px)', margin: '12px 0 56px',
        }}>{t.faqTitle}</h2>
        <div style={{ maxWidth: 880 }}>
          {t.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)} aria-expanded={open} style={{
        all: 'unset', cursor: 'pointer', display: 'flex',
        width: '100%', justifyContent: 'space-between', alignItems: 'center',
        padding: '20px 0', gap: 16, boxSizing: 'border-box', minHeight: 56,
        WebkitTapHighlightColor: 'transparent',
      }}>
        <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>
  );
}

function Inschrijven() {
  const t = useT();
  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);

  // Formspree: replace XXXXXXXX with your endpoint id (formspree.io → create form → copy id)
  const FORMSPREE_ENDPOINT = 'https://formspree.io/f/XXXXXXXX';
  async function submit(e) {
    e.preventDefault();
    try {
      await fetch(FORMSPREE_ENDPOINT, {
        method: 'POST',
        headers: { 'Accept': 'application/json' },
        body: new FormData(e.target),
      });
      setSent(true);
    } catch (err) {
      // Fallback to mailto if formspree unreachable
      const subject = encodeURIComponent('Gratis intake — ' + (name || 'aanmelding'));
      const body = encodeURIComponent(
        'Naam talent: ' + name + '\n' +
        'Leeftijd: ' + age + '\n' +
        'E-mail ouder/voogd: ' + email + '\n\n' +
        'Niveau / opmerkingen:\n' + msg
      );
      window.location.href = 'mailto:coach@esotennis.nl?subject=' + subject + '&body=' + body;
      setSent(true);
    }
  }

  return (
    <section id="inschrijven" style={{
      padding: '140px 0 120px',
      background: ESO.red, color: ESO.cream,
      position: 'relative', overflow: 'hidden',
    }}>
      <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)' }}>{t.inschrijvenEyebrow}</div>
            <h2 className="display" style={{
              fontSize: 'clamp(40px, 6.5vw, 88px)', margin: '12px 0 0',
              color: ESO.cream,
            }}>
              {t.inschrijvenTitle1}<br />
              {t.inschrijvenTitle2}
            </h2>
            <p style={{
              fontSize: 17, lineHeight: 1.55, marginTop: 24, maxWidth: 480, opacity: 0.92,
            }}>{t.inschrijvenBody}</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 }}>{t.contactEmail}</span>
                <a href="mailto:coach@esotennis.nl" style={{ color: ESO.cream, textDecoration: 'none' }}>
                  coach@esotennis.nl
                </a>
              </div>
              <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                <span className="eyebrow" style={{ color: 'var(--eso-accent)', minWidth: 88 }}>{t.contactPhone}</span>
                <span>06 1749 0653</span>
              </div>
              <div style={{ display: 'flex', gap: 14, alignItems: 'center' }}>
                <span className="eyebrow" style={{ color: 'var(--eso-accent)', minWidth: 88 }}>{t.contactLocation}</span>
                <span>{t.locationText}</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 }}>{t.formEyebrow}</div>
            {sent ? (
              <div style={{ padding: '20px 0' }}>
                <h3 className="display" style={{ fontSize: 28, margin: '0 0 12px' }}>
                  {t.thanksTitle}, {name || ''}!
                </h3>
                <p style={{ fontSize: 14.5, lineHeight: 1.55, opacity: 0.82, margin: 0 }}>
                  {t.thanksBody}
                </p>
              </div>
            ) : (
              <React.Fragment>
                <Field label={t.fieldName}>
                  <input type="text" name="name" required value={name} onChange={(e) => setName(e.target.value)}
                         placeholder={t.fieldNamePh} style={inputStyle} />
                </Field>
                <Field label={t.fieldAge}>
                  <input type="number" name="age" required value={age} onChange={(e) => setAge(e.target.value)}
                         min={6} max={18} placeholder={t.fieldAgePh} style={inputStyle} />
                </Field>
                <Field label={t.fieldEmail}>
                  <input type="email" name="email" required value={email} onChange={(e) => setEmail(e.target.value)}
                         placeholder={t.fieldEmailPh} style={inputStyle} />
                </Field>
                <Field label={t.fieldMsg}>
                  <textarea name="message" value={msg} onChange={(e) => setMsg(e.target.value)} rows={3}
                            placeholder={t.fieldMsgPh}
                            style={{ ...inputStyle, resize: 'vertical', minHeight: 76 }} />
                </Field>
                <button type="submit" style={{
                  background: ESO.ink, color: ESO.cream, border: 'none', padding: '16px 24px',
                  fontFamily: "'Source Serif 4', Georgia, serif", fontStyle: 'italic', fontSize: 15,
                  letterSpacing: '-0.005em', textTransform: 'lowercase', cursor: 'pointer',
                  display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between',
                  marginTop: 4,
                }}>
                  {t.submit}
                  <ExclamMark which="close" size={18} color="var(--eso-accent)" />
                </button>
                <p style={{ margin: 0, fontSize: 11, opacity: 0.55, textAlign: 'center' }}>
                  {t.submitNote}
                </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>
  );
}

function Footer() {
  const t = useT();
  return (
    <footer style={{
      background: ESO.ink, color: ESO.cream, padding: '80px 0 36px',
      position: 'relative', overflow: 'hidden',
    }}>
      <div className="container" style={{
        marginBottom: 56, paddingBottom: 56,
        borderBottom: '1px solid rgba(251,247,236,0.12)',
        display: 'grid', gridTemplateColumns: 'auto 1fr', gap: 48, alignItems: 'center',
      }}>
        <img src="website-assets/logo.png" alt="¡eso!"
             style={{ height: 88, maxWidth: '100%' }} />
        <div className="display" style={{
          fontSize: 'clamp(20px, 2.4vw, 30px)', color: ESO.cream, opacity: 0.92, lineHeight: 1.2,
        }}>
          <span style={{ color: 'var(--eso-accent)' }}>"¡eso!"</span> — wat een coach zegt op het juiste moment.
        </div>
      </div>
      <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 }} />
          <p style={{
            margin: '24px 0 0', fontSize: 13, lineHeight: 1.6, opacity: 0.7,
            maxWidth: 280,
          }}>{t.footerTagline}</p>
        </div>
        <div>
          <div className="eyebrow" style={{ opacity: 0.55, marginBottom: 14 }}>{t.footerNav}</div>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none',
                       display: 'flex', flexDirection: 'column', gap: 8, fontSize: 14 }}>
            {t.footerNavItems.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 }}>{t.footerContact}</div>
          <ul style={{ margin: 0, padding: 0, listStyle: 'none',
                       display: 'flex', flexDirection: 'column', gap: 8,
                       fontSize: 14, opacity: 0.85 }}>
            <li>coach@esotennis.nl</li>
            <li>06 1749 0653</li>
            <li>esotennis.nl</li>
            <li style={{ marginTop: 6 }}>@esotennis</li>
          </ul>
        </div>
        <div>
          <div className="eyebrow" style={{ opacity: 0.55, marginBottom: 14 }}>{t.footerLocation}</div>
          <p style={{ margin: 0, fontSize: 14, lineHeight: 1.6, opacity: 0.85, whiteSpace: 'pre-line' }}>
            {t.footerLocationText.replace(/\\n/g, '\n')}
          </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>{t.footerCopyright}</span>
        <span>{t.footerMade}</span>
      </div>
    </footer>
  );
}

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