// ─── COPY ────────────────────────────────────────────────
const COPY = {
  direct: {
    heroCta: 'Přidej se na další setkání',
    heroCtaSecondary: 'Co to obnáší',
    heroLine1: 'Strhni masku.',
    heroLine2: 'Najdi své lidi.',
    heroSub1: 'Žádný doktor. Žádné rady. Žádné „lifehacky".',
    heroSub2: 'Jen komunita lidí s ADHD, kteří se pravidelně potkávají, sdílejí realitu všedního dne a zjišťují, že v tom nejsou sami.',
    eveningTag: '§ Setkání',
    eveningH: ['Jedno místo, jeden čas.', 'Tvoji lidé už tam', 'možná sedí.'],
    eveningEm: 'Tvoji lidé',
    eveningCta: 'Zarezervuj si místo',
    ctaTag: '§ Přidej se',
    ctaH: ['Přijď se jen', 'podívat.'],
    ctaEm: 'jen',
    ctaEm2: 'podívat.',
    ctaButton: 'Otevřít formulář',
    ctaNote: '↳ ~3 minuty · Google Forms',
  },
  call: {
    heroCta: 'Pojďme si zavolat',
    heroCtaSecondary: 'Jak to chodí',
    heroLine1: 'Strhni masku.',
    heroLine2: 'Najdi své lidi.',
    heroSub1: 'Komunita lidí s ADHD, kteří se pravidelně potkávají, sdílejí realitu všedního dne a zjišťují, že v tom nejsou sami.',
    heroSub2: 'Svépomocná ADHD skupina',
    eveningTag: '§ První krok',
    eveningH: ['Nejdřív', 'Pak se rozhodneš'],
    eveningEm: 'krátký hovor.',
    eveningCta: 'Domluvme si hovor',
    ctaTag: '§ Pojďme se slyšet',
    ctaH: ['15 minut.', 'Bez závazku.'],
    ctaEm: '15 minut.',
    ctaEm2: 'Bez závazku.',
    ctaButton: 'Domluvit si hovor',
    ctaNote: '↳ ~15 minut · Telefon nebo video · Bez závazku',
  },
};

/* eslint-disable no-undef */
// sections.jsx — lean layout

function Nav() {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="#top" className="brand">
          ad<span className="slash italic">-</span>hd
        </a>
        <div className="nav-links">
          <a href="#evening">Setkání</a>
          <a href="#whatyouget">Jaké to je</a>
          <a href="#whothisis">Pro koho</a>
          <a href="#faq">FAQ</a>
        </div>
        <a href="#join" className="nav-cta">Přidej se →</a>
      </div>
    </nav>
  );
}

const Arrow = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
    <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

function Hero({ formUrl, copy }) {
  const c = COPY[copy] || COPY.direct;
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="eyebrow">
          <span className="dot"></span>
          Svépomocná komunita pro ADHD · Praha 1
        </div>

        <h1>
          {c.heroLine1}<br />
          <span className="accent">{c.heroLine2}</span>
        </h1>

        <div className="hero-sub">
          <p>{c.heroSub1}</p>
          <p>{c.heroSub2}</p>
        </div>

        <div className="hero-actions">
          <a href={formUrl} target="_blank" rel="noreferrer" className="btn btn-primary">
            {c.heroCta}<span className="arrow"><Arrow /></span>
          </a>
          <a href="#evening" className="btn btn-ghost">
            {c.heroCtaSecondary}
          </a>
        </div>

        <div className="hero-meta-strip">
          <span>Úterky · 18:00</span>
          <span className="sep">✦</span>
          <span>Skautský institut, Staromák</span>
          <span className="sep">✦</span>
          <span>Dobrovolný příspěvek</span>
          <span className="sep">✦</span>
          <span>~1× za 3 týdny</span>
        </div>
      </div>
    </section>
  );
}

function PhotoStrip() {
  const tiles = [
    'Sdílení', 'Realita', 'Mlčení', 'Lehkost', 'Důvěra', 'Klid',
  ];
  return (
    <section className="strip" aria-label="Atmosféra setkání">
      <div className="container">
        <div className="strip-inner">
          {tiles.map((t, i) => (
            <div className="tile" key={i}>
              <span className="caption">{t}</span>
            </div>
          ))}
        </div>
        <p className="strip-foot"> </p>
      </div>
    </section>
  );
}

