// FAQ — accordion with 7 questions, single-open behavior
// Pricing question explicitly addresses the "no public pricing" stance.
const { useState: useFaqState } = React;

function FaqItem({ q, a, isOpen, onToggle, idx }) {
  return (
    <div style={{
      borderBottom: '1px solid var(--border-subtle)',
      borderLeft: isOpen ? '2px solid var(--accent)' : '2px solid transparent',
      paddingLeft: '20px',
      transition: 'border-left-color 300ms cubic-bezier(0.65, 0, 0.35, 1)',
    }}>
      <button
        onClick={onToggle}
        aria-expanded={isOpen}
        style={{
          width: '100%',
          background: 'transparent', border: 'none',
          padding: '24px 0',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: '24px',
          cursor: 'pointer',
          textAlign: 'left',
          color: 'inherit',
        }}
      >
        <span style={{
          display: 'flex', alignItems: 'baseline', gap: '14px',
          flex: 1,
        }}>
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: '11px',
            color: 'var(--text-tertiary)', letterSpacing: '0.12em',
            minWidth: '24px',
          }}>{idx}</span>
          <span style={{
            fontFamily: 'var(--font-display)', fontWeight: 600,
            fontSize: 'clamp(18px, 2vw, 22px)',
            letterSpacing: '-0.01em',
            color: 'var(--text-primary)',
            lineHeight: 1.3,
          }}>{q}</span>
        </span>
        <span style={{
          width: '24px', height: '24px',
          display: 'grid', placeItems: 'center',
          color: isOpen ? 'var(--accent)' : 'var(--text-tertiary)',
          transform: `rotate(${isOpen ? 45 : 0}deg)`,
          transition: 'transform 400ms cubic-bezier(0.65, 0, 0.35, 1), color 300ms',
          fontSize: '20px', fontWeight: 300, lineHeight: 1,
          flexShrink: 0,
        }}>+</span>
      </button>
      <div style={{
        overflow: 'hidden',
        maxHeight: isOpen ? '400px' : '0',
        opacity: isOpen ? 1 : 0,
        transition: 'max-height 500ms cubic-bezier(0.65, 0, 0.35, 1), opacity 400ms cubic-bezier(0.65, 0, 0.35, 1)',
      }}>
        <div style={{
          paddingLeft: '38px',
          paddingBottom: '28px',
          paddingRight: '48px',
          fontFamily: 'var(--font-body)', fontSize: '16px',
          color: 'var(--text-secondary)', lineHeight: 1.6,
          maxWidth: '64ch',
        }}>{a}</div>
      </div>
    </div>
  );
}

function FAQ() {
  const items = [
    {
      q: 'Kolik to stojí?',
      a: 'Cena je individuální. Záleží na rozsahu, formátech a deadline. Žádné fixní balíčky, žádné ceníky. Když si tě bereme, řešíme cenu na hovoru po přijetí žádosti.',
    },
    {
      q: 'Jak rychle dodáváte?',
      a: 'První vlna výstupů obvykle do 5 pracovních dnů od potvrzeného briefu. Plná sada (varianty pro celý mediální plán) do 14 dnů. U urgentních kampaní řešíme individuálně.',
    },
    {
      q: 'Pracujete pod NDA a whitelabel?',
      a: 'Ano, default. Pro agentury i přímé klienty. Tvůj klient o nás nemusí vědět — výstupy jdou přímo k tobě, bez naší značky, bez metadata stop.',
    },
    {
      q: 'Co když nemám reklamní účty ke sdílení?',
      a: 'Sedneme si s tím, co máš — Google Analytics, e-shop data, předchozí kampaně, nebo jen brief. Ideál je access do účtů, ale není to podmínka. Hlavně musíme vědět, kdo je publikum a co u nich funguje.',
    },
    {
      q: 'Co všechno mi vyrobíte z jednoho briefu?',
      a: 'Obvykle 15–30 variant napříč formáty: video hooky pro Meta a TikTok, statické bannery pro display a social, motion ads pro programmatic, případně AI avatary pro UGC styl. Z jednoho podkladu kompletní sadu.',
    },
    {
      q: 'Jak vypadá revize?',
      a: 'Jedno kolo úprav v ceně po prvním dodání. Konkrétní připomínky (hook silnější, CTA výrazněji, logo větší) — doladíme. Další kola za hodinovou sazbu, ale obvykle nejsou potřeba.',
    },
    {
      q: 'Co když mě nepřijmete?',
      a: 'Doporučíme jinam. Slušně, do 48 hodin, bez ghostingu. Buď tě navedeme na mateřský Galandr (klasická kreativa, web, performance), nebo na partnery, kteří dělají, co my ne.',
    },
  ];

  const [openIdx, setOpenIdx] = useFaqState(0);

  return (
    <section data-screen-label="08 FAQ" style={{
      maxWidth: '960px', margin: '0 auto',
      padding: '65px 32px',
    }}>
      <NumberedHeader
        num="06"
        title="Časté otázky."
        sub="Co se nejčastěji ptají před tím, než pošlou žádost."
      />
      <div style={{ marginTop: '24px' }}>
        {items.map((it, i) => (
          <Reveal key={i} delay={i * 60} y={20}>
            <FaqItem
              q={it.q}
              a={it.a}
              idx={(i + 1).toString().padStart(2, '0')}
              isOpen={openIdx === i}
              onToggle={() => setOpenIdx(openIdx === i ? -1 : i)}
            />
          </Reveal>
        ))}
      </div>
    </section>
  );
}

window.FAQ = FAQ;