// ciclo. — App root

const App = () => {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  // Apply tweak-driven classes on body for global modifiers
  React.useEffect(() => {
    const cls = [
      `em-${tweaks.emerald || 'medium'}`,
      `tone-${tweaks.tone || 'default'}`,
      `theme-${tweaks.theme || 'light'}`,
    ];
    document.body.className = cls.join(' ');
  }, [tweaks.emerald, tweaks.tone, tweaks.theme]);

  // Pull headline pair
  const [hl1, hl2] = (HEADLINES[tweaks.headline] || HEADLINES['automatico']);

  return (
    <React.Fragment>
      <Header/>
      <main>
        <HeroVariant
          hl1={hl1}
          hl2={hl2}
          showWeek={tweaks.showWeek !== false}
        />
        <How/>
        <Kit/>
        <Plans/>
        <FAQ/>
        <CTAStrip/>
      </main>
      <Footer/>
      <Tweaks tweaks={tweaks} setTweak={setTweak}/>
    </React.Fragment>
  );
};

// Hero wrapper that injects tweak-driven copy
const HeroVariant = ({ hl1, hl2, showWeek }) => {
  // We patch the Hero output with custom headline + maybe-hidden week.
  return (
    <section id="top" className="hero">
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-eyebrow-row">
              <span className="eyebrow">
                <span className="dot"/>
                entrega grátis · todo domingo · são paulo
              </span>
              <span className="sep"/>
              <span className="meta">temporada 04 · 2026</span>
            </div>

            <h1 className="hero-display">
              <span className="hl-row">{hl1}</span>
              <span className="hl-row">
                {hl2.replace('.', '')}<span className="p">.</span>
              </span>
            </h1>

            <p className="hero-sub">
              kit trimestral de sacos de lixo, limpeza e refis. um quiz
              de 2 minutos, a gente monta — e por <em>3 meses</em> você
              não pensa nisso. próxima entrega num domingo.
            </p>

            <div className="hero-cta-row">
              <a href="#quiz" className="btn btn-primary">
                começar o quiz · 2 min
                <span className="arr"><Icon name="arrow-up-right" size={12}/></span>
              </a>
              <a href="#como" className="btn btn-secondary">como funciona</a>
              <span className="micro">
                <span className="check"><Icon name="check" size={9}/></span>
                cancela quando quiser
              </span>
            </div>
          </div>

          {showWeek && (
            <div className="hero-week">
              <div className="hero-week-head">
                <span className="ttl">o trimestre que se repete &nbsp;<em>— um kit, 12 semanas, um domingo</em></span>
                <span className="meta">sem 01 → 12 · domingo · reseta</span>
              </div>
              <div className="week-strip trimester-strip" role="img" aria-label="ciclo trimestral, 12 semanas até a próxima entrega de domingo">
                {(() => {
                  const weeks = Array.from({length: 12}, (_, i) => {
                    const n = i + 1;
                    return {
                      k: `s${n}`,
                      label: String(n).padStart(2, '0'),
                      stock: `${Math.max(4, Math.round(100 - (n-1) * 8))}%`,
                      size: 4 + i * 1.0,
                      sun: false,
                    };
                  });
                  weeks.push({ k: "dom", label: "dom", stock: "novo kit", size: 22, sun: true });
                  return weeks;
                })().map((d) => (
                  <div key={d.k} className={`week-day${d.sun ? ' sun' : ''}`}>
                    <span className="dot" style={{ width: d.size, height: d.size }}/>
                    <span className="label">{d.label}</span>
                    <span className="stock">{d.stock}</span>
                  </div>
                ))}
              </div>
              <div className="hero-badges">
                <span className="badge b-ink"><span className="ico"><Icon name="truck" size={11}/></span>frete grátis</span>
                <span className="badge b-paper">pula trimestres</span>
                <span className="badge b-paper">refis inclusos</span>
                <span className="badge b-mint"><span className="ico"><Icon name="repeat" size={11}/></span>troca itens</span>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>
  );
};

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