// Besøg & søg om plads
const { useState } = React;

function BesogHero() {
  return (
    <section className="page-hero">
      <div>
        <span className="eyebrow">Kom indenfor</span>
        <h1>Kom på besøg.<br/>Få en <em style={{color: 'var(--green-primary)', fontStyle: 'italic', fontWeight: 500}}>fornemmelse</em> af stedet.</h1>
      </div>
      <div>
        <p style={{fontSize: 19, color: 'var(--ink-soft)', maxWidth: 480}}>
          Der er ingen rigtig måde at vide om en skole er den rigtige — før du står der. Kom forbi. Drik en kop kakao. Mød en elev. Så ved du det.
        </p>
        <div style={{marginTop: 24, display: 'flex', gap: 10, flexWrap: 'wrap'}}>
          <a href="#book" className="btn btn-primary">Book et besøg</a>
          <a href="tel:+4574670466" className="btn btn-ghost">Ring: 74 67 04 66</a>
        </div>
      </div>
    </section>
  );
}

function VisitOptions() {
  const [active, setActive] = useState(0);
  const opts = [
    {
      ttl: 'Individuelt besøg', sub: 'Bare jer — en tirsdag eller torsdag',
      body: 'Vi sætter 1,5 time af til jer. En lærer og en elev viser rundt. I kan se et klasselokale, værelserne og stille alle de spørgsmål I har.',
      bullets: ['Tirsdag eller torsdag kl. 14', 'Varer ca. 1,5 time', 'En elev viser rundt', 'Vi siger hej til din kommende kontaktlærer'],
      emoji: '🏡',
    },
    {
      ttl: 'Åbent hus', sub: 'Kom uden at booke — sammen med andre',
      body: 'Fire gange om året holder vi åbent hus. Der er rundvisning, elever der fortæller på scenen, og tid til at se værelserne. Vi byder på boller.',
      bullets: ['18. maj 2026, 14–17', '12. september 2026, 11–15', '24. januar 2027, 11–15', 'Rundvisning hvert 20. minut'],
      emoji: '🎪',
    },
    {
      ttl: 'Prøveovernatning', sub: 'Bliv natten over og prøv det',
      body: 'Den bedste måde at finde ud af om du trives. Du deler værelse med en nuværende elev, deltager i aften­aktivitet og spiser med alle.',
      bullets: ['Én nat fra fredag til lørdag', 'Gratis', 'Du får en buddy', 'Forældre kan sove på kro i byen'],
      emoji: '🌙',
    },
  ];
  const o = opts[active];
  return (
    <section className="section" style={{paddingTop: 48}}>
      <div className="section-head">
        <div>
          <span className="eyebrow">Tre måder at mødes på</span>
          <h2>Hvordan vil du<br/><em>møde skolen?</em></h2>
        </div>
      </div>
      <div style={{display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 32}}>
        <div style={{display: 'flex', flexDirection: 'column', gap: 12}}>
          {opts.map((x, i) => (
            <button key={i} onClick={() => setActive(i)} style={{
              textAlign: 'left',
              padding: '20px 24px',
              borderRadius: 'var(--radius-m)',
              border: active === i ? '2px solid var(--green-primary)' : '1.5px solid rgba(15,61,46,0.12)',
              background: active === i ? 'var(--green-soft)' : 'var(--cream)',
              cursor: 'pointer',
              fontFamily: 'var(--font-body)',
              transition: 'all 0.2s',
            }}>
              <div style={{display: 'flex', alignItems: 'center', gap: 14, marginBottom: 4}}>
                <div style={{fontSize: 28}}>{x.emoji}</div>
                <div style={{fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, color: 'var(--green-deep)'}}>{x.ttl}</div>
              </div>
              <div style={{fontSize: 14, color: 'var(--ink-soft)', marginLeft: 42}}>{x.sub}</div>
            </button>
          ))}
        </div>
        <div style={{background: 'var(--cream-warm)', borderRadius: 'var(--radius-l)', padding: '40px 48px'}}>
          <div style={{fontSize: 64, marginBottom: 12}}>{o.emoji}</div>
          <h3 style={{fontSize: 32, marginBottom: 12}}>{o.ttl}</h3>
          <p style={{color: 'var(--ink-soft)', fontSize: 17, marginBottom: 24}}>{o.body}</p>
          <ul style={{listStyle: 'none', padding: 0, margin: 0}}>
            {o.bullets.map((b, i) => (
              <li key={i} style={{padding: '10px 0', display: 'flex', gap: 10, alignItems: 'start', borderBottom: i < o.bullets.length - 1 ? '1px dashed rgba(15,61,46,0.15)' : 'none'}}>
                <span style={{color: 'var(--green-primary)', fontWeight: 700}}>→</span> <span style={{fontSize: 15}}>{b}</span>
              </li>
            ))}
          </ul>
        </div>
      </div>
    </section>
  );
}

