/* ---------- Case Canevas ---------- */
const Case = () => {
  const [chartStyle, setChartStyle] = React.useState("donut"); // donut | bignum | bar

  React.useEffect(() => {
    const handler = (e) => {
      if (e?.detail?.chartStyle) setChartStyle(e.detail.chartStyle);
    };
    window.addEventListener("__case-chart-style", handler);
    return () => window.removeEventListener("__case-chart-style", handler);
  }, []);

  // Pull style from window if set by tweaks
  React.useEffect(() => {
    if (window.__caseChartStyle) setChartStyle(window.__caseChartStyle);
    const i = setInterval(() => {
      if (window.__caseChartStyle && window.__caseChartStyle !== chartStyle) {
        setChartStyle(window.__caseChartStyle);
      }
    }, 200);
    return () => clearInterval(i);
  }, [chartStyle]);

  const posts = [
    { src: "assets/insight-views-9094.png", views: "9.094", label: "Story Clara · Mar" },
    { src: "assets/insight-interactions-374.png", views: "374", label: "Interações · post" },
    { src: "assets/insight-content-grid.png", views: "618k", label: "Top reel · 30d" },
    { src: "assets/insight-views-month.png", views: "4,1M", label: "Dashboard Mar/26" },
  ];

  return (
    <section className="case" id="case">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow reveal"><span className="dot"></span>Nosso case recente</span>
          <div className="row">
            <h2 className="section-title reveal-left">O que já entregamos.<br/>Agora é a vez do Canevas.</h2>
            <p className="lede reveal-right" style={{maxWidth:"42ch"}}>
              Não vendemos promessa — esses são os números reais que a Eleve entregou para <b>@claramachadofit2</b>.
              O mesmo método, adaptado ao universo de shows e experiências do Canevas.
            </p>
          </div>
        </div>

        {chartStyle === "donut" && (
          <div className="donut-row">
            <div className="donut-card glass reveal-scale">
              <span className="label">Visualizações · story viral</span>
              <Donut
                value={100}
                primary="var(--orange)"
                secondary="var(--grad-b)"
                label="views"
                sub={<Counter end={9094}/>}
              />
              <p className="sub">Um único story da Clara Machado — destaque no Insights de março.</p>
            </div>
            <div className="donut-card glass reveal-scale delay-1">
              <span className="label">% de seguidores atingidos</span>
              <Donut value={72.9} primary="var(--orange)" secondary="var(--grad-c)" label="followers" />
              <p className="sub">Do alcance da Clara, <b>72,9% eram seguidores</b> — audiência fiel, não aleatória.</p>
            </div>
            <div className="donut-card glass reveal-scale delay-2">
              <span className="label">Engajamento por post</span>
              <Donut value={86.5} primary="var(--orange)" secondary="var(--grad-b)" label="interactions" sub={<Counter end={374}/>} />
              <p className="sub"><b>374 interações</b> em um único post · 86,5% de seguidores da Clara.</p>
            </div>
          </div>
        )}

        {chartStyle === "bignum" && (
          <div className="bignum-row">
            <div className="bignum-card glass reveal-scale">
              <div className="accent-blob"></div>
              <span className="label">Visualizações · 30 dias</span>
              <div className="value"><Counter end={4099016}/></div>
              <p className="sub">Em março de 2026, a Eleve ajudou @claramachadofit2 a gerar +4M de views.</p>
            </div>
            <div className="bignum-card glass reveal-scale delay-1">
              <div className="accent-blob"></div>
              <span className="label">Contas alcançadas</span>
              <div className="value"><Counter end={1106586}/></div>
              <p className="sub">1,1M de contas únicas atingidas — resultado orgânico real, sem inflação artificial.</p>
            </div>
            <div className="bignum-card glass reveal-scale delay-2">
              <div className="accent-blob"></div>
              <span className="label">Seguidores no alcance</span>
              <div className="value"><Counter end={72.9} decimals={1} suffix="%" format={false}/></div>
              <p className="sub">Audiência fiel: 3 em cada 4 contas alcançadas já seguiam a Clara.</p>
            </div>
          </div>
        )}

        {chartStyle === "bar" && (
          <div className="bar-row reveal">
            {[
              { label: "Clara · Reel top mensal", v: 618749, max: 700000 },
              { label: "Clara · Reel bastidor", v: 504889, max: 700000 },
              { label: "Clara · Story de evento", v: 170086, max: 700000 },
              { label: "Clara · Story viral", v: 9094, max: 700000 },
              { label: "Clara · Interações em destaque", v: 374, max: 400 },
            ].map((b, i) => (
              <div key={i} className="bar-card glass-soft">
                <div className="label">{b.label}</div>
                <div className="track">
                  <div className="fill" style={{ width: `${(b.v / b.max) * 100}%` }}></div>
                </div>
                <div className="value tabular"><Counter end={b.v}/></div>
              </div>
            ))}
          </div>
        )}

        {/* Posts grid - real screenshots */}
        <div className="posts-grid">
          {posts.map((p, i) => (
            <div key={i} className={`post-card reveal delay-${i+1}`}>
              <img src={p.src} alt={p.label}/>
              <div className="cap">
                <span className="v"><Icon name="play" size={11}/>{p.views}</span>
                <span style={{fontSize:11, opacity:.85}}>{p.label}</span>
              </div>
            </div>
          ))}
        </div>

        {/* Strategy strip */}
        <div className="strategy">
          {[
            { num: "01", h: "Conteúdo nasce do evento", p: "O palco do Canevas é o maior ativo. Capturamos o que já acontece de verdade — sem montar cenário forçado." },
            { num: "02", h: "Reels carregam o alcance", p: "50% do alcance da Clara veio de Reels. É onde concentramos energia editorial e cadência de publicação." },
            { num: "03", h: "Tráfego no que já viraliza", p: "Boostamos só o que já está performando organicamente. ROI real — sem desperdiçar verba em apostas." },
          ].map((s, i) => (
            <div key={i} className={`strat-card reveal delay-${i+1}`}>
              <div className="num">{s.num}</div>
              <h4>{s.h}</h4>
              <p>{s.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Case = Case;

/* ---------- Timeline ---------- */
const Timeline = () => {
  const months = [
    {
      m: "Maio", yr: "2026 · mês 01", count: "6 captações",
      items: [
        { ic: "camera", t: "Material audiovisual", d: "Reels, stories e bastidores das noites." },
        { ic: "camera", t: "Sessão de fotos", d: "Banco de imagens institucional + redes." },
        { ic: "users", t: "Conteúdo com parceiros", d: "Co-criação com marcas e artistas." },
        { ic: "doc", t: "Presskit completo", d: "Apresentação para imprensa e patrocinadores." },
        { ic: "trend", t: "Gestão de tráfego", d: "Campanhas pagas calibradas semana a semana." },
        { ic: "spark", t: "Estratégia editorial", d: "Linha narrativa unificada para 30 dias." },
      ]
    },
    {
      m: "Junho", yr: "2026 · mês 02", count: "3 captações",
      items: [
        { ic: "doc", t: "Cardápios redesenhados", d: "Identidade do Canevas aplicada ao menu." },
        { ic: "globe", t: "Site + landing page", d: "Hub digital próprio, fora do Instagram." },
        { ic: "calendar", t: "Cronograma editorial", d: "Calendário de conteúdo até o fim do trimestre." },
        { ic: "trend", t: "Gestão de tráfego", d: "Otimização contínua das campanhas em vigor." },
      ]
    },
    {
      m: "Julho", yr: "2026 · mês 03", count: "Estratégia",
      items: [
        { ic: "calendar", t: "Cronograma de conteúdo", d: "Planejamento para o segundo semestre." },
        { ic: "trend", t: "Gestão de tráfego", d: "Escala das campanhas com melhor performance." },
        { ic: "users", t: "Parcerias estratégicas", d: "Negociação com novos parceiros e ativações." },
        { ic: "target", t: "Estratégia 2º semestre", d: "Roadmap de crescimento contínuo." },
      ]
    },
  ];

  return (
    <section id="entrega">
      <div className="container">
        <div className="section-head">
          <span className="eyebrow reveal"><span className="dot"></span>O que entregamos</span>
          <div className="row">
            <h2 className="section-title reveal-left">3 meses,<br/>uma operação completa.</h2>
            <p className="lede reveal-right" style={{maxWidth:"42ch"}}>
              Cada mês acumula sobre o anterior. Em julho, o Canevas tem
              presença digital própria, conteúdo em ritmo e tráfego rodando.
            </p>
          </div>
        </div>

        <div className="timeline">
          {months.map((mo, i) => (
            <div key={i} className="tl-item reveal">
              <div className="tl-marker">{String(i + 1).padStart(2, "0")}</div>
              <div className="tl-card glass-soft">
                <div>
                  <div className="month">{mo.m}<span className="yr">{mo.yr}</span></div>
                  <span className="meta-pill"><Icon name="spark" size={11} stroke={2.4}/>{mo.count}</span>
                </div>
                <ul className="deliv">
                  {mo.items.map((it, j) => (
                    <li key={j}>
                      <span className="ic"><Icon name={it.ic} size={12} stroke={2}/></span>
                      <span><b>{it.t}</b>{it.d}</span>
                    </li>
                  ))}
                </ul>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};
window.Timeline = Timeline;

/* ---------- Pricing ---------- */
const Pricing = () => (
  <section id="valores">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow reveal"><span className="dot"></span>Investimento</span>
        <div className="row">
          <h2 className="section-title reveal-left">Duas formas<br/>de começar.</h2>
          <p className="lede reveal-right" style={{maxWidth:"42ch"}}>
            Todo o escopo dos 3 meses está incluso em ambas as opções.
            A diferença está na forma de pagamento.
          </p>
        </div>
      </div>

      <div className="pricing-grid">
        <div className="price-card glass reveal-scale">
          <div className="h">
            <h3>Parcelado</h3>
            <span className="chip">Flexível</span>
          </div>
          <div className="price"><span className="cur">R$</span><Counter end={30000}/></div>
          <div className="terms"><b>12× de R$ 2.500</b> · sem juros</div>
          <ul className="included">
            {["Operação completa de 3 meses","9 captações entregues","Site + LP + Presskit","Gestão de tráfego inclusa","Suporte WhatsApp dedicado","Reuniões semanais de alinhamento"].map((t, i) => (
              <li key={i}><span className="ck"><Icon name="check" size={14} stroke={2.6}/></span>{t}</li>
            ))}
          </ul>
          <div className="cta-row">
            <a href="#contato" className="btn btn-ghost">Quero esta</a>
          </div>
        </div>

        <div className="price-card price-vista reveal-scale delay-1">
          <div className="h">
            <h3>À vista</h3>
            <span className="badge"><Icon name="spark" size={10} stroke={2.6}/>Melhor valor</span>
          </div>
          <div className="price"><span className="cur">R$</span><Counter end={25000}/></div>
          <div className="terms">Pagamento único · economia de <b style={{color:"var(--orange)"}}>R$ 5.000</b></div>
          <ul className="included">
            {["Tudo do plano parcelado","Prioridade na agenda de captação","Bônus: 1 ensaio extra para presskit","Bônus: vídeo institucional curto","Suporte WhatsApp dedicado","Reuniões semanais de alinhamento"].map((t, i) => (
              <li key={i}><span className="ck"><Icon name="check" size={14} stroke={2.6}/></span>{t}</li>
            ))}
          </ul>
          <div className="cta-row">
            <a href="#contato" className="btn btn-primary">Quero esta <Icon name="arrow-right" size={14} stroke={2.4}/></a>
          </div>
        </div>
      </div>
    </div>
  </section>
);
window.Pricing = Pricing;

/* ---------- Footer ---------- */
const Footer = () => (
  <footer className="footer" id="contato">
    <div className="container">
      <div className="footer-cta glass-deep">
        <div>
          <h2>Vamos começar?</h2>
          <p>Resposta em até 24h. Cronograma fechado em uma reunião de 30 minutos.</p>
        </div>
        <div style={{display:"flex", gap:12, justifyContent:"flex-end", flexWrap:"wrap"}}>
          <a className="btn btn-glass" href="mailto:vinicius@tudoeleve.com">vinicius@tudoeleve.com</a>
          <a className="btn btn-primary" href="https://wa.me/" target="_blank" rel="noreferrer">
            WhatsApp <Icon name="arrow-right" size={14} stroke={2.4}/>
          </a>
        </div>
      </div>
      <div className="footer-meta">
        <div className="footer-brand">
          <img src="assets/eleve-logo.png" alt="Eleve"/>
          <b>Eleve</b>
          <span style={{color:"var(--ink-4)"}}>×</span>
          <img src="canevaslogo.jpg" alt="Canevas" className="footer-canevas-logo" />
          <span>Canevas Pub</span>
        </div>
        <div>© 2025 Eleve. Proposta confidencial · Maio 2026</div>
      </div>
    </div>
  </footer>
);
window.Footer = Footer;