// ── Content sections ────────────────────────────────────────

function Section({ children, glow, noTopBorder, style, className = "", bgChar }) {
  // glow: subtle warm radial wash from the top (gold, very faint) — keeps
  // section heads feeling premium without competing with CTA color.
  return (
    <section className={`pf-section ${className}`} style={{ padding: "100px 0", borderTop: noTopBorder ? "none" : "1px solid var(--border)", position: "relative", background: glow ? "radial-gradient(ellipse at 50% 0%, rgba(245,158,11,0.05), transparent 55%), var(--abyss)" : "var(--abyss)", ...style }}>
      {bgChar && (
        <div aria-hidden="true" style={{ position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center", userSelect: "none" }}>
          <span style={{ fontFamily: "'Ma Shan Zheng', cursive", fontSize: "clamp(12rem, 30vw, 24rem)", color: "var(--bronze)", opacity: 0.045, transform: "translateY(-5%)" }}>
            {bgChar}
          </span>
        </div>
      )}
      <Wrap style={{ position: "relative", zIndex: 1 }}>{children}</Wrap>
    </section>
  );
}

// Editorial section head: oversized ghosted serif numeral behind a
// premium eyebrow tag, headline and optional sub-paragraph.
function SectionHead({ tag, n, title, sub, titleStyle, align = "left" }) {
  return (
    <Reveal>
      <div style={{ position: "relative", paddingTop: n ? "60px" : 0, marginTop: n ? "-28px" : 0, textAlign: align }}>
        {n && (
          <span aria-hidden="true" style={{ position: "absolute", top: "0px", left: align === "center" ? "50%" : "-12px", transform: align === "center" ? "translateX(-50%)" : "none", fontFamily: "var(--f-display)", fontStyle: "italic", fontWeight: 400, fontSize: "clamp(7rem, 14vw, 11rem)", lineHeight: "1.1", paddingTop: "0.15em", paddingBottom: "0.15em", letterSpacing: "-0.05em", backgroundImage: "linear-gradient(180deg, rgba(176,124,37,0.18) 0%, rgba(176,124,37,0.02) 100%)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent", pointerEvents: "none", userSelect: "none", whiteSpace: "nowrap" }}>
            {n}
          </span>
        )}
        <div style={{ position: "relative", display: align === "center" ? "inline-block" : "block" }}>
          <SectionTag n={n}>{tag}</SectionTag>
        </div>
        <h2 className="pf-section-head" style={{ position: "relative", fontFamily: "var(--f-display)", fontWeight: 400, fontSize: "clamp(1.9rem,3.6vw,3rem)", lineHeight: 1.12, letterSpacing: "-0.015em", color: "var(--cream)", margin: "0 0 18px", ...titleStyle }} dangerouslySetInnerHTML={{ __html: title }} />
        {sub && <p style={{ position: "relative", fontFamily: "var(--f-body)", fontSize: "1.1rem", lineHeight: 1.65, color: "var(--txt-body)", maxWidth: "620px", margin: align === "center" ? "0 auto" : 0 }}>{sub}</p>}
      </div>
    </Reveal>
  );
}

// ── TICKER ──
function Ticker() {
  const items = ["Evento Presencial · 21 de Junho · 14h às 19h · Alphaville SP", "Alexandre Soong: 19+ anos de mercado", "+100 milhões importados", "Da China ao seu estoque", "Sem promessa de lucro fácil"];
  const loop = [...items, ...items];
  return (
    <div className="pf-ticker-rail" style={{ background: "var(--deep)", borderTop: "1px solid rgba(176,124,37,0.18)", borderBottom: "1px solid rgba(176,124,37,0.18)", padding: "20px 0", overflow: "hidden", whiteSpace: "nowrap" }}>
      <div style={{ display: "inline-block", animation: "pfScroll 30s linear infinite" }}>
        {loop.map((t, i) => (
          <span key={i} style={{ fontFamily: "var(--f-body)", fontWeight: 500, fontSize: ".74rem", letterSpacing: ".24em", textTransform: "uppercase", color: "var(--champagne)" }}>
            <span style={{ color: "var(--go-4)", margin: "0 22px", fontSize: ".6rem" }}>❖</span>{t}
          </span>
        ))}
      </div>
    </div>
  );
}

// Accent presets for icon-led cards. Reds re-tuned to imperial crimson
// (Cinnabar) for the high-ticket Asia/luxury palette; cool cyan kept
// only as a soft accent option, not used for primary tagging.
const ACC = {
  red: { fg: "#B83232", line: "#8C1F1F", soft: "rgba(140,31,31,0.10)" },
  gold: { fg: "#FCD34D", line: "#F59E0B", soft: "rgba(245,158,11,0.08)" },
  green: { fg: "#34D399", line: "#10B981", soft: "rgba(16,185,129,0.07)" },
  cyan: { fg: "#67E8F9", line: "#06B6D4", soft: "rgba(6,182,212,0.07)" },
};

// Premium editorial card for a high-end event: gold metallic hairline
// (the VIP "ticket" thread), ghosted gold index numeral, dot + line-icon +
// tracked kicker + fading rule, confident Syne title. No chunky chips.
function IconCard({ icon, kicker, tone = "red", num, title, children }) {
  const a = ACC[tone];
  const [h, setH] = React.useState(false);

  React.useEffect(() => {
    if (window.lucide) {
      try {
        window.lucide.createIcons();
      } catch (e) {}
    }
  });

  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} className="pf-iconcard"
      style={{
        position: "relative", overflow: "hidden", height: "100%", boxSizing: "border-box",
        background: "linear-gradient(165deg,#151A2C 0%,#0A0E1A 100%)", borderRadius: "6px", padding: "26px 24px 24px",
        border: `1px solid ${h ? "var(--border-2)" : "rgba(255,255,255,0.08)"}`,
        boxShadow: h ? "0 34px 64px -26px rgba(0,0,0,0.95)" : "inset 0 1px 0 rgba(255,255,255,0.06), 0 30px 60px -34px rgba(0,0,0,0.95)",
        transform: h ? "translateY(-5px)" : "none", transition: "transform .45s var(--ease-out), box-shadow .45s var(--ease-out), border-color .45s var(--ease-out)"
      }}>
      <span style={{ position: "absolute", top: 0, left: 0, right: 0, height: "1px", background: "linear-gradient(90deg,transparent 0%,#9C6B1E 20%,#FCD34D 50%,#9C6B1E 80%,transparent 100%)", opacity: 0.7 }} />
      <span style={{ position: "absolute", top: "-30px", left: "-30px", width: "160px", height: "160px", background: `radial-gradient(circle, ${a.soft}, transparent 70%)`, pointerEvents: "none" }} />
      {num && <span style={{ position: "absolute", top: "8px", right: "16px", fontFamily: "var(--f-display)", fontWeight: 800, fontSize: "4.4rem", lineHeight: 1, letterSpacing: "-0.04em", backgroundImage: "linear-gradient(180deg,#FCD34D,#B07C25)", WebkitBackgroundClip: "text", backgroundClip: "text", color: "transparent", opacity: 0.12 }}>{num}</span>}
      <div style={{ position: "relative", display: "flex", alignItems: "center", gap: "9px", marginBottom: "20px" }}>
        <span style={{ width: "6px", height: "6px", borderRadius: "50%", background: a.fg, boxShadow: `0 0 8px ${a.fg}`, flexShrink: 0 }} />
        <span style={{ display: "flex", color: a.fg }}><i data-lucide={icon}></i></span>
        <span style={{ fontFamily: "var(--f-body)", fontWeight: 600, fontSize: ".6rem", letterSpacing: ".3em", textTransform: "uppercase", color: a.fg, whiteSpace: "nowrap" }}>{kicker}</span>
        <span style={{ flex: 1, height: "1px", background: `linear-gradient(90deg, ${a.line}, transparent)`, opacity: 0.35 }} />
      </div>
      <div style={{ position: "relative", fontFamily: "var(--f-display)", fontWeight: 700, fontSize: "1.16rem", lineHeight: 1.12, letterSpacing: "-0.015em", color: "var(--txt-white)", marginBottom: "11px" }}>{title}</div>
      <div style={{ position: "relative", fontFamily: "var(--f-body)", fontSize: ".92rem", lineHeight: 1.58, color: "var(--txt-soft)", textWrap: "pretty" }}>{children}</div>
    </div>
  );
}

