/* global React, ReactDOM, TerminalDemo, TweaksPanel, TweakSection, TweakRadio, TweakColor, useTweaks */
const { useState, useEffect, useMemo } = React;

const HEADLINES = {
  A: { eyebrow: "sem decorar comando", title: ["Crie seu pendrive Hackintosh", "sem decorar comando nenhum"] },
  B: { eyebrow: "guiado · seguro · gratuito", title: ["O jeito certo de criar", "mídia bootável macOS"] },
  C: { eyebrow: "em minutos", title: ["Do zero ao pendrive bootável", "com EFI montada em minutos"] }
};

const CTAS = {
  "1": { primary: "Baixar o BootStick", sub: "Gratuito · Open source · Roda no seu Mac" },
  "2": { primary: "Criar meu pendrive agora", sub: "Sem comandos manuais · Sem risco de disco errado" }
};

const ACCENTS = {
  green: "#7DEAA8",
  amber: "#F2C26B",
  blue: "#7BC7F7"
};

function Header({ accent }) {
  const [open, setOpen] = useState(false);
  const [active, setActive] = useState("");

  useEffect(() => {
    const onScroll = () => setOpen(window.scrollY > 24);
    onScroll();window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Scrollspy: keep `active` synced with the section currently dominating the
  // viewport. We pick whichever observed section has the largest intersection
  // ratio at each tick — more robust than "first one crossing the threshold".
  useEffect(() => {
    const ids = ["como-funciona", "beneficios", "objecoes", "faq"];
    const els = ids.map((id) => document.getElementById(id)).filter(Boolean);
    if (!els.length) return;
    const ratios = new Map();
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => ratios.set(e.target.id, e.isIntersecting ? e.intersectionRatio : 0));
      let best = "",bestR = 0;
      ratios.forEach((r, id) => {if (r > bestR) {bestR = r;best = id;}});
      // Only update when something is actually intersecting — otherwise keep
      // last (so the highlight doesn't blink off between sections).
      if (bestR > 0.05) setActive(best);else
      if (window.scrollY < 200) setActive("");
    }, {
      // Bias toward the section near the top half of the viewport.
      rootMargin: "-20% 0px -55% 0px",
      threshold: [0, 0.1, 0.25, 0.5, 0.75, 1]
    });
    els.forEach((el) => obs.observe(el));
    return () => obs.disconnect();
  }, []);

  const navItems = [
  { href: "#como-funciona", id: "como-funciona", label: "Como funciona" },
  { href: "#beneficios", id: "beneficios", label: "Benefícios" },
  { href: "#objecoes", id: "objecoes", label: "Objeções" },
  { href: "#faq", id: "faq", label: "FAQ" }];


  return (
    <header className={`nav ${open ? "nav-stuck" : ""}`}>
      <a href="#top" className="nav-logo">
        <span className="nav-logo-mark" aria-hidden>
          <svg viewBox="0 0 24 24" width="22" height="22"><path d="M5 4h14v3H5zM5 9h14v11H5z" fill="none" stroke="currentColor" strokeWidth="1.6" /><path d="M9 13h6M9 16h4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" /></svg>
        </span>
        <span className="nav-logo-text">BootStick</span>
      </a>
      <nav className="nav-links">
        {navItems.map((it) =>
        <a
          key={it.id}
          href={it.href}
          className={`nav-link ${active === it.id ? "nav-link-active" : ""}`}>
          
            <span className="nav-link-text">{it.label}</span>
            <span className="nav-link-mark" aria-hidden />
          </a>
        )}
        <a href="https://github.com/lhdeveloper/BootStick" target="_blank" rel="noopener" className="nav-gh">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 .5C5.65.5.5 5.65.5 12c0 5.08 3.29 9.39 7.86 10.91.58.11.79-.25.79-.55v-2.1c-3.2.7-3.87-1.36-3.87-1.36-.52-1.34-1.27-1.7-1.27-1.7-1.04-.71.08-.7.08-.7 1.15.08 1.76 1.18 1.76 1.18 1.02 1.76 2.69 1.25 3.35.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.28 1.18-3.08-.12-.29-.51-1.46.11-3.04 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.79 0c2.21-1.49 3.18-1.18 3.18-1.18.62 1.58.23 2.75.11 3.04.74.8 1.18 1.82 1.18 3.08 0 4.42-2.69 5.39-5.26 5.68.41.36.78 1.06.78 2.15v3.18c0 .31.21.67.8.55C20.21 21.39 23.5 17.08 23.5 12 23.5 5.65 18.35.5 12 .5z" /></svg>
          GitHub
        </a>
      </nav>
      <a href="#download" className="nav-cta">
        Baixar
        <span className="nav-cta-dot" style={{ background: accent }} />
      </a>
    </header>);

}