function ApplyForm() {
  return (
    <div className="apply-wrap" id="book">
      <div className="apply-card primary">
        <div className="spots-indicator">
          <span className="big">7</span>
          <div>
            <div>ledige pladser</div>
            <div style={{fontSize: 12, fontWeight: 400}}>Skoleåret 26/27</div>
          </div>
        </div>
        <h2>Du er velkommen.</h2>
        <p className="lead">Vi optager elever i 8., 9. og 10. klasse. Der er stadig pladser til 26/27 — særligt i 9. og 10. klasse. Ansøg, eller kom på besøg først.</p>
        <ul>
          <li><span>Du skal være udredt ordblind eller have konkret mistanke.</span></li>
          <li><span>Vi holder et uforpligtende møde med jer efter ansøgning.</span></li>
          <li><span>Plads tilbydes i rækkefølge — så send ansøgning, når du ved.</span></li>
          <li><span>Statstilskud gør prisen overkommelig.</span></li>
        </ul>
        <div style={{display: 'flex', gap: 10, flexWrap: 'wrap'}}>
          <a href="#" className="btn btn-sun">Se priser og tilskud</a>
        </div>
      </div>
      <div className="apply-card">
        <h2>Book et besøg</h2>
        <p className="lead">Vi vender tilbage inden for 1 skoledag. Du skal ikke beslutte dig for noget endnu.</p>
        <div className="form-row row2">
          <div>
            <label>Dit navn</label>
            <input type="text" placeholder="Fx Frida" />
          </div>
          <div>
            <label>Forælder/elev</label>
            <select><option>Elev</option><option>Forælder</option><option>Begge</option></select>
          </div>
        </div>
        <div className="form-row row2">
          <div>
            <label>Mobil</label>
            <input type="tel" placeholder="12 34 56 78" />
          </div>
          <div>
            <label>Klassetrin</label>
            <select><option>8. klasse (nuværende)</option><option>7. klasse → 8.</option><option>8. klasse → 9.</option><option>9. klasse → 10.</option></select>
          </div>
        </div>
        <div className="form-row">
          <label>E-mail</label>
          <input type="email" placeholder="navn@eksempel.dk" />
        </div>
        <div className="form-row">
          <label>Hvad vil I helst?</label>
          <select>
            <option>Individuelt besøg</option>
            <option>Kom til næste åbent hus (18. maj)</option>
            <option>Prøveovernatning</option>
            <option>Bare snakke i telefon først</option>
          </select>
        </div>
        <div className="form-row">
          <label>Vil du sige mere?</label>
          <textarea placeholder="Evt. spørgsmål eller noget vi skal vide om dig..."></textarea>
        </div>
        <button className="btn btn-primary" style={{marginTop: 8, alignSelf: 'flex-start'}}>Send forespørgsel →</button>
      </div>
    </div>
  );
}

function FAQ() {
  const [open, setOpen] = useState(0);
  const qs = [
    { q: 'Skal man være udredt ordblind?', a: 'Ja, eller have en konkret mistanke vi kan teste. Vi hjælper jer, hvis I er i tvivl.' },
    { q: 'Hvor mange elever er der?', a: 'Ca. 87 elever i alt — fordelt på 8., 9. og 10. klasse. Vi er én af de mindste ordblinde-efterskoler i landet.' },
    { q: 'Hvad koster det?', a: 'Prisen reguleres efter familiens indkomst. De fleste betaler mellem 1.800 og 3.100 kr. om ugen. Statstilskud trækkes automatisk.' },
    { q: 'Kan man tage 9. klasses afgangsprøve?', a: 'Ja. Alle vores elever går til afgangsprøve — med alle de hjælpemidler de har brug for.' },
    { q: 'Hvad med mobil og skærme?', a: 'Vi har aftaler omkring skærmtid, ikke forbud. Du skal kunne være ung på din egen måde.' },
    { q: 'Hvor ligger skolen?', a: 'Tøndervej 239, 6280 Højer. Helt tæt på vadehavet. 20 minutter fra Tønder.' },
  ];
  return (
    <section className="section" style={{paddingTop: 48, maxWidth: 900}}>
      <div style={{marginBottom: 32}}>
        <span className="eyebrow">Ofte spurgt</span>
        <h2>Det spørger andre <em>om</em>.</h2>
      </div>
      <div>
        {qs.map((it, i) => (
          <div key={i} style={{borderTop: '1px solid rgba(15,61,46,0.15)', padding: '20px 0'}}>
            <button onClick={() => setOpen(open === i ? -1 : i)} style={{
              width: '100%', textAlign: 'left', background: 'transparent', border: 'none',
              padding: 0, cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16,
              fontFamily: 'var(--font-display)', fontSize: 22, fontWeight: 600, color: 'var(--green-deep)',
            }}>
              {it.q}
              <span style={{
                width: 36, height: 36, borderRadius: '50%', background: open === i ? 'var(--green-deep)' : 'var(--green-soft)',
                color: open === i ? 'var(--cream)' : 'var(--green-deep)',
                display: 'grid', placeItems: 'center', flexShrink: 0,
                fontFamily: 'var(--font-body)', fontSize: 22, fontWeight: 700,
                transition: 'all 0.2s',
              }}>{open === i ? '−' : '+'}</span>
            </button>
            {open === i && (
              <div style={{marginTop: 16, color: 'var(--ink-soft)', fontSize: 17, paddingRight: 60, display: 'flex', gap: 14, alignItems: 'start'}}>
                <div style={{flex: 1}}>{it.a}</div>
                <ListenChip text={it.q + '. ' + it.a} compact />
              </div>
            )}
          </div>
        ))}
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Topbar current="besog" />
      <BesogHero />
      <VisitOptions />
      <ApplyForm />
      <FAQ />
      <Footer />
      <A11yPanel />
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);