/* global React, CartelaMockup, Swatch */
const { useState, useEffect, useRef } = React;

// === Shared bits ===========================================================

const ARC = [
{ c: "#E6A5B5", n: "Rosa" },
{ c: "#F2C9B1", n: "Pêssego" },
{ c: "#EBC87A", n: "Dourado" },
{ c: "#A9BC8C", n: "Sálvia" },
{ c: "#6EAAB2", n: "Petróleo" },
{ c: "#B7AEDC", n: "Lavanda" }];


function ArcRow({ size = 22, gap = 6 }) {
  return (
    <div style={{ display: "inline-flex", gap }}>
      {ARC.map((s) =>
      <div key={s.n} title={s.n} style={{
        width: size, height: size, borderRadius: 999, background: s.c,
        boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.6), 0 4px 10px -6px rgba(74,61,54,0.35)"
      }} />
      )}
    </div>);

}

function Sparkle({ size = 14, color = "#D6A55A", style }) {
  return (
    <svg viewBox="0 0 24 24" style={{ width: size, height: size, ...style }} fill={color}>
      <path d="M12 0 L13.5 9.5 L24 12 L13.5 14.5 L12 24 L10.5 14.5 L0 12 L10.5 9.5 Z" />
    </svg>);

}

// === Nav ===================================================================
function Nav() {
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const onKey = (e) => { if (e.key === "Escape") setOpen(false); };
    window.addEventListener("keydown", onKey);
    return () => { document.body.style.overflow = prev; window.removeEventListener("keydown", onKey); };
  }, [open]);

  const links = [
    { href: "#prova", label: "Cartelas" },
    { href: "#como", label: "Como funciona" },
    { href: "#planos", label: "Planos" },
    { href: "#faq", label: "FAQ" },
  ];

  return (
    <React.Fragment>
      <nav className="nav" data-screen-label="00 Nav">
        <div className="container">
          <a href="#top" className="logo-wrap" aria-label="Cromia Studio">
            <img src="assets/logo-cromia.webp" alt="Cromia Studio" width="120" height="120" decoding="async" style={{ objectFit: "contain", width: "120px", height: "120px" }} />
          </a>
          <div className="nav-links">
            {links.map((l) => <a key={l.href} href={l.href}>{l.label}</a>)}
          </div>
          <a href="#planos" className="btn btn-primary" style={{ padding: "12px 22px", fontSize: 13 }}>
            Quero descobrir minha cartela
            <span className="arrow">→</span>
          </a>
          <button className="nav-burger" aria-label="Abrir menu" aria-expanded={open} onClick={() => setOpen(true)}>
            <svg width="26" height="26" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
              <line x1="3" y1="7" x2="21" y2="7" /><line x1="3" y1="12" x2="21" y2="12" /><line x1="3" y1="17" x2="21" y2="17" />
            </svg>
          </button>
        </div>
      </nav>
      {open && (
        <div className="nav-drawer" onClick={() => setOpen(false)}>
          <div className="nav-drawer-panel" onClick={(e) => e.stopPropagation()}>
            <button className="nav-drawer-close" aria-label="Fechar menu" onClick={() => setOpen(false)}>×</button>
            {links.map((l) => <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>)}
            <a href="#planos" className="btn btn-primary" onClick={() => setOpen(false)}>
              Quero minha cartela <span className="arrow">→</span>
            </a>
          </div>
        </div>
      )}
    </React.Fragment>
  );
}

