// Hverdagen — en dag på Emmerske, som tidslinje
const { useState, useEffect } = React;

function Timeline() {
  const items = [
    { t: '07:00', s: 'Vækning', h: 'God morgen!', p: 'En vågnevagt banker blidt på døren. Du har 30 minutter til at komme i gang. Morgenbad hvis du vil.', icon: <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="5"/><path d="M12 2v2M12 20v2M2 12h2M20 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4"/></svg> },
    { t: '07:30', s: 'Morgenmad', h: 'Havregrød, rugbrød, snak', p: 'Alle spiser sammen. Der er altid noget der griner højt ved bord 4.', icon: <svg viewBox="0 0 24 24"><path d="M4 11h16M4 11a8 8 0 0116 0M8 17h8M12 17v3"/></svg> },
    { t: '08:15', s: 'Morgensamling', h: 'Sang, beskeder, en historie', p: 'Vi synger fra højskolesangbogen. En elev eller lærer fortæller om noget der optager dem.', icon: <svg viewBox="0 0 24 24"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg> },
    { t: '09:00', s: 'Boglige fag', h: 'Dansk · Matematik · Sprog', p: 'Små hold. 6–10 elever. Læreren har tid til dig. Der er altid hjælpemidler på bordet — CD-ORD, oplæsning, AppWriter.', icon: <svg viewBox="0 0 24 24"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg> },
    { t: '12:00', s: 'Frokost', h: 'Vores køkkenhold har lavet maden', p: 'Eleverne hjælper på skift. Der er altid vegetarisk og glutenfri.', icon: <svg viewBox="0 0 24 24"><path d="M3 2v6a4 4 0 008 0V2M7 2v20M17 2v8a4 4 0 01-4 4v8"/></svg> },
    { t: '13:00', s: 'Linjefag', h: 'Vælg det du brænder for', p: 'Mountainbike · E-sport · Håndværk · Drama · Musik · Friluft · Køkken · Design.', icon: <svg viewBox="0 0 24 24"><circle cx="6" cy="18" r="3"/><circle cx="18" cy="18" r="3"/><path d="M6 18L12 6l6 12M12 6h4"/></svg> },
    { t: '15:30', s: 'Fri tid', h: 'Din tid', p: 'Spil FIFA, læg dig i græsset, ring til mor, tag en lur, gå en tur på diget.', 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> },
    { t: '17:45', s: 'Aftensmad', h: 'Alle spiser sammen', p: 'Uanset hvad, så mødes vi om maden. Det er vigtigt.', icon: <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M8 12h8M12 8v8"/></svg> },
    { t: '19:30', s: 'Aftenaktivitet', h: 'Noget forskelligt hver aften', p: 'Filmaften, bål, brætspil, cafe, fællesløb, disko. Altid noget — aldrig pligt.', icon: <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9"/><path d="M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4"/></svg> },
    { t: '22:30', s: 'Ro på gangen', h: 'God nat', p: 'Kontaktlærerne kommer forbi. Man må snakke lavt. Lyset slukkes 23:00.', icon: <svg viewBox="0 0 24 24"><path d="M21 12.8A9 9 0 1111.2 3a7 7 0 009.8 9.8z"/></svg> },
  ];
  return (
    <div className="timeline">
      {items.map((it, i) => (
        <div className="timeline-item" key={i}>
          <div className="time">{it.t}<small>{it.s}</small></div>
          <div className="icon-circle">{it.icon}</div>
          <div>
            <h3>{it.h}</h3>
            <p>{it.p}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

function HverdagHero() {
  return (
    <section className="page-hero">
      <div>
        <span className="eyebrow">Hverdagen</span>
        <h1>En dag,<br/>fra <em style={{color: 'var(--green-primary)', fontStyle: 'italic', fontWeight: 500}}>klokken 7</em><br/>til godnat.</h1>
      </div>
      <div>
        <p style={{fontSize: 19, color: 'var(--ink-soft)', maxWidth: 480}}>
          Alting har sin rytme. Og rytmen er vigtig — især når hjernen arbejder på sin egen måde. Her er hvordan en helt almindelig tirsdag ser ud.
        </p>
        <div style={{marginTop: 24}}>
          <ListenChip text="En dag fra klokken syv til godnat. Alting har sin rytme, og rytmen er vigtig — især når hjernen arbejder på sin egen måde. Her er hvordan en helt almindelig tirsdag ser ud." label="Lyt til hele siden" />
        </div>
      </div>
    </section>
  );
}

function LinjefagGrid() {
  const fag = [
    { n: 'Mountainbike', e: '🚵', c: 'warm' },
    { n: 'E-sport', e: '🎮', c: 'sky' },
    { n: 'Håndværk', e: '🔨', c: 'sun' },
    { n: 'Drama', e: '🎭', c: '' },
    { n: 'Musik & band', e: '🎸', c: 'warm' },
    { n: 'Friluft', e: '🏕️', c: 'sky' },
    { n: 'Køkken', e: '👨‍🍳', c: 'sun' },
    { n: 'Design', e: '✏️', c: '' },
  ];
  return (
    <section className="section" style={{paddingTop: 48}}>
      <div className="section-head">
        <div>
          <span className="eyebrow">Linjefag</span>
          <h2>Vælg det du <em>brænder for</em>.</h2>
        </div>
        <p className="section-sub">Du vælger to linjefag om året. De fylder fire timer om ugen — og bliver ofte det du husker bedst.</p>
      </div>
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16}}>
        {fag.map((f, i) => (
          <div key={i} style={{
            borderRadius: 'var(--radius-m)',
            overflow: 'hidden',
            aspectRatio: '1',
            position: 'relative',
            cursor: 'pointer',
          }}>
            <div className={"photo " + f.c} style={{height: '100%'}}>
              <div style={{position: 'absolute', top: 20, left: 20, fontSize: 56}}>{f.e}</div>
              <div style={{position: 'absolute', bottom: 20, left: 20, right: 20, fontFamily: 'var(--font-display)', fontSize: 24, fontWeight: 600, color: 'var(--green-deep)'}}>{f.n}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function App() {
  return (
    <>
      <Topbar current="hverdag" />
      <HverdagHero />
      <Timeline />
      <LinjefagGrid />
      <section className="big-quote">
        <div className="mark">"</div>
        <blockquote>Det bedste ved hverdagen er, at man ikke er alene med noget. Heller ikke det svære.</blockquote>
        <cite>— Oscar, 10. klasse</cite>
      </section>
      <Footer />
      <A11yPanel />
    </>
  );
}

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