function HeroPatternBg() {
  // Layered dark gradient: base radial wash from top-left, multiple skewed
  // vertical accent-colored streaks (each with a different horizontal mask
  // pattern), then a fine dot grid. Color follows --accent so the Tweaks
  // panel recolors the streaks live.
  const streak = (mask) => ({
    background: "linear-gradient(var(--accent) 0%, transparent 100%)",
    WebkitMaskImage: mask,
    maskImage: mask,
    transform: "skewX(45deg)"
  });
  const streaks = [
  "linear-gradient(90deg, transparent 0%, #000 20%, transparent 36%, #000 55%, rgba(0,0,0,0.13) 67%, #000 78%, transparent 97%)",
  "linear-gradient(90deg, transparent 11%, #000 25%, rgba(0,0,0,0.55) 41%, rgba(0,0,0,0.13) 67%, #000 78%, transparent 97%)",
  "linear-gradient(90deg, transparent 9%, #000 20%, rgba(0,0,0,0.55) 28%, rgba(0,0,0,0.42) 40%, #000 48%, rgba(0,0,0,0.27) 54%, rgba(0,0,0,0.13) 78%, #000 88%, transparent 97%)",
  "linear-gradient(90deg, transparent 0%, #000 17%, rgba(0,0,0,0.55) 26%, #000 35%, transparent 47%, rgba(0,0,0,0.13) 69%, #000 79%, transparent 97%)",
  "linear-gradient(90deg, transparent 0%, #000 20%, rgba(0,0,0,0.55) 27%, #000 42%, transparent 48%, rgba(0,0,0,0.13) 67%, #000 74%, #000 82%, rgba(0,0,0,0.47) 88%, transparent 97%)"];

  const wash = {
    background: "radial-gradient(100% 100% at 0% 0%, rgb(46,46,46) 0%, rgb(0,0,0) 100%)",
    WebkitMaskImage: "radial-gradient(125% 100% at 0% 0%, #000 0%, rgba(0,0,0,0.22) 88%, transparent 100%)",
    maskImage: "radial-gradient(125% 100% at 0% 0%, #000 0%, rgba(0,0,0,0.22) 88%, transparent 100%)"
  };
  return (
    <div className="hero-pattern" aria-hidden>
      <div className="hero-pattern-wash" style={wash}>
        {streaks.map((m, i) =>
        <div key={i} className="hero-pattern-streak" style={streak(m)} />
        )}
      </div>
      <div className="hero-pattern-dots" />
      <div className="hero-pattern-highlight" />
    </div>);

}

function HeroBackdrop({ accent }) {
  return (
    <div className="hero-bd" aria-hidden>
      {/* soft elliptical wash behind the headline to lift the type */}
      <div className="hero-bd-glow" style={{ background: `radial-gradient(ellipse 55% 60% at 50% 42%, ${accent}33 0%, ${accent}10 30%, transparent 70%)` }} />
      <div className="hero-bd-glow-2" />
    </div>);

}

function Hero({ headline, cta, accent }) {
  const h = HEADLINES[headline];
  const c = CTAS[cta];
  // bump trigger value each time the variation changes so the scramble re-fires
  const scrambleKey = headline;
  return (
    <section className="hero" id="top">
      <HeroPatternBg />
      <HeroBackdrop accent={accent} />

      <div className="hero-inner">
        <div className="hero-eyebrow">
          <span className="hero-eyebrow-dot" style={{ background: accent }} />
          <span>BootStick · assistente macOS · {h.eyebrow}</span>
        </div>

        <h1 className="hero-h1">
          <Typewriter key={`l1-${scrambleKey}`} as="span" speed={32}>{h.title[0]}</Typewriter><br />
          <FadeIn key={`l2-${scrambleKey}`} as="span" className="hero-h1-soft" delay={h.title[0].length * 32 + 250}>{h.title[1]}</FadeIn>
        </h1>

        <p className="hero-sub">
          Guia interativo direto no terminal — do download do instalador ao acesso à
          partição <span className="mono">EFI</span> — sem precisar abrir o Google ou lembrar um único comando.
        </p>

        <div className="hero-cta">
          <a href="#download" className="btn-primary" style={{ "--accent": accent }}>
            <span>{c.primary}</span>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 4v14M5 11l7 7 7-7" /></svg>
          </a>
          <a href="#como-funciona" className="btn-ghost">
            Ver como funciona
          </a>
        </div>
        <div className="hero-sub-fine" style={{ color: "rgb(173, 173, 173)" }}>{c.sub}</div>

        <div className="hero-terminal-wrap">
          <div className="hero-term-glow" style={{ background: `radial-gradient(ellipse 60% 50% at 50% 50%, ${accent}1f 0%, transparent 70%)` }} aria-hidden />
          <TerminalDemo />
        </div>

        <div className="hero-runline">
          <span className="hero-runline-tag">$</span>
          <span className="mono">curl -L https://github.com/lhdeveloper/BootStick/releases/latest/download/bootstick.sh -o bootstick.sh && chmod +x bootstick.sh && ./bootstick.sh</span>
          <button className="hero-runline-copy" onClick={(e) => {navigator.clipboard?.writeText("curl -L https://github.com/lhdeveloper/BootStick/releases/latest/download/bootstick.sh -o bootstick.sh && chmod +x bootstick.sh && ./bootstick.sh");e.currentTarget.innerText = "copiado";setTimeout(() => e.currentTarget.innerText = "copiar", 1400);}}>copiar</button>
        </div>
      </div>
    </section>);

}

