// Forside — Emmerske Efterskole
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "collage",
  "spotsStyle": "bar",
  "theme": "default",
  "tone": "du"
}/*EDITMODE-END*/;

// ========== HERO — three variants ==========
function HeroCollage() {
  return (
    <section className="hero">
      <div className="hero-left">
        <div className="hero-eyebrow">
          <span style={{width: 8, height: 8, borderRadius: '50%', background: 'var(--green-primary)'}}></span>
          Trivselsefterskolen for ordblinde
        </div>
        <h1>
          Her får du lov<br/>
          til at <span className="highlight">være dig</span> —<br/>
          og lære på din måde.
        </h1>
        <p className="hero-lead">
          Emmerske Efterskole er for dig i 8., 9. og 10. klasse, der lærer bedst med ører, hænder, stemme og hjerte — ikke kun med øjne på en bogside.
        </p>
        <div className="hero-ctas">
          <a href="besog.html" className="btn btn-primary">
            Kom på besøg
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
          </a>
          <a href="hverdag.html" className="btn btn-ghost">Se hverdagen</a>
          <ListenChip text="Her får du lov til at være dig, og lære på din måde. Emmerske Efterskole er for dig i ottende, niende og tiende klasse, der lærer bedst med ører, hænder, stemme og hjerte, ikke kun med øjne på en bogside." label="Lyt til mig" />
        </div>
        <div className="hero-facts">
          <div className="fact">
            <div className="num">92%</div>
            <div className="lbl">går videre til ungdoms&shy;uddannelse</div>
          </div>
          <div className="fact">
            <div className="num">1:4</div>
            <div className="lbl">lærere pr. elev i fag­timer</div>
          </div>
          <div className="fact">
            <div className="num">87</div>
            <div className="lbl">elever i et lille fællesskab</div>
          </div>
        </div>
      </div>
      <div className="hero-right" aria-hidden="false">
        <div className="collage-card c-main">
          <div className="photo">
            <div className="play-btn" role="button" aria-label="Afspil velkomstvideo">
              <div className="circle"><div className="triangle"></div></div>
            </div>
            <span style={{position: 'absolute', bottom: 16, left: 16, color: 'white', fontFamily: 'var(--font-display)', fontSize: 22, textShadow: '0 2px 8px rgba(0,0,0,0.4)'}}>
              1 min med skolen
            </span>
          </div>
        </div>
        <div className="collage-card c-sq">
          <div className="photo warm">foto: morgensamling</div>
        </div>
        <div className="collage-card c-circle">
          Ledige pladser<br/>26/27 ✨
        </div>
      </div>
    </section>
  );
}

function HeroFullVideo() {
  return (
    <section className="hero" style={{gridTemplateColumns: '1fr', textAlign: 'center'}}>
      <div className="hero-left" style={{maxWidth: 900, margin: '0 auto'}}>
        <div className="hero-eyebrow" style={{margin: '0 auto 24px'}}>
          <span style={{width: 8, height: 8, borderRadius: '50%', background: 'var(--green-primary)'}}></span>
          Trivselsefterskolen for ordblinde
        </div>
        <h1 style={{fontSize: 'clamp(48px, 6vw, 88px)'}}>
          Kom indenfor.<br/>
          <span className="highlight">Vi har plads til dig.</span>
        </h1>
        <div className="hero-ctas" style={{justifyContent: 'center', marginTop: 32}}>
          <a href="besog.html" className="btn btn-primary">Kom på besøg</a>
          <a href="hverdag.html" className="btn btn-ghost">Se hverdagen</a>
        </div>
      </div>
      <div style={{maxWidth: 1100, margin: '48px auto 0', width: '100%', aspectRatio: '16/9', borderRadius: 'var(--radius-l)', overflow: 'hidden', position: 'relative', boxShadow: 'var(--shadow-card)'}}>
        <div className="photo" style={{height: '100%'}}>
          <div className="play-btn" role="button" aria-label="Afspil video">
            <div className="circle"><div className="triangle"></div></div>
          </div>
          <span style={{position: 'absolute', bottom: 20, left: 20, color: 'white', fontFamily: 'var(--font-display)', fontSize: 26, textShadow: '0 2px 8px rgba(0,0,0,0.4)'}}>Velkommen til Emmerske</span>
        </div>
      </div>
    </section>
  );
}

