/* global React */
const { useState: useStateLanding, useEffect: useEffectLanding, useRef: useRefLanding } = React;

// ============================================================
// HERO
// ============================================================
function Hero({ style = 'split' }) {
  return (
    <section className="block hero-wrap" style={{ paddingTop: 56, paddingBottom: 64 }}>
      <div className="container">
        <div className={`hero hero--${style}`}>
          <div className="hero-text">
            <span className="eyebrow" style={{ marginBottom: 18, display: 'inline-block' }}>Assinatura · Gestação</span>
            <h1 className="h-display" style={{ marginTop: 12, marginBottom: 24 }}>
              A gravidez<br/>como experiência<br/>de <em>bem-estar.</em>
            </h1>
            <p className="lead" style={{ marginBottom: 36 }}>
              Uma caixa por mês com curadoria sincronizada com a sua semana gestacional, rituais
              de cuidado e uma comunidade — para você viver cada fase com mais leveza, até depois do parto.
            </p>
            <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap', marginBottom: 40 }}>
              <a href="quiz.html" className="btn btn-primary btn-lg">Começar minha assinatura</a>
              <a href="#caixas" className="btn btn-ghost btn-lg">Ver o que vem na caixa</a>
            </div>
            <div className="hero-trust">
              <div className="hero-trust-item">
                <Icon name="leaf" />
                <span>Produtos<br/>conscientes</span>
              </div>
              <div className="hero-trust-item">
                <Icon name="heart" />
                <span>Para mãe<br/>e bebê</span>
              </div>
              <div className="hero-trust-item">
                <Icon name="sparkle" />
                <span>Validação<br/>médica</span>
              </div>
              <div className="hero-trust-item">
                <Icon name="hand" />
                <span>Cuidado<br/>acolhedor</span>
              </div>
            </div>
          </div>
          <div className="hero-photo">
            <div className="photo hero-photo-main">
              <img src="assets/hero-belly.jpg" alt="Mãe acariciando a barriga" />
            </div>
            <div className="hero-photo-card">
              <span className="kicker" style={{ fontSize: 22 }}>Oi, mãe.</span>
              <p style={{ fontSize: 14, color: 'var(--ink-soft)', margin: '8px 0 0', lineHeight: 1.5 }}>
                Você não precisa viver essa jornada sozinha.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function Icon({ name }) {
  const p = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round" };
  if (name === 'leaf') return <svg {...p}><path d="M11 20A7 7 0 0 1 4 13c0-7 7-9 16-9 0 9-2 16-9 16Z"/><path d="M2 22c5-5 8-7 14-9"/></svg>;
  if (name === 'heart') return <svg {...p}><path d="M19 14c1.5-1.45 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>;
  if (name === 'heart-fill') return <svg {...p} fill="currentColor"><path d="M19 14c1.5-1.45 3-3.2 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>;
  if (name === 'sparkle') return <svg {...p}><path d="M12 3v18M3 12h18M5.6 5.6l12.8 12.8M18.4 5.6 5.6 18.4"/></svg>;
  if (name === 'hand') return <svg {...p}><path d="M18 11V6a2 2 0 0 0-4 0v5"/><path d="M14 10V4a2 2 0 0 0-4 0v6"/><path d="M10 10.5V6a2 2 0 0 0-4 0v8"/><path d="M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-1.7-6-3l-3.6-4.5C2 13 3 11 4.5 11c.7 0 1.5.4 2 1L8 13"/></svg>;
  if (name === 'check') return <svg {...p}><path d="M20 6 9 17l-5-5"/></svg>;
  if (name === 'arrow') return <svg {...p}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
  if (name === 'plus') return <svg {...p}><path d="M12 5v14M5 12h14"/></svg>;
  if (name === 'minus') return <svg {...p}><path d="M5 12h14"/></svg>;
  if (name === 'quote') return <svg {...p}><path d="M3 21c3 0 7-1 7-8V5c0-1.25-.756-2.017-2-2H4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2 1 0 1 0 1 1v1c0 1-1 2-2 2s-1 .008-1 1.031V20c0 1 0 1 1 1z"/><path d="M15 21c3 0 7-1 7-8V5c0-1.25-.757-2.017-2-2h-4c-1.25 0-2 .75-2 1.972V11c0 1.25.75 2 2 2h.75c0 2.25.25 4-2.75 4v3c0 1 0 1 1 1z"/></svg>;
  return null;
}

// ============================================================
// MANIFESTO STRIP
// ============================================================
function ManifestoStrip() {
  return (
    <section style={{ background: 'var(--vinculo)', color: 'var(--leveza)', padding: '80px 0' }}>
      <div className="container" style={{ textAlign: 'center' }}>
        <span style={{
          fontFamily: 'var(--font-serif)', fontStyle: 'italic', fontSize: 20,
          color: 'var(--acolhimento)', letterSpacing: '0.04em'
        }}>~ manifesto ~</span>
        <h2 className="h-section" style={{
          color: 'var(--leveza)', marginTop: 24, fontWeight: 400, maxWidth: 900, marginLeft: 'auto', marginRight: 'auto'
        }}>
          Você <em style={{ color: 'var(--acolhimento)', fontStyle: 'italic' }}>não precisa</em> viver
          essa jornada <em style={{ color: 'var(--acolhimento)', fontStyle: 'italic' }}>sozinha.</em>
        </h2>
        <p style={{
          maxWidth: 620, margin: '32px auto 0', color: 'rgba(255,255,255,0.75)',
          fontSize: 17, lineHeight: 1.6
        }}>
          A UAUBaby existe para acompanhar você — com cuidado emocional, curadoria sensível
          e uma comunidade que reconhece a mulher por trás da maternidade.
        </p>
      </div>
    </section>
  );
}

// ============================================================
// COMO FUNCIONA — Timeline das 4 caixas
// ============================================================
const TRIMESTRES = [
  {
    fase: '1º trimestre',
    semanas: 'sem 0 — 12',
    titulo: 'Acolher',
    desc: 'Náusea, cansaço e ansiedade. A primeira caixa reúne os suplementos essenciais da gestação e o autocuidado de base para começar com segurança.',
    cor: 'var(--sopro)',
    items: ['Polivitamínico gestacional', 'Ômega 3', 'Cálcio + vitamina D', 'Protetor solar'],
  },
  {
    fase: '2º trimestre',
    semanas: 'sem 13 — 27',
    titulo: 'Florescer',
    desc: 'A energia volta e a barriga aparece. A curadoria entra com prevenção de estrias e o reforço de ferro que o corpo passa a pedir.',
    cor: 'var(--acolhimento)',
    items: ['Creme anti-estrias', 'Suplemento de ferro', 'Polivitamínico gestacional', 'Ômega 3'],
  },
  {
    fase: '3º trimestre',
    semanas: 'sem 28 — 40',
    titulo: 'Preparar',
    desc: 'Reta final, pés inchados e o corpo pesado. Itens de alívio e cuidado para chegar ao parto mais leve.',
    cor: 'var(--ritual)',
    items: ['Creme para os pés', 'Bola de massagem plantar', 'Creme anti-estrias', 'Suplemento de ferro'],
  },
  {
    fase: 'Pós-parto',
    semanas: '0 — 3 meses',
    titulo: 'Voltar para você',
    desc: 'A caixa que ninguém te dá: cuidado para a mulher que acabou de nascer — amamentação, recuperação e o corpo no puerpério.',
    cor: 'var(--vinculo)',
    items: ['Lanolina para amamentação', 'Concha de amamentação', 'Absorvente de seio', 'Suplemento anti-queda capilar'],
    dark: true,
  },
  {
    fase: 'Bebê',
    semanas: '3 — 6 meses',
    titulo: 'Crescer juntos',
    desc: 'O bebê desperta para o mundo. A caixa passa a cuidar dele — banho, pele e os primeiros estímulos — sem deixar a mãe de lado.',
    cor: 'var(--acolhimento)',
    items: ['Shampoo e sabonete infantil', 'Loção hidratante infantil', 'Brinquedo sensorial', 'Naninha de conforto'],
  },
];

function ComoFunciona() {
  const scroller = useRefLanding(null);
  const [atStart, setAtStart] = useStateLanding(true);
  const [atEnd, setAtEnd] = useStateLanding(false);

  const updateArrows = () => {
    const el = scroller.current;
    if (!el) return;
    setAtStart(el.scrollLeft <= 4);
    setAtEnd(el.scrollLeft + el.clientWidth >= el.scrollWidth - 4);
  };

  useEffectLanding(() => {
    updateArrows();
    const el = scroller.current;
    if (!el) return;
    el.addEventListener('scroll', updateArrows, { passive: true });
    window.addEventListener('resize', updateArrows);
    return () => {
      el.removeEventListener('scroll', updateArrows);
      window.removeEventListener('resize', updateArrows);
    };
  }, []);

  const scrollByCards = (dir) => {
    const el = scroller.current;
    if (!el) return;
    const card = el.querySelector('.trimestre-card');
    const amount = card ? card.offsetWidth + 16 : el.clientWidth * 0.8;
    el.scrollBy({ left: dir * amount, behavior: 'smooth' });
  };

  return (
    <section className="block" id="caixas">
      <div className="container">
        <div className="section-head">
          <div>
            <span className="eyebrow">A jornada</span>
            <h2 className="h-section" style={{ marginTop: 16 }}>
              Uma caixa por mês.<br/>
              <em style={{ fontStyle: 'italic', color: 'var(--ritual)' }}>Curadoria por trimestre.</em>
            </h2>
          </div>
          <p className="lead">
            Você recebe uma caixa todo mês, do começo da gestação até os seis meses do bebê.
            A curadoria evolui com você — três fases durante a gravidez, uma para o seu retorno
            no pós-parto e outra para os primeiros meses ao lado do bebê.
          </p>
        </div>

        <div className="trimestre-carousel">
          <button
            type="button"
            className="trimestre-arrow trimestre-arrow--prev"
            onClick={() => scrollByCards(-1)}
            disabled={atStart}
            aria-label="Caixa anterior"
          >‹</button>

          <div className="trimestre-grid" ref={scroller}>
            {TRIMESTRES.map((t, i) => (
              <article key={i} className={`trimestre-card ${t.dark ? 'is-dark' : ''}`} style={{ background: t.cor }}>
                <div className="trimestre-num">0{i+1}</div>
                <div>
                  <span className="trimestre-fase">{t.fase}</span>
                  <h3 className="h-card trimestre-titulo" style={{ fontSize: 28, marginTop: 4, marginBottom: 6, color: t.dark ? 'var(--essencia)' : 'var(--vinculo-deep)' }}>
                    {t.titulo}
                  </h3>
                  <span className="trimestre-semanas">{t.semanas}</span>
                  <p className="trimestre-desc" style={{ marginTop: 16, marginBottom: 20, fontSize: 14.5, lineHeight: 1.55 }}>{t.desc}</p>
                  <ul className="trimestre-items">
                    {t.items.map(it => (
                      <li key={it}>
                        <Icon name="check" />
                        <span>{it}</span>
                      </li>
                    ))}
                  </ul>
                </div>
              </article>
            ))}
          </div>

          <button
            type="button"
            className="trimestre-arrow trimestre-arrow--next"
            onClick={() => scrollByCards(1)}
            disabled={atEnd}
            aria-label="Próxima caixa"
          >›</button>
        </div>
      </div>
    </section>
  );
}

// ============================================================
// O QUE VEM NA CAIXA — preview com foto
// ============================================================
function NaCaixa() {
  return (
    <section className="block" style={{ background: 'var(--sopro)' }}>
      <div className="container">
        <div className="naxcaixa-grid">
          <div className="naxcaixa-photo">
            <div className="photo">
              <img src="assets/box.jpg" alt="A caixa UAUBaby aberta com seus itens" />
            </div>
            <div className="naxcaixa-caption">
              <span className="kicker" style={{ fontSize: 17 }}>"Você está segura aqui."</span>
              <span style={{ fontSize: 13, color: 'var(--ink-mute)', marginTop: 6 }}>— cartão da 1ª caixa</span>
            </div>
          </div>
          <div className="naxcaixa-text">
            <span className="eyebrow">A caixa</span>
            <h2 className="h-section" style={{ marginTop: 16, marginBottom: 24 }}>
              Cuidado <em style={{ fontStyle: 'italic', color: 'var(--ritual)' }}>organizado</em><br/>
              para viver cada fase.
            </h2>
            <p className="lead" style={{ marginBottom: 32 }}>
              Cada caixa traz entre 5 e 8 itens curados por especialistas: produtos de cuidado pessoal,
              um ritual de bem-estar, conteúdo impresso e acesso a sessões com nossa equipe clínica.
            </p>
            <div className="naxcaixa-features">
              <FeatureLine icon="leaf" titulo="Curadoria consciente" desc="Marcas brasileiras, ingredientes naturais e selo de segurança para gestantes." />
              <FeatureLine icon="heart" titulo="Para a mulher, não só para o bebê" desc="50% dos itens cuidam de você. Os outros 50%, do enxoval e do bebê." />
              <FeatureLine icon="sparkle" titulo="Ritual em cada entrega" desc="Cartão escrito à mão, embalagem reutilizável e um pequeno gesto de pausa." />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function FeatureLine({ icon, titulo, desc }) {
  return (
    <div style={{ display: 'flex', gap: 20, padding: '20px 0', borderTop: '1px solid var(--line)' }}>
      <div style={{
        flexShrink: 0, width: 44, height: 44, borderRadius: '50%',
        background: 'var(--leveza)', color: 'var(--vinculo)',
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center'
      }}>
        <Icon name={icon} />
      </div>
      <div>
        <h4 style={{ margin: 0, fontSize: 16, fontWeight: 600, color: 'var(--vinculo)' }}>{titulo}</h4>
        <p style={{ margin: '4px 0 0', fontSize: 14, color: 'var(--ink-soft)', lineHeight: 1.55 }}>{desc}</p>
      </div>
    </div>
  );
}

Object.assign(window, { Hero, ManifestoStrip, ComoFunciona, NaCaixa, Icon });