function SectionLabel({ label, kicker }) {
  return (
    <div className="sec-label">
      <span className="sec-label-name">{label}</span>
      {kicker && <span className="sec-label-kicker">{kicker}</span>}
    </div>);

}

function Pain() {
  const items = [
  "Juntando comandos de três tutoriais diferentes pra montar um fluxo que funcione",
  "Copiando e colando diskutil e torcendo pra não errar o identificador do disco",
  "Repetindo o processo do zero porque esqueceu de montar a EFI antes de fechar o terminal",
  "Usando uma ferramenta pra formatar, outra pra criar o instalador e outra pra acessar a EFI",
  "Perdendo tempo com o processo técnico quando o que você quer mesmo é configurar o OpenCore"];

  return (
    <section className="sec sec-pain" id="dor">
      <SectionLabel label="a dor" kicker="se algum desses bateu, segue" />
      <h2 className="sec-h2">
        Você já passou por isso.
      </h2>
      <p className="sec-lede">
        Criar mídia bootável para Hackintosh não deveria ser difícil. Na prática, vira cinco abas
        abertas, dois fóruns no Reddit e aquela dúvida clássica:
        <span className="quote"> "será que escrevi o comando certo?"</span>
      </p>
      <ul className="pain-list">
        {items.map((t, i) =>
        <li key={i} className="pain-item">
            <span className="pain-glyph">×</span>
            <span>{t}</span>
          </li>
        )}
      </ul>
    </section>);

}

function Solution() {
  const steps = [
  {
    n: "01",
    title: "Escolha o instalador",
    desc: "Varre /Applications e lista todos os instaladores macOS disponíveis. Não tem? Baixa direto dos servidores Apple.",
    cmd: [
    { p: "$", c: "ls /Applications/*.app" },
    { p: "·", c: "Sequoia 15.5 · Sonoma 14.7 · Ventura 13.7" }],

    tag: "guiado"
  },
  {
    n: "02",
    title: "Selecione o disco",
    desc: "Só discos removíveis. Fabricante, capacidade e identificador na tabela. Discos do sistema ficam fora da seleção.",
    cmd: [
    { p: "$", c: "diskutil list external physical" },
    { p: "·", c: "/dev/disk4  SanDisk Ultra  32.0 GB" }],

    tag: "seguro"
  },
  {
    n: "03",
    title: "Formatação automática",
    desc: "GPT + Mac OS Extended (Journaled). Nome do volume já é o que o createinstallmedia espera. Sem pulo de etapa.",
    cmd: [
    { p: "$", c: "diskutil eraseDisk JHFS+ \"Install macOS\" GPT /dev/disk4" },
    { p: "✓", c: "Finished erase on disk4", ok: true }],

    tag: "GPT · JHFS+"
  },
  {
    n: "04",
    title: "Gravação do instalador",
    desc: "Executa o createinstallmedia oficial da Apple. Mostra fase, percentual e tempo decorrido em tempo real.",
    cmd: [
    { p: "$", c: "sudo createinstallmedia --volume /Volumes/Install --nointeraction" },
    { p: "·", c: "Apagando disco → Copiando arquivos → Tornando bootável" }],

    tag: "createinstallmedia"
  },
  {
    n: "05",
    title: "EFI montada e aberta",
    desc: "Termina montando a partição EFI e abrindo no Finder. Você cola sua pasta OpenCore na hora — pendrive pronto.",
    cmd: [
    { p: "$", c: "sudo diskutil mount /dev/disk4s1 && open /Volumes/EFI" },
    { p: "✓", c: "EFI aberta no Finder", ok: true }],

    tag: "OpenCore-ready"
  }];

  return (
    <section className="sec sec-sol" id="como-funciona">
      <SectionLabel label="a solução" kicker="um único assistente" />
      <h2 className="sec-h2">
        Um comando. Cinco passos. <span className="soft">Zero dúvida.</span>
      </h2>

      <ol className="sol-timeline">
        {steps.map((s, i) =>
        <li key={s.n} className="sol-step">
            <div className="sol-step-rail" aria-hidden>
              <span className="sol-step-n mono">{s.n}</span>
              {i < steps.length - 1 && <span className="sol-step-line" />}
            </div>

            <div className="sol-step-main">
              <div className="sol-step-head">
                <h3 className="sol-step-t">{s.title}</h3>
                <span className="sol-step-tag mono">{s.tag}</span>
              </div>
              <p className="sol-step-d">{s.desc}</p>
            </div>

            <div className="sol-step-cmd mono" aria-label="comandos executados">
              {s.cmd.map((line, j) =>
            <div key={j} className={`sol-cmd-line ${line.ok ? "sol-cmd-ok" : ""}`}>
                  <span className="sol-cmd-p">{line.p}</span>
                  <span className="sol-cmd-c">{line.c}</span>
                </div>
            )}
            </div>
          </li>
        )}
      </ol>

      <div className="sol-foot">
        <div className="sol-foot-tile">
          <div className="sol-foot-k">Mecanismo</div>
          <div className="sol-foot-v">Comandos nativos do macOS — <span className="mono">diskutil</span>, <span className="mono">createinstallmedia</span>, <span className="mono">diskutil mount</span>.</div>
        </div>
        <div className="sol-foot-tile">
          <div className="sol-foot-k">Dependências</div>
          <div className="sol-foot-v">Nenhuma. Se roda no seu Mac, roda no BootStick.</div>
        </div>
        <div className="sol-foot-tile">
          <div className="sol-foot-k">Tamanho</div>
          <div className="sol-foot-v">Um único script <span className="mono">.sh</span> · 38 KB · auditável em 6 minutos.</div>
        </div>
      </div>
    </section>);

}