function Evening({ formUrl, copy }) {
  const c = COPY[copy] || COPY.direct;
  const callMode = copy === 'call';
  const next = [
    { d: 1, m: 'TBA' },
    { d: 1, m: 'TBA', now: true },
    { d: 1, m: 'TBA' },
    { d: 1, m: 'TBA' },
    { d: 1, m: 'TBA' },
    { d: 1, m: 'TBA' },
  ];
  return (
    <section className="section" id="evening">
      <div className="container">
        <div className="section-tag">{c.eveningTag}</div>
        <h2>
          {c.eveningH[0]}
          <em>{c.eveningEm}</em> <br /> {c.eveningH[1].replace(c.eveningEm, '')}
          {c.eveningH[2]}
        </h2>

        {callMode && (
          <div className="call-card">
            <div className="call-meta">
              <span className="call-meta-k">Hovor</span>
              <span className="call-meta-v"><strong>15 min</strong> · telefon nebo video</span>
            </div>
            <div className="call-meta">
              <span className="call-meta-k">O čem</span>
              <span className="call-meta-v">Jak u nás skupiny chodí. Co čekat a co ne. Tvoje otázky.</span>
            </div>
            <div className="call-meta">
              <span className="call-meta-k">Bez tlaku</span>
              <span className="call-meta-v">Žádný závazek. Poté se rozhodneš ty.</span>
            </div>
            <div className="call-meta">
              <span className="call-meta-k">Kdo</span>
              <span className="call-meta-v">Člověk z komunity, ne odborník. Sdílí s tebou reálný pohled.</span>
            </div>
            <a href={formUrl} target="_blank" rel="noreferrer" className="btn btn-primary">
              {c.eveningCta}<span className="arrow"><Arrow /></span>
            </a>
          </div>
        )}

        <div className="event">
          <div className="event-main">
            <div className="event-when">
              Úterý<br /><em>TBA</em><br />18:00
            </div>
            <div className="event-rows">
              <div className="event-row">
                <span className="k">Kdy</span>
                <span className="v"><strong>TBA · 18:00</strong><br />~90 minut</span>
              </div>
              <div className="event-row">
                <span className="k">Kde</span>
                <span className="v"><strong>Skautský institut</strong><br />Staroměstské nám. 4/1, Praha 1</span>
              </div>
              <div className="event-row">
                <span className="k">Cena</span>
                <span className="v"><strong>Zdarma.</strong> Dobrovolný příspěvek vítán, ne povinný.</span>
              </div>
              <div className="event-row">
                <span className="k">Příprava</span>
                <span className="v"><strong>Nic.</strong> Stačí přijít. Můžeš i jen mlčet.</span>
              </div>
              <div className="event-row">
                <span className="k">Rytmus</span>
                <span className="v">~1× za 3 týdny · vždy úterý 18:00</span>
              </div>
            </div>
            {!callMode && (
              <a href={formUrl} target="_blank" rel="noreferrer" className="btn btn-primary" style={{ alignSelf: 'flex-start' }}>
                {c.eveningCta}<span className="arrow"><Arrow /></span>
              </a>
            )}
            {callMode && (
              <div className="event-tip">
                ↳ Pokud po hovoru budeš chtít přijít, doraziš sem.
              </div>
            )}
          </div>

          <div className="event-aside">
            <div>
              <div className="section-tag" style={{ marginBottom: 16 }}>Další termíny</div>
              <h3>Nejbližší<br /><em>setkání</em></h3>
            </div>
            <div className="next-dates">
              {next.map((d, i) => (
                <div className={'next-date' + (d.now ? ' now' : '')} key={i}>
                  <span className="d">{d.d}</span>
                  <span className="m">{d.m} · Út</span>
                </div>
              ))}
            </div>
            <p style={{ fontFamily: 'var(--mono)', fontSize: 11, letterSpacing: '0.08em', color: 'var(--ink-muted)', textTransform: 'uppercase' }}>
              Termíny se mohou drobně posouvat, aktuální stav po přihlášení.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function WhatYouGet() {
  const items = [
    { h: 'Lidi, kteří chápou bez vysvětlování.', p: 'Konečně nikomu nemusíš dokazovat, že tvůj mozek funguje jinak. Tady to ostatní znají zevnitř.' },
    { h: 'Místo, kde nemusíš nic hrát.', p: 'Žádný výkon, žádné role. Můžeš přijít unavený, rozhozený, nebo skvěle naladěný. Všechno je v pořádku.' },
    { h: 'Rytmus, který drží.', p: 'Pravidelné úterý jednou za tři týdny. Stačí dorazit. Žádná příprava, žádné domácí úkoly.' },
    { h: 'Realitu, ne teorii.', p: 'Mluvíme o tom, co se nám děje teď. Žádné přednášky o time-managementu — ten sami neumíme.' },
  ];
  return (
    <section className="section" id="whatyouget">
      <div className="container">
        <div className="section-tag">§ Jaké to je</div>
        <h2>
          Nepotřebuješ další<br />
          plán. Potřebuješ <em>parťáky.</em>
        </h2>

        <ul className="bullets">
          {items.map((it, i) => (
            <li className="bullet" key={i}>
              <span className="arrow">→</span>
              <div>
                <h4>{it.h}</h4>
                <p>{it.p}</p>
              </div>
            </li>
          ))}
        </ul>
      </div>
    </section>
  );
}

function WhoThisIs() {
  return (
    <section className="section" id="whothisis">
      <div className="container">
        <div className="section-tag">§ Pro koho to je</div>
        <h2>
          Není to <em>pro všechny.</em><br />
          A to je v pořádku.
        </h2>

        <div className="who">
          <div>
            <h3>Hodí se ti, pokud</h3>
            <ul>
              <li>Žiješ s ADHD (s diagnózou nebo bez)</li>
              <li>Chceš sdílet s lidmi, kteří to znají</li>
              <li>Hledáš pravidelný rytmus a&nbsp;komunitu</li>
              <li>Jsi v relativně stabilním stavu</li>
              <li>Stačí ti přítomnost, nechceš „experta"</li>
            </ul>
          </div>
          <div className="not">
            <h3 className="warn">Není to pro tebe, pokud</h3>
            <ul>
              <li>Procházíš akutní krizí (potřebuješ klinickou péči)</li>
              <li>Hledáš terapeuta nebo diagnostiku</li>
              <li>Chceš přednášku o time-managementu</li>
              <li>Hledáš coaching nebo „lifehacky"</li>
              <li>Nechceš respektovat hranice ostatních</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

function Akrasia() {
  return (
    <section className="section" id="akrasia">
      <div className="container">
        <div className="section-tag">§ Bezpečí</div>
        <h2>
          Organizujeme to <em>my.</em><br />
          Záda nám drží<br />
          Akrasia.
        </h2>

        <div className="akrasia-lean">
          <div className="akrasia-lockup">
            <span className="kind">Odborný garant</span>
            <span className="name">Akrasia</span>
            <span className="meta">Evidence-based · standardy bezpečí</span>
          </div>
          <div className="akrasia-text">
            <p>
              Skupinu organizují nadšenci z&nbsp;komunity ve svém volném čase.
              Aby to bylo pro každého z&nbsp;nás dlouhodobě bezpečné, fungujeme
              pod hlavičkou <em className="italic" style={{ fontFamily: 'var(--serif)', fontSize: '1.05em' }}>Akrasie</em>.
            </p>
            <p>
              Akrasia drží metodiky, supervize, standardy bezpečí a&nbsp;síť skupin po ČR.
              Žádná ezoterika. Žádné „čištění energií".
            </p>
            <a className="more" href="#">Více o Akrasii →</a>
          </div>
        </div>
      </div>
    </section>
  );
}

function CTA({ formUrl, copy }) {
  const c = COPY[copy] || COPY.direct;
  return (
    <section className="cta" id="join">
      <div className="container">
        <div className="section-tag">{c.ctaTag}</div>
        <h2>
          <em>{c.ctaEm}</em><br />
          <em>{c.ctaEm2}</em>
        </h2>
        <div className="cta-meta">
          {copy === 'call' ? (
            <React.Fragment>
              <span>15 minut</span>
              <span className="sep">✦</span>
              <span>Telefon nebo video</span>
              <span className="sep">✦</span>
              <span>Bez závazku</span>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <span>Út · TBA · 18:00</span>
              <span className="sep">✦</span>
              <span>Skautský institut, Praha 1</span>
            </React.Fragment>
          )}
        </div>
        <a href={formUrl} target="_blank" rel="noreferrer" className="btn btn-primary">
          {c.ctaButton}<span className="arrow"><Arrow /></span>
        </a>
        <p style={{
          marginTop: 24,
          fontFamily: 'var(--mono)',
          fontSize: 11,
          letterSpacing: '0.1em',
          color: 'var(--ink-muted)',
          textTransform: 'uppercase',
        }}>
          {c.ctaNote}
        </p>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="foot">
      <div className="container">
        <div className="foot-inner">
          <span>© 2026 ad-hd.cz</span>
          <span><a>TBA</a></span>
          <span>Krize? · Linka 116 123</span>
        </div>
      </div>
    </footer>
  );
}

function FAQ() {
  const [open, setOpen] = React.useState(0);
  const items = [
    { q: 'Je to terapie?', a: 'Ne. Svépomocná skupina není terapie a nenahrazuje ji. Není tam psycholog ani psychiatr. Je to bezpečný prostor pro vzájemné sdílení mezi lidmi s ADHD.' },
    { q: 'Musím mít diagnózu?', a: 'Ne nutně. Skupina je pro lidi, kteří se v ADHD poznávají, ať už diagnostikovaní, v procesu, nebo silně rezonující. Důležitější než papír je, aby ti to dávalo smysl.' },
    { q: 'Co když jen přijdu a budu mlčet?', a: 'Naprosto v pořádku. Mluvit můžeš, ale nemusíš. Být přítomný/á a poslouchat je plnohodnotné. Nikdo tě nebude do ničeho tlačit.' },
    { q: 'Kolik to stojí?', a: 'Jdeme cestou "doporučené výše příspěvku". Posílej ale podle toho, jak ti to finančně vyjde, nijak to neevidujeme ani to nikomu nebudeme "čárkovat. Finance by neměly být překážkou.' },
    { q: 'Co když mám akutní krizi?', a: 'Skupina není náhrada klinické péče v krizi. Pokud zrovna procházíš akutní fází, kontaktuj odbornou pomoc (Linka první psychické pomoci 116 123) a vrať se k nám, až budeš ve stabilizovanějším stavu.' },
    { q: 'Kdo skupinu vede?', a: 'Střídáme se, můžeš to být i ty! Takže facilitátoři jsou lidé z komunity, nadšenci s vlastní zkušeností s ADHD. Nejsou to terapeuti. Drží prostor, ne expertízu.' },
    { q: 'Co je Akrasia?', a: 'Organizace, pod jejíž hlavičkou funguje síť svépomocných skupin. Drží metodiky, supervize, standardy bezpečí a evidence-based přístup. Nepředepisuje obsah našich setkání.' },
    { q: 'Můžu si založit vlastní skupinu?', a: 'Jo. Pokud se ve tvém okolí nikdo nepotkává a chceš to změnit, ozvi se přes formulář. Akrasia tě podpoří metodikou a zázemím.' },
  ];
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-tag">§ FAQ</div>
        <h2>
          Časté otázky.<br />
          <em>Stručně.</em>
        </h2>

        <div className="faq-list">
          {items.map((it, i) => (
            <div
              key={i}
              className={'faq-item' + (open === i ? ' open' : '')}
              onClick={() => setOpen(open === i ? -1 : i)}
            >
              <div className="faq-q">
                <span className="faq-q-text">{it.q}</span>
                <span className="faq-toggle" aria-hidden="true">{open === i ? '–' : '+'}</span>
              </div>
              <div className="faq-a"><div>{it.a}</div></div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, PhotoStrip, Evening, WhatYouGet, WhoThisIs, Akrasia, FAQ, CTA, Footer });