// ── PAIN ──
const PAINS = [
  { ic: "ghost", t: "O fornecedor fantasma", d: "Você manda o dinheiro, espera 60 dias e recebe… o produto errado. Ou nada. Sem nota, sem recurso, sem ninguém pra cobrar." },
  { ic: "package-x", t: "O produto que não vende", d: "Importou 500 unidades de algo que parecia bom no AliExpress. Hoje estão encalhadas na sua sala, virando prejuízo." },
  { ic: "calculator", t: "A conta que estoura", d: "Achou que ia pagar X de imposto e frete. Na hora de retirar, a conta dobrou. Sua margem evaporou antes da primeira venda." },
  { ic: "ship", t: "A mercadoria presa", d: "Seu pedido chegou no Brasil e travou. Documentação errada, e você paga armazenagem por dia sem saber o que fazer." },
];
function Pain() {
  return (
    <Section noTopBorder bgChar="惑" style={{ background: "linear-gradient(180deg, var(--void) 0%, var(--abyss) 18%, var(--abyss) 100%)", paddingTop: "120px" }}>
      <SectionHead n="01" tag="A dor" title='Você quer importar.<br><span style="color:var(--crimson-4); font-style: italic;">Mas tem medo de quê, exatamente?</span>' />
      <div className="pf-pain-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px", marginTop: "44px" }}>
        {PAINS.map((p, i) => (
          <Reveal key={i} delay={i * 0.06}>
            <IconCard icon={p.ic} tone="red" kicker="Dor" num={String(i + 1).padStart(2, "0")} title={p.t}>{p.d}</IconCard>
          </Reveal>
        ))}
      </div>
    </Section>
  );
}