function Icon({ name }) {
  const s = { width: 16, height: 16, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (name) {
    case "eye":return <svg {...s}><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z" /><circle cx="12" cy="12" r="3" /></svg>;
    case "shield":return <svg {...s}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z" /><path d="M9 12l2 2 4-4" /></svg>;
    case "folder":return <svg {...s}><path d="M3 6a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6z" /><path d="M3 10h18" /></svg>;
    case "refresh":return <svg {...s}><path d="M3 12a9 9 0 0 1 15.5-6.3L21 8" /><path d="M21 3v5h-5" /><path d="M21 12a9 9 0 0 1-15.5 6.3L3 16" /><path d="M3 21v-5h5" /></svg>;
    case "compass":return <svg {...s}><circle cx="12" cy="12" r="9" /><path d="M16 8l-2 6-6 2 2-6 6-2z" /></svg>;
    case "code":return <svg {...s}><path d="M8 6l-6 6 6 6" /><path d="M16 6l6 6-6 6" /><path d="M14 4l-4 16" /></svg>;
    default:return null;
  }
}

function Benefits({ accent }) {
  const items = [
  {
    icon: "eye",
    title: "Você vê o que vai acontecer",
    meta: "antes de qualquer escrita",
    desc: "Cada etapa mostra um resumo claro do que será executado. Confirme com Enter ou cancele com Esc — nada acontece nas suas costas.",
    tags: ["confirm", "dry-run"],
    status: "core",
    colSpan: 2,
    hover: true,
    cta: "ver fluxo →"
  },
  {
    icon: "shield",
    title: "Disco certo, sempre",
    meta: "lock automático",
    desc: "Fabricante, capacidade, identificador. Discos do sistema ficam bloqueados na seleção.",
    tags: ["diskutil", "safe"],
    status: "seguro",
    colSpan: 1,
    cta: "como funciona →"
  },
  {
    icon: "folder",
    title: "EFI pronta no Finder",
    meta: "OpenCore-ready",
    desc: "Termina o fluxo com a partição EFI montada e aberta automaticamente. Cole sua pasta OpenCore na hora.",
    tags: ["mount", "finder"],
    status: "automático",
    colSpan: 1,
    cta: "abrir EFI →"
  },
  {
    icon: "refresh",
    title: "Roda em qualquer macOS",
    meta: "11 Big Sur → 14 Sonoma",
    desc: "Sem ferramenta externa que quebra na próxima atualização. Comandos nativos só — diskutil, createinstallmedia, mount.",
    tags: ["nativo", "sem deps", "estável"],
    status: "compat",
    colSpan: 2,
    cta: "compat. completa →"
  },
  {
    icon: "compass",
    title: "Sem Google paralelo",
    meta: "5 passos guiados",
    desc: "O fluxo te guia do começo ao fim. Não precisa de tutorial aberto na outra janela.",
    tags: ["guided"],
    status: "UX",
    colSpan: 1,
    cta: "ver passos →"
  },
  {
    icon: "code",
    title: "Open source e auditável",
    meta: "MIT · 38 KB",
    desc: "Leia cada linha antes de executar. Sem rede, sem coletor, sem dependência oculta. O código está todo no GitHub.",
    tags: ["GitHub", "audit", "MIT"],
    status: "público",
    colSpan: 2,
    cta: "ver no GitHub →"
  }];

  return (
    <section className="sec sec-ben" id="beneficios">
      <SectionLabel label="benefícios" kicker="o que muda na sua próxima criação" />
      <h2 className="sec-h2">Por que escolher o BootStick.</h2>

      <div className="bento">
        {items.map((b, i) =>
        <article
          key={i}
          className={`bento-card bento-span-${b.colSpan}${b.hover ? " bento-hover" : ""}`}>
          
            <div className="bento-dots" aria-hidden />

            <div className="bento-head">
              <div className="bento-icon">
                <Icon name={b.icon} />
              </div>
              <span className="bento-status">
                <span className="bento-status-dot" style={{ background: accent }} />
                {b.status}
              </span>
            </div>

            <div className="bento-body">
              <h3 className="bento-title">
                {b.title}
                <span className="bento-meta mono">· {b.meta}</span>
              </h3>
              <p className="bento-desc">{b.desc}</p>
            </div>

            <div className="bento-foot">
              <div className="bento-tags">
                {b.tags.map((t, j) =>
              <span key={j} className="bento-tag mono">#{t}</span>
              )}
              </div>
            </div>

            <div className="bento-edge" aria-hidden />
          </article>
        )}
      </div>
    </section>);

}

function Proof({ accent }) {
  return (
    <section className="sec sec-proof">
      <SectionLabel label="prova" kicker="código aberto · auditável" />
      <h2 className="sec-h2">Hospedado no GitHub.<br /><span className="soft">Cada linha visível antes de rodar.</span></h2>

      <div className="proof-row">
        <div className="proof-stats">
          <div className="proof-stat">
            <div className="proof-stat-n">2.4k</div>
            <div className="proof-stat-l">stars</div>
          </div>
          <div className="proof-stat">
            <div className="proof-stat-n">38<span className="proof-stat-u">KB</span></div>
            <div className="proof-stat-l">tamanho do script</div>
          </div>
          <div className="proof-stat">
            <div className="proof-stat-n">100<span className="proof-stat-u">%</span></div>
            <div className="proof-stat-l">comandos nativos</div>
          </div>
          <div className="proof-stat">
            <div className="proof-stat-n">0</div>
            <div className="proof-stat-l">dependências externas</div>
          </div>
        </div>

        <div className="proof-testi">
          <div className="proof-testi-head">depoimentos da comunidade</div>
          <div className="proof-testi-list">
            {[
            { q: "Criei meu primeiro pendrive Hackintosh sem erro nenhum, em menos de 10 minutos.", who: "primeira vez", tag: "iniciante" },
            { q: "Perdia uma hora montando tudo na mão. Com o BootStick fiz em uma execução.", who: "veterano de OpenCore", tag: "comparação" },
            { q: "Finalmente não precisei ficar com medo de formatar o disco errado.", who: "usuário cauteloso", tag: "segurança" }].
            map((t, i) =>
            <figure key={i} className="proof-card">
                <span className="proof-card-mark" style={{ color: accent }}>“</span>
                <blockquote>{t.q}</blockquote>
                <figcaption>
                  <span className="proof-card-who">{t.who}</span>
                  <span className="proof-card-tag">/{t.tag}</span>
                </figcaption>
              </figure>
            )}
          </div>
          <div className="proof-testi-note">
            Depoimentos placeholder · capturas reais da comunidade antes do lançamento.
          </div>
        </div>
      </div>
    </section>);

}

function Offer({ accent }) {
  const checks = [
  "Assistente interativo de terminal",
  "Seleção guiada de disco (sem risco de erro)",
  "Formatação automática GPT + JHFS+",
  "Criação da mídia com createinstallmedia",
  "Montagem e acesso à EFI direto no Finder",
  "Compatível com qualquer versão do macOS",
  "Sem dependências externas",
  "Open source — código aberto pra auditoria"];

  return (
    <section className="sec sec-offer" id="download">
      <SectionLabel label="o que você leva" />
      <div className="offer-card">
        <div className="offer-card-left">
          <div className="offer-eyebrow">incluso na release atual</div>
          <h2 className="offer-h2">Tudo o que o BootStick faz por você.</h2>
          <ul className="offer-list">
            {checks.map((c, i) =>
            <li key={i}>
                <span className="offer-check" style={{ color: accent }}>✓</span>
                <span>{c}</span>
              </li>
            )}
          </ul>
        </div>
        <aside className="offer-card-right">
          <div className="offer-price-eyebrow mono">// custo total</div>
          <div className="offer-price">R$ 0,00</div>
          <div className="offer-price-sub">para sempre · sem cadastro · sem newsletter</div>

          <a href="https://github.com/lhdeveloper/BootStick/releases" target="_blank" rel="noopener" className="offer-btn" style={{ "--accent": accent }}>
            <span>Baixar do GitHub</span>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M5 12h14M13 5l7 7-7 7" /></svg>
          </a>

          <div className="offer-meta">
            <div><span>plataforma</span><span className="mono">macOS 11+</span></div>
            <div><span>licença</span><span className="mono">MIT</span></div>
            <div><span>release</span><span className="mono">v1.4.0 · 14 KB</span></div>
            <div><span>SHA-256</span><span className="mono">a8f3…d291</span></div>
          </div>
        </aside>
      </div>
    </section>);

}

function Objection({ q, a, idx, open, onToggle }) {
  return (
    <div className={`obj-row ${open ? "obj-open" : ""}`}>
      <button className="obj-q" onClick={onToggle} aria-expanded={open}>
        <span className="obj-q-idx mono">{String(idx).padStart(2, "0")}</span>
        <span className="obj-q-text">{q}</span>
        <span className="obj-q-icon" aria-hidden>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M6 9l6 6 6-6" /></svg>
        </span>
      </button>
      <div className="obj-a-wrap">
        <div className="obj-a">{a}</div>
      </div>
    </div>);

}

function Objections() {
  const items = [
  {
    q: "E se eu formatar o disco errado?",
    a: <>O BootStick lista os discos de forma legível e pede confirmação antes de qualquer formatação. Discos do sistema ficam <span className="soft">bloqueados na seleção</span>. Você sempre sabe o que vai acontecer antes de apertar Enter.</>,
    tag: "segurança"
  },
  {
    q: "Funciona com a minha versão do macOS?",
    a: <>Sim. O BootStick usa apenas comandos nativos do terminal — <span className="mono">diskutil</span>, <span className="mono">createinstallmedia</span> e <span className="mono">diskutil mount</span>. Sem dependência externa, sem quebra de versão pra versão.</>,
    tag: "compat."
  },
  {
    q: "Preciso saber usar o terminal?",
    a: <>Não precisa ser expert. Você só precisa saber abrir o terminal e executar um arquivo. <span className="soft">O resto o BootStick guia com menus de setas e números.</span></>,
    tag: "acessibilidade"
  },
  {
    q: "O BootStick configura o OpenCore pra mim?",
    a: <>Não — e isso é <span className="soft">intencional</span>. O BootStick prepara o pendrive e abre a EFI. A configuração do OpenCore é específica pra cada hardware e fica na sua mão, como deve ser.</>,
    tag: "escopo"
  },
  {
    q: "É seguro executar um script de terceiro no meu Mac?",
    a: <>O código é 100% open source e hospedado no GitHub. Você pode <span className="soft">ler cada linha antes de executar</span>. Sem coletor de dados, sem rede, sem dependência oculta.</>,
    tag: "auditoria"
  }];

  return (
    <section className="sec sec-obj" id="objecoes">
      <SectionLabel label="objeções" kicker="resolvidas antes que apareçam" />
      <h2 className="sec-h2">O que costuma travar a decisão.</h2>

      <div className="obj-grid">
        {items.map((it, i) =>
        <article key={i} className={`obj-pair ${i === items.length - 1 && items.length % 2 === 1 ? "obj-pair-wide" : ""}`}>
            <header className="obj-pair-head">
              <span className="obj-pair-idx mono">/{String(i + 1).padStart(2, "0")}</span>
              <span className="obj-pair-tag mono">{it.tag}</span>
            </header>

            <div className="obj-pair-q">
              <span className="obj-pair-mark" aria-hidden>"</span>
              <p className="obj-pair-quote">{it.q}</p>
            </div>

            <div className="obj-pair-sep">
              <span className="obj-pair-sep-arrow" aria-hidden>↳</span>
              <span className="obj-pair-sep-label mono">resposta do BootStick</span>
            </div>

            <p className="obj-pair-a">{it.a}</p>
          </article>
        )}
      </div>
    </section>);

}

function Guarantee({ accent }) {
  return (
    <section className="sec sec-guar">
      <div className="guar-card">
        <div className="guar-mark" style={{ borderColor: accent }}>
          <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke={accent} strokeWidth="1.6"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6l8-3z" /><path d="M9 12l2 2 4-4" strokeLinecap="round" /></svg>
        </div>
        <div className="guar-body">
          <div className="guar-eyebrow mono">garantia</div>
          <h2 className="guar-h">Sem risco. Sem ladeira escorregadia.</h2>
          <p className="guar-p">
            O BootStick é gratuito e open source. Se não funcionar no seu caso, o código está
            disponível, a issue está aberta, a comunidade está lá. <span className="soft">Você nunca fica na mão sem saber o que aconteceu.</span>
          </p>
        </div>
      </div>
    </section>);

}

function Faq() {
  const items = [
  { q: "Quanto tempo leva o processo todo?", a: "Depende do tamanho do instalador e da velocidade do seu disco, mas o fluxo interativo em si é questão de minutos. O tempo maior é o download ou cópia do instalador." },
  { q: "Serve pra iniciante em Hackintosh?", a: "Sim. Se você sabe o que é OpenCore e quer criar sua primeira mídia bootável, o BootStick te guia sem exigir que você saiba os comandos de cabeça." },
  { q: "Serve pra quem já é avançado?", a: "Também. Se você já faz isso na mão e quer automatizar, o BootStick elimina os passos repetitivos e abre a EFI direto no Finder pra você trabalhar mais rápido." },
  { q: "Precisa instalar alguma coisa antes?", a: "Não. Basta ter o macOS, um pendrive ou SSD externo de no mínimo 16 GB e o instalador do macOS em /Applications. O BootStick não instala nada no seu sistema." },
  { q: "O BootStick cria a pasta EFI do OpenCore pra mim?", a: "Não. Ele monta e abre a partição EFI pra você copiar sua pasta OpenCore manualmente. A geração do EFI continua sendo responsabilidade sua." },
  { q: "Como funciona o acesso após o download?", a: "Você baixa o .zip nas Releases do GitHub, extrai, dá permissão de execução e roda. Pode usar o terminal ou dar duplo clique no Finder." },
  { q: "E se eu encontrar um bug?", a: "Abre uma issue direto no GitHub. O projeto é open source e contribuições são bem-vindas." }];

  const [openIdx, setOpenIdx] = useState(-1);
  return (
    <section className="sec sec-faq" id="faq">
      <SectionLabel label="FAQ" />
      <h2 className="sec-h2">Perguntas frequentes.</h2>
      <div className="faq-list">
        {items.map((it, i) =>
        <Objection key={i} q={it.q} a={it.a} idx={i + 1} open={openIdx === i} onToggle={() => setOpenIdx(openIdx === i ? -1 : i)} />
        )}
      </div>
    </section>);

}

function FinalCta({ cta, accent }) {
  const c = CTAS[cta];
  return (
    <section className="sec sec-final">
      {/* Mesh-gradient style bg: 4 animated radial gradients drift across each
             other to fake a `MeshGradient` shader. Colors mix accent + warm
             highlight + dark teal so it reads against the all-black bg. */}
      <div className="mesh-bg" aria-hidden>
        <span className="mesh-blob mesh-blob-1" />
        <span className="mesh-blob mesh-blob-2" />
        <span className="mesh-blob mesh-blob-3" />
        <span className="mesh-blob mesh-blob-4" />
        <div className="mesh-grid" />
      </div>
      <div className="warp-veil" aria-hidden />

      <div className="final-glow" style={{ background: `radial-gradient(circle at 50% 100%, ${accent}33 0%, transparent 60%)` }} aria-hidden />
      <SectionLabel label="último passo" />
      <h2 className="final-h">
        Você já sabe o que precisa fazer.<br />
        <span className="soft">Só faltava uma forma de fazer sem pesquisar tudo de novo.</span>
      </h2>
      <p className="final-p">O BootStick resolve exatamente isso — e é de graça.</p>
      <div className="final-cta-row">
        <a href="https://github.com/lhdeveloper/BootStick/releases" target="_blank" rel="noopener" className="btn-primary big" style={{ "--accent": accent }}>
          <span>{c.primary}</span>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M12 4v14M5 11l7 7 7-7" /></svg>
        </a>
      </div>
      <div className="final-fine" style={{ color: "rgb(184, 184, 184)" }}>{c.sub}</div>

      <div className="final-ps">
        <span className="final-ps-tag mono">P.S.</span>
        <p>
          O BootStick não substitui o seu conhecimento de Hackintosh. Ele só tira do seu caminho
          a parte chata — os comandos que você já pesquisou dezenas de vezes. A EFI ainda é sua.
          O OpenCore ainda é seu. Mas agora o pendrive sai certo, da primeira vez.
        </p>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="foot">
      <div className="foot-row">
        <div className="foot-brand">
          <span className="foot-logo mono">BootStick</span>
          <span className="foot-tag">assistente interativo · macOS · open source</span>
        </div>
        <div className="foot-cols">
          <div>
            <div className="foot-col-h mono">projeto</div>
            <a href="https://github.com/lhdeveloper/BootStick" target="_blank" rel="noopener">GitHub</a><a href="https://github.com/lhdeveloper/BootStick/releases" target="_blank" rel="noopener">Releases</a><a href="https://github.com/lhdeveloper/BootStick/releases" target="_blank" rel="noopener">Changelog</a><a href="https://github.com/lhdeveloper/BootStick/blob/main/LICENSE" target="_blank" rel="noopener">Licença MIT</a>
          </div>
          <div>
            <div className="foot-col-h mono">comunidade</div>
            <a href="https://github.com/lhdeveloper/BootStick/issues" target="_blank" rel="noopener">Issues</a><a href="https://github.com/lhdeveloper/BootStick/discussions" target="_blank" rel="noopener">Discussions</a><a href="#">Discord</a><a href="https://www.reddit.com/r/hackintosh/" target="_blank" rel="noopener">r/hackintosh</a>
          </div>
          <div>
            <div className="foot-col-h mono">recursos</div>
            <a href="#">Guia OpenCore</a><a href="#">Compat. macOS</a><a href="#">FAQ</a><a href="#">Política</a>
          </div>
        </div>
      </div>
      <div className="foot-fine">
        <span>BootStick não é afiliado à Apple Inc. macOS é marca registrada da Apple Inc.</span>
        <span className="mono">© 2026 · feito por gente que cansou de decorar diskutil</span>
      </div>
    </footer>);

}

const DEFAULTS = /*EDITMODE-BEGIN*/{
  "headline": "B",
  "cta": "1",
  "accent": "blue"
} /*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(DEFAULTS);
  const accent = ACCENTS[t.accent] || ACCENTS.green;

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", accent);
  }, [accent]);

  return (
    <>
      <Header accent={accent} />
      <main>
        <Hero headline={t.headline} cta={t.cta} accent={accent} />
        <Pain />
        <Solution />
        <Benefits accent={accent} />
        <Proof accent={accent} />
        <Offer accent={accent} />
        <Objections />
        <Guarantee accent={accent} />
        <Faq />
        <FinalCta cta={t.cta} accent={accent} />
      </main>
      <Footer />

      <TweaksPanel title="Tweaks · BootStick LP">
        <TweakSection title="Headline">
          <TweakRadio
            label="Variação"
            value={t.headline}
            onChange={(v) => setTweak("headline", v)}
            options={[
            { value: "A", label: "A · atrito" },
            { value: "B", label: "B · confiança" },
            { value: "C", label: "C · velocidade" }]
            } />
          
          <div className="tw-headline-preview">
            <div className="tw-hp-eyebrow">eyebrow</div>
            <div className="tw-hp-line">{HEADLINES[t.headline].eyebrow}</div>
            <div className="tw-hp-eyebrow" style={{ marginTop: 10 }}>título</div>
            <div className="tw-hp-line">{HEADLINES[t.headline].title.join(" ")}</div>
          </div>
        </TweakSection>

        <TweakSection title="CTA principal">
          <TweakRadio
            label="Variação"
            value={t.cta}
            onChange={(v) => setTweak("cta", v)}
            options={[
            { value: "1", label: "1 · ação" },
            { value: "2", label: "2 · benefício" }]
            } />
          
          <div className="tw-headline-preview">
            <div className="tw-hp-eyebrow">botão</div>
            <div className="tw-hp-line">{CTAS[t.cta].primary}</div>
            <div className="tw-hp-eyebrow" style={{ marginTop: 10 }}>linha de apoio</div>
            <div className="tw-hp-line">{CTAS[t.cta].sub}</div>
          </div>
        </TweakSection>

        <TweakSection title="Cor de acento">
          <TweakColor
            value={accent}
            onChange={(v) => {
              const key = Object.keys(ACCENTS).find((k) => ACCENTS[k] === v) || "green";
              setTweak("accent", key);
            }}
            options={[ACCENTS.green, ACCENTS.amber, ACCENTS.blue]} />
          
        </TweakSection>
      </TweaksPanel>
    </>);

}

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

// --------------------------------------------------------------------
// Scroll reveal: tag eligible elements with .reveal + stagger their delay,
// then flip them .in-view as they enter the viewport. Idempotent — safe to
// re-run after React mutations (we re-tag on every observer init).
// --------------------------------------------------------------------
(() => {
  const REVEAL_SELECTORS = [
  ".sec-label",
  ".sec-h2",
  ".sec-lede",
  ".pain-item",
  ".sol-step",
  ".sol-foot-tile",
  ".bento-card",
  ".proof-stat",
  ".proof-card",
  ".proof-testi-head",
  ".proof-testi-note",
  ".offer-card",
  ".obj-pair",
  ".guar-card",
  ".final-h",
  ".final-p",
  ".final-cta-row",
  ".final-fine",
  ".final-ps"].
  join(",");

  let observer;
  function init() {
    if (observer) observer.disconnect();
    const nodes = document.querySelectorAll(REVEAL_SELECTORS);

    // Group siblings by parent to give staggered delays.
    const byParent = new Map();
    nodes.forEach((el) => {
      const p = el.parentElement;
      if (!byParent.has(p)) byParent.set(p, []);
      byParent.get(p).push(el);
    });
    byParent.forEach((list) => {
      list.forEach((el, i) => {
        if (el.classList.contains("reveal")) return;
        el.classList.add("reveal");
        el.style.setProperty("--reveal-delay", `${Math.min(i, 6) * 70}ms`);
      });
    });

    observer = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) {
          e.target.classList.add("in-view");
          observer.unobserve(e.target);
        }
      });
    }, { rootMargin: "0px 0px -8% 0px", threshold: 0.08 });

    document.querySelectorAll(".reveal").forEach((el) => observer.observe(el));
  }
  // Wait one frame so React has painted, then init.
  requestAnimationFrame(() => requestAnimationFrame(init));
  // Re-init if the user toggles tweaks (headline/cta variation may resize sections).
  window.addEventListener("resize", () => clearTimeout(window.__rvT) || (window.__rvT = setTimeout(init, 250)));
})();