function HeroAudio() {
  const [playing, setPlaying] = useState(false);
  const episodes = [
    { t: 'Hvad er en trivselsefterskole?', d: '2:14', by: 'Forstander Mette' },
    { t: 'En dag på Emmerske', d: '4:02', by: 'Elev, 10. klasse' },
    { t: 'Sådan hjælper vi dig med ordblindhed', d: '3:38', by: 'Læsevejleder Lars' },
  ];
  return (
    <section className="hero">
      <div className="hero-left">
        <div className="hero-eyebrow">
          <span style={{width: 8, height: 8, borderRadius: '50%', background: 'var(--coral)'}}></span>
          Lyt før du læser
        </div>
        <h1>Kig ind<br/>med <span className="highlight">ørerne</span> først.</h1>
        <p className="hero-lead">Vi ved at bogstaver kan være besværlige. Derfor kan du høre alt det vigtige — fortalt af dem, der går på skolen.</p>
        <div className="hero-ctas">
          <a href="besog.html" className="btn btn-primary">Kom på besøg</a>
        </div>
      </div>
      <div className="hero-right" style={{height: 'auto', background: 'var(--green-deep)', color: 'var(--cream)', borderRadius: 'var(--radius-l)', padding: 32}}>
        <div style={{fontSize: 13, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--sun)', fontWeight: 700, marginBottom: 20}}>📻 Lytte-serie</div>
        {episodes.map((ep, i) => (
          <div key={i} onClick={() => setPlaying(i)} style={{display: 'flex', gap: 16, alignItems: 'center', padding: '16px 0', borderBottom: i < 2 ? '1px solid rgba(247,243,234,0.15)' : 'none', cursor: 'pointer'}}>
            <div style={{width: 48, height: 48, borderRadius: '50%', background: playing === i ? 'var(--sun)' : 'rgba(247,243,234,0.1)', display: 'grid', placeItems: 'center', flexShrink: 0, transition: 'background 0.2s'}}>
              <svg width="18" height="18" viewBox="0 0 16 16" fill={playing === i ? 'var(--green-deep)' : 'var(--cream)'}><path d="M4 3l10 5-10 5z"/></svg>
            </div>
            <div style={{flex: 1}}>
              <div style={{fontWeight: 700, fontSize: 16}}>{ep.t}</div>
              <div style={{fontSize: 13, color: 'rgba(247,243,234,0.6)'}}>{ep.by} · {ep.d}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ========== MODALITY STRIP ==========
function ModalityStrip() {
  const items = ['Hør', 'Se', 'Gør', 'Tal', 'Spørg', 'Prøv', 'Byg', 'Syng', 'Løb', 'Lyt'];
  return (
    <div className="modality-strip" aria-hidden="true">
      <div className="modality-track">
        <span>{items.map((w, i) => <React.Fragment key={i}>{w}<span className="dot"></span></React.Fragment>)}</span>
        <span>{items.map((w, i) => <React.Fragment key={'b'+i}>{w}<span className="dot"></span></React.Fragment>)}</span>
      </div>
    </div>
  );
}

// ========== APPROACH — 3 cards ==========
function Approach() {
  const cards = [
    {
      title: 'Vi møder dig, hvor du er',
      body: 'Ingen bliver målt på hvor hurtigt de kan læse. Vi hjælper dig derhen, du gerne vil.',
      tag: '— Mette, læsevejleder',
      icon: <svg viewBox="0 0 24 24"><path d="M20 6L9 17l-5-5"/></svg>,
    },
    {
      title: 'Teknologi er din ven',
      body: 'CD-ORD, AppWriter, oplæsning og talegenkendelse — alle elever bliver fortrolige med hjælpemidler der virker.',
      tag: 'iPad + MacBook til alle',
      icon: <svg viewBox="0 0 24 24"><rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/></svg>,
    },
    {
      title: 'Trivsel kommer først',
      body: 'Du skal føle dig tryg, set og hørt. Alt andet bygger vi derfra. Hver uge holder vi trivsels­samtaler.',
      tag: '❤️ Det er vi kendt for',
      icon: <svg viewBox="0 0 24 24"><path d="M12 21s-7-4.5-9-9c-1.5-3.5 1-7 4.5-7 2 0 3.5 1 4.5 2.5C13 6 14.5 5 16.5 5 20 5 22.5 8.5 21 12c-2 4.5-9 9-9 9z"/></svg>,
    },
  ];
  return (
    <section className="section approach">
      <div className="section-head">
        <div>
          <span className="eyebrow">Sådan gør vi</span>
          <h2>Det handler ikke om at <em>lære hurtigere</em>.<br/>Det handler om at lære på din måde.</h2>
        </div>
        <p className="section-sub">På Emmerske får du plads til at være ung, lave fejl, grine, hygge — og finde ud af hvordan du lærer bedst.</p>
      </div>
      <div className="approach-grid">
        {cards.map((c, i) => (
          <div className="approach-card" key={i}>
            <div className="approach-icon">{c.icon}</div>
            <h3>{c.title}</h3>
            <p>{c.body}</p>
            <div className="tag">{c.tag}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ========== VIDEO GRID — hverdagen ==========
function VideoGrid() {
  const tiles = [
    { t: 'En uge på Emmerske', d: '3:12', cls: '' },
    { t: 'Morgensamling', d: '0:45', cls: 'warm' },
    { t: 'Værkstedet', d: '1:22', cls: 'sun' },
    { t: 'Køkkenhold', d: '0:58', cls: 'sky' },
    { t: 'Fodbold­finale', d: '1:07', cls: 'warm' },
  ];
  return (
    <section className="section" style={{paddingTop: 72}}>
      <div className="section-head">
        <div>
          <span className="eyebrow">Hverdagen i levende billeder</span>
          <h2>Se, hvordan <em>det er</em> at gå her.</h2>
        </div>
        <a href="hverdag.html" className="btn btn-ghost">Alle videoer →</a>
      </div>
      <div className="video-grid">
        {tiles.map((v, i) => (
          <div className="video-tile" key={i}>
            <div className={"photo " + v.cls} style={{height: '100%'}}></div>
            <div className="play-mini" aria-hidden="true"></div>
            <div className="meta">
              <span className="ttl">{v.t}</span>
              <span className="dur">{v.d}</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ========== DIARY — elev fortæller ==========
function Diary() {
  const [active, setActive] = useState(0);
  const entries = [
    {
      name: 'Frida', grade: '10. klasse', initial: 'F',
      date: 'Onsdag, uge 14',
      text: [
        'I dag har jeg læst et helt kapitel højt i dansk — uden at være nervøs.',
        'Det kunne jeg IKKE for et år siden. Noget er sket.',
        'Vi lavede bål i aftes og sang Kim Larsen. Bedste aften.',
      ],
      sig: '— Frida',
    },
    {
      name: 'Mikkel', grade: '9. klasse', initial: 'M',
      date: 'Fredag, uge 8',
      text: [
        'Fik 7 i tysk! Jeg troede aldrig jeg kom over 02.',
        'Lærerne fik mig til at tale i stedet for at skrive. Det hjalp.',
        'Skal på weekend nu. Glæder mig til at komme tilbage.',
      ],
      sig: '— Mikkel',
    },
    {
      name: 'Noah', grade: '8. klasse', initial: 'N',
      date: 'Søndag, uge 2',
      text: [
        'Første uge er slut. Jeg troede jeg ville savne mor mere.',
        'Men her er så meget at lave! Drama, vandski, kor.',
        'Jeg har fundet min bedste ven. Han hedder Otto.',
      ],
      sig: '— Noah',
    },
    {
      name: 'Selma', grade: '10. klasse', initial: 'S',
      date: 'Tirsdag, uge 22',
      text: [
        'Jeg skal have min afgangsbevis om 3 uger.',
        'Jeg er blevet så meget klogere — ikke bare på bøger.',
        'Jeg er glad. Det er alt.',
      ],
      sig: '— Selma',
    },
  ];
  const e = entries[active];
  const fullText = e.text.join(' ');
  return (
    <section className="diary-section">
      <div className="section">
        <div className="section-head">
          <div>
            <span className="eyebrow">Elever fortæller</span>
            <h2>Skrevet med hånden.<br/>Fortalt fra hjertet.</h2>
          </div>
          <p className="section-sub">Vores elever har lov til at sige lige hvad de mener — også når det handler om skolen. Her er nogle af deres ord.</p>
        </div>
        <div className="diary-wrap">
          <div className="diary-card" key={active}>
            <div className="date">{e.date}</div>
            <div className="handwriting">
              {e.text.map((line, i) => <p key={i}>{line}</p>)}
            </div>
            <span className="signature">{e.sig}</span>
            <div style={{marginTop: 24}}>
              <ListenChip text={fullText} label={"Lyt til " + e.name} />
            </div>
          </div>
          <div className="diary-avatars">
            {entries.map((x, i) => (
              <button key={i} className={"diary-avatar" + (active === i ? ' active' : '')} onClick={() => setActive(i)}>
                <div className="face">{x.initial}</div>
                <div>
                  <div className="name-line">{x.name}</div>
                  <div className="role">{x.grade}</div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ========== SCHEDULE ==========
function Schedule() {
  const [day, setDay] = useState(0);
  const days = ['Man', 'Tir', 'Ons', 'Tor', 'Fre'];
  const times = ['08:00', '09:00', '10:15', '11:30', '13:00', '14:15'];
  const rows = [
    ['Dansk', 'Matematik', 'Engelsk', 'Dansk', 'Valgfag'],
    ['Matematik', 'Dansk', 'Historie', 'Tysk', 'Linjefag'],
    ['Idræt', 'Natur/tek', 'Kreativ', 'Idræt', 'Linjefag'],
    ['Engelsk', 'Kreativ', 'Dansk', 'Samfundsfag', 'Fri'],
    ['Valgfag', 'Læsebånd', 'Matematik', 'Kreativ', 'Weekend-klar'],
    ['Fællestid', 'Studietid', 'Fællestid', 'Studietid', 'Afrejse'],
  ];
  const color = (s) => {
    if (s === 'Dansk' || s === 'Læsebånd') return 'fag-dansk';
    if (s === 'Idræt') return 'fag-idraet';
    if (s === 'Kreativ' || s === 'Linjefag') return 'fag-kreativ';
    return '';
  };
  return (
    <section className="section schedule-section">
      <div className="section-head">
        <div>
          <span className="eyebrow">Ugeskemaet</span>
          <h2>En uge ser <em>sådan her</em> ud.</h2>
        </div>
        <p className="section-sub">Tryk på en dag for at zoome ind. Linjefag er fx mountainbike, kor, gaming, håndværk, drama.</p>
      </div>
      <div className="schedule">
        <div style={{gridColumn: '1 / -1', display: 'grid', gridTemplateColumns: '120px repeat(5, 1fr)', borderBottom: '1px solid rgba(15,61,46,0.1)'}}>
          <div style={{padding: '18px 14px', fontWeight: 700, fontSize: 13, color: 'var(--ink-soft)', letterSpacing: '0.06em', textTransform: 'uppercase'}}>Uge 14</div>
          {days.map((d, i) => (
            <div key={i} className={"schedule-day" + (day === i ? ' active' : '')} onClick={() => setDay(i)}>{d}</div>
          ))}
        </div>
        <div className="schedule-times">
          {times.map(t => <div key={t} className="schedule-slot">{t}</div>)}
        </div>
        <div className="schedule-grid">
          {rows.map((row, ri) => (
            row.map((subj, di) => (
              <div key={ri + '-' + di} className={"schedule-cell " + color(subj) + (day === di ? ' highlight' : '')}>
                <div className="subj">{subj}</div>
                <div className="rm">Lokale {(ri + di) % 5 + 1}</div>
              </div>
            ))
          )).flat()}
        </div>
      </div>
    </section>
  );
}

// ========== VALUES / TRIVSEL ==========
function Values() {
  const v = [
    { n: '01', h: 'Ingen er alene', p: 'Alle har en voksen-kontaktperson der ser dig hver dag.' },
    { n: '02', h: 'Ordblind er ikke en fejl', p: 'Det er en måde hjernen arbejder på. Vi lærer dig at bruge den.' },
    { n: '03', h: 'Fællesskab som fundament', p: 'Morgensamling, måltider, bål, musik — vi bygger det sammen.' },
    { n: '04', h: 'Frihed med retning', p: 'Du må prøve, fejle og prøve igen. Vi er der når du har brug for os.' },
  ];
  return (
    <section className="section" style={{paddingTop: 48, paddingBottom: 48}}>
      <div className="section-head">
        <div>
          <span className="eyebrow">Trivselsefterskolen</span>
          <h2>Fire ting vi <em>aldrig</em> går på kompromis med.</h2>
        </div>
      </div>
      <div className="values-grid">
        {v.map((x, i) => (
          <div className="value-item" key={i}>
            <div className="num">{x.n}</div>
            <div>
              <h3>{x.h}</h3>
              <p>{x.p}</p>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// ========== QUOTE ==========
function BigQuote() {
  return (
    <section className="big-quote">
      <div className="mark">"</div>
      <blockquote>
        Vi tog min søn med til besøg. Da vi gik derfra, sagde han: <em>'Her kan jeg godt være.'</em> Et år senere er han en helt anden dreng.
      </blockquote>
      <cite>— Karen, forælder til elev i 9. klasse</cite>
    </section>
  );
}

// ========== CTA + OPEN HOUSE ==========
function CTA() {
  return (
    <div className="cta-strip">
      <div>
        <div style={{fontSize: 13, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--sun)', fontWeight: 700, marginBottom: 14}}>Vi har ledige pladser</div>
        <h2>Kom på besøg.<br/>Kaffen står klar.</h2>
        <p>Ring, skriv eller kom forbi. Vi viser dig rundt — og du møder elever der fortæller, hvordan det rigtigt er.</p>
        <div className="btn-row">
          <a href="besog.html" className="btn btn-sun">Book et besøg</a>
          <a href="tel:+4574670466" className="btn btn-ghost" style={{borderColor: 'var(--cream)', color: 'var(--cream)'}}>Ring: 74 67 04 66</a>
        </div>
      </div>
      <div className="open-house-card">
        <div className="label">Næste åbent hus</div>
        <div className="date-big">18</div>
        <div className="month">maj 2026</div>
        <div className="divider"></div>
        <div className="meta-item">
          <svg className="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></svg>
          14:00 – 17:00
        </div>
        <div className="meta-item">
          <svg className="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0116 0z"/><circle cx="12" cy="10" r="3"/></svg>
          Tøndervej 239, Højer
        </div>
        <div className="meta-item">
          <svg className="ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M17 11a5 5 0 01-10 0"/><path d="M12 1v10"/><rect x="8" y="1" width="8" height="10" rx="4"/></svg>
          Elever fortæller live
        </div>
      </div>
    </div>
  );
}

// ========== FLOATING SPOTS BADGE (tweak variant) ==========
function FloatingSpots() {
  return (
    <a href="besog.html" style={{
      position: 'fixed', bottom: 100, left: 24, zIndex: 150,
      background: 'var(--sun)', color: 'var(--green-deep)',
      padding: '16px 22px', borderRadius: 999,
      fontWeight: 700, fontSize: 15, textDecoration: 'none',
      boxShadow: '0 8px 24px rgba(15,61,46,0.3)',
      display: 'flex', gap: 12, alignItems: 'center',
    }}>
      <span className="pulse" style={{width: 12, height: 12, background: 'var(--coral)'}}></span>
      Ledige pladser 26/27 →
    </a>
  );
}

// ========== APP ==========
function App() {
  const [tweaks, setTweaks] = useState(TWEAK_DEFAULTS);
  useEffect(() => {
    document.body.setAttribute('data-theme', tweaks.theme);
    document.body.setAttribute('data-tone', tweaks.tone);
  }, [tweaks]);

  return (
    <>
      {tweaks.spotsStyle === 'bar' && null /* spotsbar lives inside Topbar */}
      <Topbar current="forside" spotsStyle={tweaks.spotsStyle} />
      {tweaks.heroVariant === 'collage' && <HeroCollage />}
      {tweaks.heroVariant === 'fullvideo' && <HeroFullVideo />}
      {tweaks.heroVariant === 'audio' && <HeroAudio />}
      <ModalityStrip />
      <Approach />
      <VideoGrid />
      <Diary />
      <Schedule />
      <Values />
      <BigQuote />
      <CTA />
      <Footer />
      <A11yPanel />
      {tweaks.spotsStyle === 'floating' && <FloatingSpots />}
      <TweaksPanel tweaks={tweaks} setTweaks={setTweaks} />
    </>
  );
}

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