// === Hero ==================================================================
function Hero() {
  return (
    <section id="top" style={{
      paddingTop: 64, paddingBottom: 100,
      background: `
        radial-gradient(circle at 80% -10%, rgba(214,165,90,0.10), transparent 50%),
        radial-gradient(circle at 0% 60%, rgba(230,165,181,0.08), transparent 45%),
        linear-gradient(180deg, #FDFAF4 0%, #F5EBDD 100%)
      `,
      overflow: "hidden"
    }} data-screen-label="01 Hero">
      <div className="container hero-grid">
        <div className="rise">
          <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 22 }}>
            <ArcRow size={16} gap={4} />
            <span className="eyebrow">Beauty tech · Colorimetria com IA</span>
          </div>

          <h1 className="display" style={{ fontSize: "clamp(44px, 6vw, 84px)", margin: "0 0 24px" }}>
            Descubra as cores que <span className="script" style={{ color: "var(--gold)", fontSize: "1.05em" }}>valorizam</span> a sua beleza natural.
          </h1>

          <p style={{ fontSize: 18, color: "var(--taupe)", lineHeight: 1.7, maxWidth: 540, margin: "0 0 36px" }}>
            Envie uma foto. Nossa IA estuda o seu subtom, contraste e profundidade — e devolve cartelas profissionais com a sua paleta ideal de roupas, cabelo, maquiagem e acessórios.
          </p>

          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginBottom: 28 }}>
            <a href="#planos" className="btn btn-primary">
              Quero minha cartela
              <span className="arrow">→</span>
            </a>
            <a href="#como" className="btn btn-ghost">Ver como funciona</a>
          </div>

          <div style={{ display: "flex", gap: 28, alignItems: "center", flexWrap: "wrap", color: "var(--taupe)", fontSize: 13 }}>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <Sparkle size={14} /> Resultado em minutos
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <Sparkle size={14} /> A partir de R$ 29,90
            </div>
            <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
              <Sparkle size={14} /> 100% online
            </div>
          </div>
        </div>

        <div className="rise d2" style={{ position: "relative" }}>
          {/* Hero cartela — real example with model + paleta */}
          <div style={{ position: "relative", maxWidth: 520, marginLeft: "auto" }}>
            <div style={{
              transform: "rotate(2deg)",
              borderRadius: 22,
              overflow: "hidden",
              boxShadow: "var(--shadow-lift)",
              border: "1px solid var(--line-soft)",
              background: "#FBF6EE",
            }}>
              <img
                src="assets/hero-cartela.webp"
                alt="Exemplo de cartela personalizada Cromia Studio"
                fetchpriority="high"
                decoding="async"
                style={{ width: "100%", height: "auto", display: "block" }}
              />
            </div>
            {/* mini swatch card */}
            <div className="hero-swatch-card" style={{
              position: "absolute",
              left: -36, bottom: -28,
              background: "#fff",
              borderRadius: 16,
              padding: "16px 18px",
              boxShadow: "var(--shadow-lift)",
              transform: "rotate(-4deg)",
              display: "flex", alignItems: "center", gap: 14,
              border: "1px solid var(--line-soft)"
            }}>
              <div style={{ fontSize: 11, letterSpacing: "0.12em", color: "var(--taupe)", textTransform: "uppercase" }}>
                Sua estação<br />
                <span className="display" style={{ fontSize: 22, letterSpacing: 0, textTransform: "none", color: "var(--taupe-dark)" }}>Outono Quente</span>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 4 }}>
                {["#C66B4C", "#D6A55A", "#A9BC8C", "#7B4E2B"].map((c, i) =>
                <div key={i} style={{ width: 18, height: 18, borderRadius: 4, background: c }} />
                )}
              </div>
            </div>
            {/* sparkle decor */}
            <Sparkle size={28} style={{ position: "absolute", top: -10, right: 30, opacity: 0.7 }} />
            <Sparkle size={14} style={{ position: "absolute", top: 18, right: 70, opacity: 0.5 }} />
          </div>
        </div>
      </div>

      {/* Trust strip */}
      <div className="container" style={{ marginTop: 100 }}>
        <div className="trust-grid">
          {[
          { k: "+1.200", v: "Análises geradas" },
          { k: "94%", v: "Se sentiram mais confiantes" },
          { k: "5", v: "Cartelas personalizadas" },
          { k: "~3 min", v: "Para receber tudo pronto" }].
          map((s, i) =>
          <div key={i} className="rise d3" style={{ textAlign: "center" }}>
              <div className="display" style={{ fontSize: 36, color: "var(--gold-deep)" }}>{s.k}</div>
              <div style={{ fontSize: 12, color: "var(--taupe)", letterSpacing: "0.12em", textTransform: "uppercase", marginTop: 4 }}>{s.v}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// Map of cartelas that have a real photo example. When present, use the image
// instead of the SVG mockup — feels more trustworthy to customers.
const CARTELA_IMAGES = {
  geral: "assets/cartela-geral.webp",
  cores: "assets/cartela-cores.webp",
  cabelo: "assets/cartela-cabelo.webp",
  maquiagem: "assets/cartela-maquiagem.webp",
  acessorios: "assets/cartela-acessorios.webp",
};

function CartelaCard({ tipo, compact = false }) {
  const img = CARTELA_IMAGES[tipo];
  if (img) {
    return (
      <div className="cartela" style={{
        padding: 0,
        overflow: "hidden",
        aspectRatio: "1122 / 1402",
        background: "#FBF6EE",
        position: "relative",
      }}>
        <img
          src={img}
          alt={`Exemplo de cartela ${tipo}`}
          loading="lazy"
          decoding="async"
          style={{
            position: "absolute", inset: 0,
            width: "100%", height: "100%",
            objectFit: "cover", objectPosition: "center",
            display: "block",
          }}
        />
      </div>
    );
  }
  return <CartelaMockup tipo={tipo} compact={compact} />;
}

// === Prova visual ==========================================================
function ProvaVisual() {
  const tipos = [
  { id: "geral", label: "Geral" },
  { id: "cores", label: "Cores" },
  { id: "cabelo", label: "Cabelo" },
  { id: "maquiagem", label: "Maquiagem" },
  { id: "acessorios", label: "Acessórios" }];

  const [active, setActive] = useState("geral");

  return (
    <section id="prova" style={{ background: "var(--paper)" }} data-screen-label="02 Prova Visual">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Exemplos de cartelas</div>
          <h2 className="display">
            Sua consultoria, em <span className="script" style={{ color: "var(--gold)", fontSize: "1.1em" }}>cinco cartelas</span> visuais.
          </h2>
          <p>
            Você não recebe só um texto: recebe infográficos elegantes, em português, com a sua foto e a sua paleta — prontos para salvar no celular e consultar na hora de comprar roupa, escolher maquiagem ou ir ao salão.
          </p>
        </div>

        {/* Tabs */}
        <div style={{ display: "flex", justifyContent: "center", flexWrap: "wrap", gap: 10, marginBottom: 48 }}>
          {tipos.map((t) =>
          <button
            key={t.id}
            onClick={() => setActive(t.id)}
            style={{
              padding: "12px 22px",
              borderRadius: 999,
              fontSize: 13,
              letterSpacing: "0.06em",
              color: active === t.id ? "#fff" : "var(--taupe)",
              background: active === t.id ? "var(--taupe-dark)" : "transparent",
              border: active === t.id ? "1px solid var(--taupe-dark)" : "1px solid var(--line)",
              transition: "all .25s ease"
            }}>
            
              {t.label}
            </button>
          )}
        </div>

        {/* Cartela carousel */}
        <div style={{ position: "relative", maxWidth: 1100, margin: "0 auto" }}>
          <div className="cartela-stage">
            {/* Left peek — blurred, veiled */}
            <div className="cartela-peek cartela-peek-left" key={`L-${active}`}>
              <div style={{ transform: "rotate(-5deg) translateY(20px) scale(0.85)" }}>
                <CartelaCard tipo={prev(active, tipos)} compact />
              </div>
              <div className="cartela-veil cartela-veil-left" />
            </div>

            {/* Center — active */}
            <div className="cartela-center" key={`C-${active}`}>
              <CartelaCard tipo={active} />
            </div>

            {/* Right peek — blurred, veiled */}
            <div className="cartela-peek cartela-peek-right" key={`R-${active}`}>
              <div style={{ transform: "rotate(5deg) translateY(20px) scale(0.85)" }}>
                <CartelaCard tipo={next(active, tipos)} compact />
              </div>
              <div className="cartela-veil cartela-veil-right" />
            </div>
          </div>

          {/* Nav arrows */}
          <button
            onClick={() => setActive(prev(active, tipos))}
            aria-label="Cartela anterior"
            className="cartela-nav cartela-nav-left"
          >‹</button>
          <button
            onClick={() => setActive(next(active, tipos))}
            aria-label="Próxima cartela"
            className="cartela-nav cartela-nav-right"
          >›</button>
        </div>
      </div>
    </section>);

}
function prev(id, tipos) {const i = tipos.findIndex((t) => t.id === id);return tipos[(i - 1 + tipos.length) % tipos.length].id;}
function next(id, tipos) {const i = tipos.findIndex((t) => t.id === id);return tipos[(i + 1) % tipos.length].id;}

// === Problema ==============================================================
function ProblemaIcon({ kind, size = 22 }) {
  const stroke = "#fff";
  const sw = 1.6;
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round" };
  if (kind === "tired") return (
    <svg {...common}><circle cx="12" cy="12" r="9" /><path d="M8 14c1 1 2.5 1.5 4 1.5S15 15 16 14" /><path d="M7 9l2 1.5M9 9l-2 1.5M15 9l2 1.5M17 9l-2 1.5" /></svg>
  );
  if (kind === "mirror") return (
    <svg {...common}><ellipse cx="12" cy="10" rx="7" ry="8" /><path d="M12 18v4M9 22h6" /></svg>
  );
  if (kind === "lipstick") return (
    <svg {...common}><path d="M9 3 L15 3 L13 8 L11 8 Z" /><rect x="9" y="8" width="6" height="13" rx="1.5" /><path d="M9 13h6" /></svg>
  );
  if (kind === "hanger") return (
    <svg {...common}><path d="M12 6 a2 2 0 1 1 2 -2" /><path d="M12 7v3" /><path d="M4 18 L12 10 L20 18 Z" /></svg>
  );
  if (kind === "scissors") return (
    <svg {...common}><circle cx="6" cy="7" r="2.5" /><circle cx="6" cy="17" r="2.5" /><path d="M8 9 L20 18" /><path d="M8 15 L20 6" /></svg>
  );
  if (kind === "sparkle") return (
    <svg {...common}><path d="M12 3 L13.5 10 L20 12 L13.5 14 L12 21 L10.5 14 L4 12 L10.5 10 Z" fill={stroke} fillOpacity="0.25" /></svg>
  );
  return null;
}

function Problema() {
  const itens = [
    {
      ico: "tired",
      tag: "Cansaço",
      t: "Algumas cores te cansam.",
      d: "Mesmo descansada, certas cores deixam o rosto pálido e os olhos puxados.",
      grad: ["#A89489", "#7B665B"],
      img: "assets/problema-cansaco.webp",
    },
    {
      ico: "mirror",
      tag: "Reflexo",
      t: "Linda nas outras, não em você.",
      d: "Roupas que parecem incríveis em outras mulheres, no seu corpo somem.",
      grad: ["#E6A5B5", "#C9737E"],
      img: "assets/problema-reflexo.webp",
    },
    {
      ico: "lipstick",
      tag: "Maquiagem",
      t: "O batom da vitrine não é o seu.",
      d: "A cor que era perfeita no display, em casa parece desbotada ou pesada.",
      grad: ["#F2C9B1", "#D88A6E"],
      img: "assets/problema-batom.webp",
    },
    {
      ico: "hanger",
      tag: "Armário",
      t: "Peças paradas com etiqueta.",
      d: "Compras que pareciam acertos, mas você nunca encontrou coragem de usar.",
      grad: ["#EBC87A", "#B5874A"],
      img: "assets/problema-armario.webp",
    },
    {
      ico: "scissors",
      tag: "Salão",
      t: "Qual tom de cabelo me valoriza?",
      d: "Toda visita ao salão começa com a mesma dúvida — e termina com a mesma coloração de antes.",
      grad: ["#A9BC8C", "#6E8A7B"],
      img: "assets/problema-salao.webp",
    },
    {
      ico: "sparkle",
      tag: "Brilho",
      t: "Você sente que poderia mais.",
      d: "Aquela sensação de que está bem, mas que poderia estar bonita de outra maneira.",
      grad: ["#B7AEDC", "#6EAAB2"],
      img: "assets/problema-brilho.webp",
    },
  ];

  const [active, setActive] = useState(0);

  return (
    <section style={{ background: "var(--beige)" }} data-screen-label="03 Problema">
      <div className="container">
        <div className="problema-layout">
          <div className="problema-text">
            <div className="eyebrow">O problema não é você</div>
            <h2 className="display" style={{ fontSize: "clamp(30px, 3.6vw, 46px)", margin: "16px 0 22px", lineHeight: 1.05 }}>
              Você já sentiu que <span className="script" style={{ color: "var(--gold)", fontSize: "1.1em" }}>nada combina</span>?
            </h2>
            <p style={{ color: "var(--taupe)", fontSize: 16, lineHeight: 1.65, margin: 0 }}>
              Quando as cores que você usa não conversam com o seu subtom, o resultado é sutil — mas constante: você parece sempre um pouco apagada, um pouco cansada, um pouco "fora do dia".
            </p>
            <p style={{ color: "var(--taupe-dark)", fontSize: 20, lineHeight: 1.45, fontFamily: "Cormorant Garamond", fontStyle: "italic", margin: "28px 0 0" }}>
              "O problema não é você.<br />
              É que você ainda não conhece a sua cartela."
            </p>
            <div style={{ marginTop: 14, fontSize: 11.5, letterSpacing: "0.18em", textTransform: "uppercase", color: "var(--gold-deep)" }}>
              Clique nas cenas →
            </div>
          </div>

          {/* Interactive selector — vertical bars expanding sideways */}
          <div className="problema-strip problema-strip--side">
            {itens.map((it, i) => (
              <button
                key={i}
                type="button"
                onClick={() => setActive(i)}
                className={`problema-panel ${active === i ? "active" : ""}`}
                style={{
                  background: `linear-gradient(160deg, ${it.grad[0]} 0%, ${it.grad[1]} 100%)`,
                  animationDelay: `${i * 80}ms`,
                }}
              >
                {it.img && (
                  <div
                    className="problema-panel-photo"
                    style={{ backgroundImage: `url("${it.img}")` }}
                    aria-hidden="true"
                  />
                )}
                <div className="problema-panel-veil" />

                <div className="problema-panel-tag">{it.tag}</div>

                <div className="problema-panel-content">
                  <div className="problema-panel-icon">
                    <ProblemaIcon kind={it.ico} />
                  </div>
                  <div className="problema-panel-info">
                    <div className="problema-panel-title">{it.t}</div>
                    <div className="problema-panel-desc">{it.d}</div>
                  </div>
                </div>
              </button>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// === Benefícios ============================================================
function StaggerChar({ char, idx, active }) {
  const style = { transitionDelay: `${idx * 25}ms` };
  return (
    <span className="bf-char">
      <span className="bf-char-a" style={style}>{char === " " ? "\u00A0" : char}</span>
      <span className="bf-char-b" style={style}>{char === " " ? "\u00A0" : char}</span>
    </span>
  );
}

function Beneficios() {
  const items = [
  { t: "Compre com confiança", d: "Saiba na hora se uma cor te valoriza ou não — sem dúvida no provador.", img: "assets/beneficio-confianca.webp", grad: ["#E6A5B5", "#C9737E"] },
  { t: "Maquiagem que te ilumina", d: "Base, blush, batom e olhos com tons que harmonizam com o seu subtom.", img: "assets/beneficio-maquiagem.webp", grad: ["#F2C9B1", "#D88A6E"] },
  { t: "O cabelo certo para o seu rosto", d: "Tons e nuances que iluminam o rosto em vez de competir com você.", img: "assets/beneficio-cabelo.webp", grad: ["#A9BC8C", "#6E8A7B"] },
  { t: "Economia real", d: "Pare de comprar peças que ficam paradas no armário. Acerte na primeira.", img: "assets/beneficio-economia.webp", grad: ["#EBC87A", "#B5874A"] },
  { t: "Looks harmoniosos", d: "Combinações que funcionam juntas, com seus neutros e metais ideais.", img: "assets/beneficio-looks.webp", grad: ["#A89489", "#7B665B"] },
  { t: "Sua beleza, valorizada", d: "Tudo escolhido para o que você já tem de mais bonito: o seu natural.", img: "assets/beneficio-beleza.webp", grad: ["#B7AEDC", "#6EAAB2"] }];

  const [active, setActive] = React.useState(0);

  return (
    <section style={{ background: "var(--paper)" }} data-screen-label="04 Beneficios">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">O que você ganha</div>
          <h2 className="display">
            Uma <span className="script" style={{ color: "var(--gold)", fontSize: "1.1em" }}>nova relação</span> com o espelho.
          </h2>
        </div>

        <div className="bf-slider">
          <div className="bf-list">
            {items.map((it, i) => {
              const chars = it.t.split("");
              const isActive = active === i;
              return (
                <button
                  key={i}
                  type="button"
                  onMouseEnter={() => setActive(i)}
                  onFocus={() => setActive(i)}
                  onClick={() => setActive(i)}
                  className={`bf-item ${isActive ? "active" : ""}`}
                >
                  <span className="bf-title">
                    {chars.map((c, idx) => (
                      <StaggerChar key={idx} char={c} idx={idx} active={isActive} />
                    ))}
                  </span>
                </button>
              );
            })}
          </div>

          <div className="bf-imgwrap">
            {items.map((it, i) => (
              <div
                key={i}
                className={`bf-slide ${active === i ? "active" : ""} ${it.img ? "has-img" : ""}`}
                style={
                  it.img
                    ? { background: "transparent" }
                    : { background: `linear-gradient(160deg, ${it.grad[0]} 0%, ${it.grad[1]} 100%)` }
                }
              >
                {it.img && <img src={it.img} alt={it.t} className="bf-slide-img" loading="lazy" decoding="async" />}
                {!it.img && (
                  <div className="bf-slide-placeholder">
                    <div className="bf-slide-placeholder-num">{String(i + 1).padStart(2, "0")}</div>
                    <div className="bf-slide-placeholder-label">{it.t}</div>
                  </div>
                )}
              </div>
            ))}
            <div className="bf-caption">
              {items.map((it, i) => (
                <div key={i} className={`bf-caption-line ${active === i ? "active" : ""}`}>
                  <div className="bf-caption-title">{it.t}</div>
                  <div className="bf-caption-desc">{it.d}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function StepIcon({ kind }) {
  const stroke = "#B5874A";
  const sw = 1.4;
  if (kind === "camera") {
    return (
      <svg viewBox="0 0 48 48" width="48" height="48" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
        <rect x="6" y="14" width="36" height="26" rx="4" />
        <path d="M16 14 L18 9 H30 L32 14" />
        <circle cx="24" cy="27" r="7" />
        <circle cx="24" cy="27" r="3" />
        <circle cx="36" cy="20" r="0.8" fill={stroke} />
      </svg>
    );
  }
  if (kind === "sparkle") {
    return (
      <svg viewBox="0 0 48 48" width="48" height="48" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
        <path d="M24 6 L26 22 L42 24 L26 26 L24 42 L22 26 L6 24 L22 22 Z" fill={stroke} fillOpacity="0.10" />
        <path d="M38 10 L39 14 L43 15 L39 16 L38 20 L37 16 L33 15 L37 14 Z" fill={stroke} fillOpacity="0.18" />
        <path d="M10 32 L10.7 34.5 L13 35 L10.7 35.5 L10 38 L9.3 35.5 L7 35 L9.3 34.5 Z" fill={stroke} fillOpacity="0.18" />
      </svg>
    );
  }
  if (kind === "mirror") {
    return (
      <svg viewBox="0 0 48 48" width="48" height="48" fill="none" stroke={stroke} strokeWidth={sw} strokeLinecap="round" strokeLinejoin="round">
        <ellipse cx="24" cy="20" rx="14" ry="16" />
        <path d="M24 36 L24 42" />
        <path d="M18 42 H30" />
        <path d="M18 14 Q24 10 30 14" opacity="0.5" />
      </svg>
    );
  }
  return null;
}

// === Como funciona =========================================================
function ComoFunciona() {
  const steps = [
  {
    n: "01",
    t: "Envie sua foto",
    d: "Uma foto do rosto, em luz natural e sem maquiagem pesada. Funciona pelo celular.",
    ico: "camera"
  },
  {
    n: "02",
    t: "Nossa IA analisa",
    d: "Subtom, contraste, profundidade, intensidade — e a sua estação cromática.",
    ico: "sparkle"
  },
  {
    n: "03",
    t: "Receba sua cartela",
    d: "Infográficos elegantes com a sua paleta de roupas, cabelo, maquiagem e acessórios.",
    ico: "mirror"
  }];

  return (
    <section id="como" style={{ background: "var(--cream)" }} data-screen-label="05 Como Funciona">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Como funciona</div>
          <h2 className="display">Três passos, um resultado <span className="script" style={{ color: "var(--gold)", fontSize: "1.1em" }}>pra vida</span>.</h2>
        </div>

        <div className="steps-grid">
          {/* connecting line */}
          <div className="steps-line" />

          {steps.map((s, i) =>
          <div key={i} style={{ position: "relative", zIndex: 1, textAlign: "center" }}>
              <div style={{
              width: 128, height: 128, borderRadius: 999,
              background: "#fff", margin: "0 auto 24px",
              display: "flex", alignItems: "center", justifyContent: "center",
              fontSize: 48,
              boxShadow: "var(--shadow-soft)",
              border: "1px solid var(--line-soft)",
              position: "relative"
            }}>
                <StepIcon kind={s.ico} />
                <div style={{
                position: "absolute", top: -8, right: -8,
                background: "var(--gold)", color: "#fff",
                fontFamily: "Cormorant Garamond", fontSize: 16, fontWeight: 600,
                width: 36, height: 36, borderRadius: 999,
                display: "flex", alignItems: "center", justifyContent: "center"
              }}>
                  {s.n}
                </div>
              </div>
              <div className="display" style={{ fontSize: 28, marginBottom: 10 }}>{s.t}</div>
              <p style={{ color: "var(--taupe)", fontSize: 15, lineHeight: 1.65, maxWidth: 280, margin: "0 auto" }}>{s.d}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// === Social Proof ==========================================================
const TESTIMONIALS = [
  { t: "Sempre achei que vermelho fosse 'minha cor'. A cartela mostrou que terracota e ferrugem me iluminam muito mais — e eu já tinha essas peças no armário, paradas.", n: "Marina Costa", r: "Outono Quente", av: "warm" },
  { t: "Investi R$69,90 e parei de gastar com roupas erradas. Em duas semanas economizei o valor de várias consultorias presenciais que pesquisei.", n: "Beatriz Almeida", r: "Inverno Frio", av: "cool" },
  { t: "Mudei o tom do cabelo seguindo a cartela e a diferença no rosto foi imediata. Recebi elogios de pessoas que mal falavam comigo.", n: "Camila Ribeiro", r: "Primavera Clara", av: "light" },
  { t: "A maquiagem virou uma alegria. Substituí o batom vinho pelo terracota e parece que iluminei o rosto inteiro. Vale cada centavo.", n: "Renata Lopes", r: "Outono Profundo", av: "deep" },
  { t: "Comprei uma blusa salvia depois da cartela e foi a primeira peça que me fez parar na frente do espelho sorrindo. Sério.", n: "Júlia Mendes", r: "Primavera Suave", av: "warm" },
  { t: "Sou consultora de moda e indico a Cromia pras minhas clientes que querem começar antes de uma consultoria presencial. Acerta o subtom de forma impressionante.", n: "Patrícia Verlanger", r: "Inverno Profundo", av: "deep" },
  { t: "Achei que IA não fosse acertar minha pele. Acertou. As recomendações de cabelo bateram com o que minha cabeleireira diz há anos.", n: "Larissa Souza", r: "Verão Suave", av: "cool" },
  { t: "Fiz no celular numa quarta à noite e em 3 minutos tinha as 5 cartelas no e-mail. Salvei tudo no álbum do celular pra consultar.", n: "Aline Pereira", r: "Outono Quente", av: "warm" },
  { t: "Comprar maquiagem virou outra coisa. Antes ficava perdida na Sephora, agora vou direto nos tons que sei que combinam comigo.", n: "Fernanda Carvalho", r: "Inverno Claro", av: "light" },
];

function TestimonialColumn({ items, duration = 22, className = "" }) {
  return (
    <div className={`testim-col ${className}`}>
      <div className="testim-track" style={{ animationDuration: `${duration}s` }}>
        {[...items, ...items].map((d, i) => (
          <div key={i} className="testim-card">
            <div style={{ display: "flex", gap: 3, color: "var(--gold)", marginBottom: 14 }}>
              {[1,2,3,4,5].map(s => <span key={s} style={{ fontSize: 14 }}>★</span>)}
            </div>
            <p style={{ fontSize: 14.5, color: "var(--taupe-dark)", lineHeight: 1.65, margin: "0 0 20px" }}>
              "{d.t}"
            </p>
            <div style={{ display: "flex", alignItems: "center", gap: 12, paddingTop: 14, borderTop: "1px solid var(--line-soft)" }}>
              <div style={{ width: 38, height: 38, borderRadius: 999, overflow: "hidden", flexShrink: 0 }}>
                <PortraitPlaceholder tone={d.av} />
              </div>
              <div>
                <div style={{ fontSize: 13.5, fontWeight: 500, color: "var(--taupe-dark)", letterSpacing: "-0.005em" }}>{d.n}</div>
                <div style={{ fontSize: 10.5, color: "var(--gold-deep)", letterSpacing: "0.10em", textTransform: "uppercase", marginTop: 2 }}>{d.r}</div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

function SocialProof() {
  const c1 = TESTIMONIALS.slice(0, 3);
  const c2 = TESTIMONIALS.slice(3, 6);
  const c3 = TESTIMONIALS.slice(6, 9);

  return (
    <section style={{ background: "var(--paper)", overflow: "hidden" }} data-screen-label="06 Social Proof">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Resultados reais</div>
          <h2 className="display">
            Mulheres que descobriram <span className="script" style={{ color: "var(--gold)", fontSize: "1.1em" }}>como brilhar</span>.
          </h2>
          <p>Histórias reais de quem fez a consultoria e mudou a relação com o próprio reflexo.</p>
        </div>

        <div className="testim-grid">
          <TestimonialColumn items={c1} duration={26} />
          <TestimonialColumn items={c2} duration={32} className="testim-col-md" />
          <TestimonialColumn items={c3} duration={29} className="testim-col-lg" />
        </div>
      </div>
    </section>
  );
}

// === Planos ================================================================
function Planos() {
  return (
    <section id="planos" style={{ background: "var(--beige)" }} data-screen-label="07 Planos">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow">Escolha o seu plano</div>
          <h2 className="display">
            Comece com uma cartela, ou faça a <span className="script" style={{ color: "var(--gold)", fontSize: "1.1em" }}>consultoria completa</span>.
          </h2>
          <p>Sem mensalidade. Pagamento único. Suas cartelas ficam suas, para sempre.</p>
        </div>

        <div className="pricing-grid">

          {/* Simples */}
          <div className="card" style={{ padding: 40, display: "flex", flexDirection: "column" }}>
            <div className="eyebrow" style={{ color: "var(--taupe)" }}>Entrada</div>
            <div className="display" style={{ fontSize: 36, margin: "8px 0 4px" }}>Cartela Simples</div>
            <div style={{ color: "var(--taupe)", fontSize: 14 }}>Para conhecer a sua estação cromática.</div>

            <div style={{ margin: "32px 0 28px", display: "flex", alignItems: "baseline", gap: 8 }}>
              <span style={{ fontSize: 18, color: "var(--taupe)" }}>R$</span>
              <span className="display" style={{ fontSize: 64, color: "var(--taupe-dark)", lineHeight: 1 }}>29,90</span>
              <span style={{ fontSize: 14, color: "var(--taupe)" }}>· pagamento único</span>
            </div>

            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
              {[
              "Análise resumida da sua estação",
              "1 cartela visual personalizada (geral)",
              "Sua foto incorporada no infográfico",
              "Pronto em ~1 minuto"].
              map((f, i) =>
              <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14.5, color: "var(--taupe-dark)" }}>
                  <span style={{ color: "var(--gold-deep)", flexShrink: 0 }}>✓</span> {f}
                </li>
              )}
            </ul>

            <a
              href="#planos"
              onClick={(e) => {
                e.preventDefault();
                window.__openCheckout && window.__openCheckout("simples");
              }}
              className="btn btn-ghost"
              style={{ marginTop: 32, justifyContent: "center" }}
            >
              Começar com a Simples
            </a>
          </div>

          {/* Completo */}
          <div className="card" style={{
            padding: 40,
            background: "linear-gradient(180deg, #FBF6EE 0%, #F5EBDD 100%)",
            border: "1px solid var(--gold)",
            position: "relative",
            display: "flex", flexDirection: "column",
            boxShadow: "var(--shadow-lift)"
          }}>
            <div style={{
              position: "absolute", top: -14, right: 32,
              background: "var(--gold)", color: "#fff",
              padding: "6px 14px", borderRadius: 999,
              fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 600
            }}>
              Mais escolhido
            </div>

            <div className="eyebrow">Experiência completa</div>
            <div className="display" style={{ fontSize: 36, margin: "8px 0 4px" }}>Consultoria Completa</div>
            <div style={{ color: "var(--taupe)", fontSize: 14 }}>A consultoria de imagem inteira, em minutos.</div>

            <div style={{ margin: "32px 0 28px", display: "flex", alignItems: "baseline", gap: 8 }}>
              <span style={{ fontSize: 18, color: "var(--taupe)" }}>R$</span>
              <span className="display" style={{ fontSize: 64, color: "var(--taupe-dark)", lineHeight: 1 }}>69,90</span>
              <span style={{ fontSize: 14, color: "var(--taupe)" }}>· pagamento único</span>
            </div>

            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12, flex: 1 }}>
              {[
              "Análise completa (subtom, contraste, profundidade, intensidade)",
              "5 cartelas visuais personalizadas",
              "Cartela geral · Cores · Cabelo · Maquiagem · Acessórios",
              "Recomendações detalhadas em cada área",
              "Tons de cabelo, base, blush, batom, óculos e joias",
              "Pronto em ~3 minutos"].
              map((f, i) =>
              <li key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", fontSize: 14.5, color: "var(--taupe-dark)" }}>
                  <span style={{ color: "var(--gold-deep)", flexShrink: 0 }}>✓</span> {f}
                </li>
              )}
            </ul>

            <a
              href="#planos"
              onClick={(e) => {
                e.preventDefault();
                window.__openCheckout && window.__openCheckout("completa");
              }}
              className="btn btn-gold"
              style={{ marginTop: 32, justifyContent: "center" }}
            >
              Quero a consultoria completa
              <span className="arrow">→</span>
            </a>
          </div>

        </div>

        {/* Comparison microcopy */}
        <div style={{ textAlign: "center", marginTop: 40, fontSize: 13, color: "var(--taupe)" }}>
          Pagamento seguro · Receba suas cartelas no e-mail · Garantia de qualidade visual
        </div>
      </div>
    </section>);

}

// === FAQ ===================================================================
function FAQ() {
  const qs = [
  { q: "A IA acerta mesmo a minha estação cromática?",
    a: "A análise é treinada com os mesmos critérios usados por consultoras de imagem: subtom, contraste, profundidade e intensidade. A precisão depende muito da foto enviada — por isso recomendamos luz natural e rosto bem visível. Sempre tratamos o resultado como orientação personalizada, não como verdade absoluta." },
  { q: "Como deve ser a foto que eu envio?",
    a: "Foto do rosto, em luz natural (preferencialmente perto de uma janela), sem maquiagem pesada e sem filtros. Cabelo solto ou preso, sem chapéu. Quanto mais fiel à sua cor real, melhor a análise." },
  { q: "Quanto tempo demora pra receber?",
    a: "A cartela simples fica pronta em cerca de 1 minuto. A consultoria completa, com as 5 cartelas, leva por volta de 3 minutos. Você recebe tudo direto no seu e-mail e também no site." },
  { q: "Posso baixar e guardar as cartelas?",
    a: "Sim — as cartelas são suas. Você baixa em alta resolução, salva no celular e consulta sempre que precisar." },
  { q: "Minhas fotos ficam armazenadas?",
    a: "A foto enviada é usada apenas para gerar a sua análise. Você pode solicitar a exclusão dos seus dados a qualquer momento, em respeito à LGPD. Detalhes na nossa Política de Privacidade." },
  { q: "Funciona para qualquer tom de pele?",
    a: "Sim. A análise considera o subtom da sua pele (frio, quente ou neutro) independente da cor — e cobre as 12 estações cromáticas, com paletas adequadas a cada profundidade e intensidade." },
  { q: "Posso usar pelo celular?",
    a: "Sim. Todo o processo — do envio da foto ao recebimento das cartelas — é feito direto pelo celular, no navegador. Nada para instalar." }];


  return (
    <section id="faq" style={{ background: "var(--paper)" }} data-screen-label="08 FAQ">
      <div className="container" style={{ maxWidth: 880 }}>
        <div className="section-head">
          <div className="eyebrow">Dúvidas frequentes</div>
          <h2 className="display">As <span className="script" style={{ color: "var(--gold)", fontSize: "1.1em" }}>respostas</span> que você procura.</h2>
        </div>

        <div>
          {qs.map((item, i) =>
          <details key={i}>
              <summary>
                <span>{item.q}</span>
                <span className="ico" style={{ fontSize: 22, color: "var(--gold)", lineHeight: 1 }}>+</span>
              </summary>
              <p>{item.a}</p>
            </details>
          )}
        </div>
      </div>
    </section>);

}

// === CTA final =============================================================
function CTAFinal() {
  return (
    <section id="cta-final" style={{
      background: `linear-gradient(135deg, var(--beige) 0%, #ECDFCB 50%, var(--cream) 100%)`,
      padding: "120px 0",
      position: "relative",
      overflow: "hidden"
    }} data-screen-label="09 CTA Final">
      <Sparkle size={60} style={{ position: "absolute", top: 60, left: "12%", opacity: 0.18 }} />
      <Sparkle size={32} style={{ position: "absolute", top: 200, right: "15%", opacity: 0.25 }} />
      <Sparkle size={22} style={{ position: "absolute", bottom: 60, left: "30%", opacity: 0.2 }} />

      <div className="container" style={{ textAlign: "center", maxWidth: 800 }}>
        <div style={{ display: "flex", justifyContent: "center", marginBottom: 24 }}>
          <ArcRow size={26} gap={8} />
        </div>
        <h2 className="display" style={{ fontSize: "clamp(40px, 6vw, 76px)", margin: "0 0 18px" }}>
          Descubra as cores que fazem você <span className="script" style={{ color: "var(--gold)", fontSize: "1.05em" }}>brilhar</span>.
        </h2>
        <p style={{ fontSize: 19, color: "var(--taupe)", lineHeight: 1.6, maxWidth: 600, margin: "0 auto 40px" }}>
          A sua cartela personalizada está a uma foto de distância.
        </p>
        <a href="#planos" className="btn btn-primary" style={{ padding: "18px 36px", fontSize: 15 }}>
          Quero minha análise agora
          <span className="arrow">→</span>
        </a>
        <div style={{ marginTop: 22, fontSize: 13, color: "var(--taupe)" }}>
          Pagamento único · A partir de R$ 29,90 · 100% online
        </div>
      </div>
    </section>);

}

// === Footer ================================================================
function Footer() {
  return (
    <footer style={{ background: "var(--taupe-dark)", color: "rgba(253,250,244,0.75)", padding: "64px 0 32px" }}>
      <div className="container footer-grid">
        <div>
          <div style={{ background: "var(--cream)", display: "inline-block", padding: "12px 16px", borderRadius: 12 }}>
            <img src="assets/logo-cromia.webp" alt="Cromia Studio" loading="lazy" decoding="async" style={{ height: 48 }} />
          </div>
          <p style={{ marginTop: 22, lineHeight: 1.7, fontSize: 14, maxWidth: 360 }}>
            Colorimetria pessoal inteligente. Sua paleta ideal, revelada pela IA — em uma estética digna da consultoria que você sempre quis.
          </p>
        </div>
        {[
        { t: "Produto", l: [["Como funciona", "#como-funciona"], ["Planos", "#planos"], ["Exemplos de cartelas", "#prova"], ["FAQ", "#faq"]] },
        { t: "Empresa", l: [["Sobre", "#"], ["Contato", "mailto:contato@studiocromia.com.br"], ["Termos de uso", "termos-de-uso.html"], ["Política de privacidade", "politica-de-privacidade.html"]] },
        { t: "Suporte", l: [["Central de ajuda", "#faq"], ["Instagram", "#"], ["E-mail", "mailto:contato@studiocromia.com.br"]] }].
        map((col, i) =>
        <div key={i}>
            <div className="eyebrow" style={{ color: "var(--gold-soft)", marginBottom: 18 }}>{col.t}</div>
            <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 12, fontSize: 13.5 }}>
              {col.l.map((x, j) => <li key={j}><a href={x[1]} style={{ transition: "color .2s" }}>{x[0]}</a></li>)}
            </ul>
          </div>
        )}
      </div>
      <div className="container" style={{ marginTop: 56, paddingTop: 24, borderTop: "1px solid rgba(253,250,244,0.12)", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 16, fontSize: 12, color: "rgba(253,250,244,0.5)" }}>
        <div>© 2026 Cromia Studio. Todos os direitos reservados.</div>
        <div style={{ fontFamily: "Parisienne", fontSize: 18, color: "var(--gold-soft)" }}>
          Sua beleza em harmonia.
        </div>
      </div>
    </footer>);

}

Object.assign(window, {
  Nav, Hero, ProvaVisual, Problema, Beneficios, ComoFunciona,
  SocialProof, Planos, FAQ, CTAFinal, Footer, ArcRow, Sparkle
});