// reusable card with hover lift + soft accent wash (no flat left-border)
function HoverCard({ accent, children, surface = "var(--surface)", pad = "24px" }) {
  const [h, setH] = React.useState(false);
  return (
    <div onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)}
      style={{
        position: "relative", overflow: "hidden", background: surface, borderRadius: "16px", padding: pad, height: "100%", boxSizing: "border-box",
        border: `1px solid ${h ? "var(--border-2)" : "rgba(255,255,255,0.07)"}`,
        boxShadow: h ? "0 22px 46px -18px rgba(0,0,0,0.85)" : "0 1px 0 rgba(255,255,255,0.04) inset",
        transform: h ? "translateY(-4px)" : "none", transition: "transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out)"
      }}>
      {accent && <span style={{ position: "absolute", top: 0, left: 0, width: "150px", height: "150px", background: `radial-gradient(circle at top left, color-mix(in srgb, ${accent} 15%, transparent), transparent 70%)`, pointerEvents: "none" }} />}
      <div style={{ position: "relative" }}>{children}</div>
    </div>
  );
}

// ── METHOD ──
const STEPS = [
  { t: "Escolher o produto certo", d: "Como validar o que vende antes de gastar um centavo, e fugir do que vira encalhe." },
  { t: "Achar o fornecedor confiável", d: "Os filtros pra separar fábrica séria de intermediário golpista. O que perguntar antes de fechar." },
  { t: "Fechar o pedido sem ser passado pra trás", d: "Negociação, amostra, pagamento seguro. O que blindar no acordo pra não chorar depois." },
  { t: "Calcular frete e imposto de verdade", d: "A conta real, sem surpresa. Saber sua margem antes de comprar, não depois." },
  { t: "Receber no Brasil sem travar", d: "Documentação, desembaraço, logística. O caminho limpo da alfândega até sua porta." },
];
function Method() {
  // Very subtle calligraphy backdrop. Default state is barely perceptible
  // (4.5% opacity) so it never competes with the timeline text. Each
  // mouseenter into the section gently fades it up a touch — capped low
  // (~14%) so the gold strokes just "warm up" without zooming or
  // demanding attention. No scale, no glow ramp — quiet luxury.
  const [hovers, setHovers] = React.useState(0);
  const bump = () => setHovers((h) => Math.min(h + 1, 6));
  const opacity = Math.min(0.045 + hovers * 0.015, 0.14);
  return (
    <Section glow style={{ position: "relative", overflow: "hidden" }}>
      <div aria-hidden="true" style={{ position: "absolute", inset: 0, zIndex: 0, pointerEvents: "none", overflow: "hidden", display: "flex", alignItems: "center", justifyContent: "center", userSelect: "none" }}>
        <span style={{ fontFamily: "'Ma Shan Zheng', cursive", fontSize: "clamp(12rem, 30vw, 24rem)", color: "var(--bronze)", opacity, transform: "translateY(-5%)", transition: "opacity 1.2s var(--ease-out)" }}>
          道
        </span>
      </div>
      <div onMouseEnter={bump} style={{ position: "relative", zIndex: 2 }}>
        <SectionHead n="02" tag="O método" title='A importação inteira em <span style="color:var(--go-4); font-style: italic;">5 etapas</span>.' sub="É isso que você vai dominar: na ordem certa, sem pular o que importa." />
        <div style={{ marginTop: "48px", position: "relative" }}>
          <div style={{ position: "absolute", left: "23px", top: "12px", bottom: "12px", width: "1px", background: "linear-gradient(180deg, var(--bronze) 0%, var(--go-4) 40%, var(--bronze) 70%, transparent 100%)" }} />
          {STEPS.map((s, i) => (
            <Reveal key={i} delay={i * 0.05}>
              <div onMouseEnter={bump} style={{ display: "flex", gap: "22px", padding: "16px 0", alignItems: "flex-start" }}>
                <div style={{ flexShrink: 0, width: "48px", height: "48px", borderRadius: "50%", background: "linear-gradient(165deg, #1B1810 0%, #0A0907 100%)", border: "1px solid var(--bronze)", display: "flex", alignItems: "center", justifyContent: "center", fontFamily: "var(--f-display)", fontStyle: "italic", fontWeight: 400, fontSize: "1.05rem", color: "var(--go-4)", position: "relative", zIndex: 1, boxShadow: "0 0 0 4px var(--abyss), 0 6px 18px rgba(0,0,0,0.6)" }}>{String(i + 1).padStart(2, "0")}</div>
                <div style={{ paddingTop: "4px" }}>
                  <div style={{ fontFamily: "var(--f-display)", fontWeight: 400, fontSize: "1.25rem", color: "var(--cream)", marginBottom: "6px", letterSpacing: "-0.005em" }}>{s.t}</div>
                  <div style={{ fontFamily: "var(--f-body)", fontSize: ".98rem", lineHeight: 1.6, color: "var(--txt-body)", maxWidth: "640px" }}>{s.d}</div>
                </div>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </Section>
  );
}

// ── AUDIENCE (for / not for) ──
function Audience() {
  const yes = ["Quer importar mas não sabe por onde começar", "Já tentou e se queimou e quer fazer certo dessa vez", "Tem um negócio e quer melhorar margem importando direto", "Cansou de tutorial solto e quer um método completo"];
  const no = ['Procura "ganhar dinheiro sem esforço"', "Quer fórmula mágica e não topa seguir um processo", "Não pretende colocar a mão na massa de verdade", "Acha que importação é esquema pra enriquecer rápido"];
  // Left (yes) column: brighter cream text, full saturation. Right
  // (no) column: legible soft cream-grey — the brief specifically asked
  // we lift contrast there but keep visual hierarchy lower than yes.
  const Col = ({ head, items, color, mark, accent, strike, textColor, bg }) => (
    <HoverCard accent={accent} surface={bg} pad="30px">
      <div style={{ fontFamily: "var(--f-display)", fontWeight: 700, fontSize: "1.2rem", color, marginBottom: "20px", letterSpacing: "-0.005em" }}>{head}</div>
      <div style={{ display: "flex", flexDirection: "column", gap: "14px" }}>
        {items.map((t, i) => (
          <div key={i} style={{ display: "flex", gap: "14px", alignItems: "flex-start", fontFamily: "var(--f-body)", fontSize: "1rem", lineHeight: 1.5, color: textColor }}>
            <span style={{ color, flexShrink: 0, fontWeight: 700, fontSize: "1.05rem", lineHeight: 1.4 }}>{mark}</span>
            <span style={{ textDecoration: strike ? "line-through" : "none", textDecorationColor: "rgba(140,31,31,0.55)", textDecorationThickness: "1px" }}>{t}</span>
          </div>
        ))}
      </div>
    </HoverCard>
  );
  return (
    <Section bgChar="志">
      <SectionHead n="03" tag="Para quem é" title="Direto: isso é pra você ou não." />
      <div className="pf-audience-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px", marginTop: "44px" }}>
        <Reveal>
          <Col head="É pra você se…" items={yes} color="var(--go-4)" mark="✓" accent="var(--go)" textColor="var(--cream)" bg="linear-gradient(165deg, #1B1810 0%, #0F0D08 100%)" />
        </Reveal>
        <Reveal delay={0.08}>
          <Col head="Não é pra você se…" items={no} color="var(--crimson-4)" mark="✗" accent="var(--crimson)" strike textColor="#C8BFAE" bg="var(--surface)" />
        </Reveal>
      </div>
    </Section>
  );
}

window.Section = Section; window.SectionHead = SectionHead; window.Ticker = Ticker;
window.Pain = Pain; window.Method = Method; window.Audience = Audience; window.HoverCard = HoverCard;
window.IconCard = IconCard; window.ACC = ACC;