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

/* ============= ICONS ============= */
const Icon = {
  Check: ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M2 7.5l3 3 7-7" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>,

  X: ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>,

  Plus: ({ size = 12 }) =>
  <svg width={size} height={size} viewBox="0 0 12 12" fill="none">
      <path d="M6 1v10M1 6h10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />
    </svg>,

  Play: ({ size = 24 }) =>
  <svg width={size} height={size} viewBox="0 0 24 24" fill="#1A1500">
      <path d="M6 4l14 8-14 8V4z" />
    </svg>,

  ArrowRight: ({ size = 16 }) =>
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M3 8h10m0 0L9 4m4 4l-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
    </svg>,

  Lock: ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <rect x="3" y="6" width="8" height="6" rx="1" stroke="currentColor" strokeWidth="1.2" />
      <path d="M5 6V4a2 2 0 014 0v2" stroke="currentColor" strokeWidth="1.2" />
    </svg>,

  Shield: ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M7 1L2 3v4c0 3 2 5.5 5 6 3-.5 5-3 5-6V3L7 1z" stroke="currentColor" strokeWidth="1.2" />
    </svg>,

  Clock: ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <circle cx="7" cy="7" r="5.5" stroke="currentColor" strokeWidth="1.2" />
      <path d="M7 4v3l2 1.5" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" />
    </svg>,

  WhatsApp: ({ size = 14 }) =>
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
      <path d="M7 1.5c-3 0-5.5 2.5-5.5 5.5 0 1 .3 2 .8 2.8L1.5 12.5l2.8-.8c.8.4 1.7.7 2.7.7 3 0 5.5-2.5 5.5-5.5S10 1.5 7 1.5z" stroke="currentColor" strokeWidth="1.1" strokeLinejoin="round" />
    </svg>,

  Doc: ({ size = 16 }) =>
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <path d="M3 1.5h7L13 4.5V14a.5.5 0 01-.5.5h-9A.5.5 0 013 14V2a.5.5 0 010-.5z" stroke="currentColor" strokeWidth="1.1" />
      <path d="M9.5 1.5V5h3.5" stroke="currentColor" strokeWidth="1.1" />
    </svg>,

  Spreadsheet: ({ size = 16 }) =>
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <rect x="2" y="3" width="12" height="10" stroke="currentColor" strokeWidth="1.1" />
      <path d="M2 7h12M2 10h12M6 3v10M10 3v10" stroke="currentColor" strokeWidth="1.1" />
    </svg>,

  Users: ({ size = 16 }) =>
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <circle cx="6" cy="6" r="2.5" stroke="currentColor" strokeWidth="1.1" />
      <path d="M2 13c0-2 2-3.5 4-3.5s4 1.5 4 3.5" stroke="currentColor" strokeWidth="1.1" />
      <circle cx="11" cy="5" r="2" stroke="currentColor" strokeWidth="1.1" />
      <path d="M10 9.5c2 0 4 1.5 4 3" stroke="currentColor" strokeWidth="1.1" />
    </svg>,

  Module: ({ size = 16 }) =>
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
      <rect x="2" y="2" width="5" height="5" stroke="currentColor" strokeWidth="1.1" />
      <rect x="9" y="2" width="5" height="5" stroke="currentColor" strokeWidth="1.1" />
      <rect x="2" y="9" width="5" height="5" stroke="currentColor" strokeWidth="1.1" />
      <rect x="9" y="9" width="5" height="5" stroke="currentColor" strokeWidth="1.1" />
    </svg>

};

/* ============= HEADER ============= */
function SiteHeader() {
  return (
    <header className="site-header">
      <div className="container">
        <div className="row">
          <a href="#" className="brand">
            <div className="brand-mark"></div>
            <div className="brand-name">
              Legacy Makers
              <span className="small">Curso Método LEGADO</span>
            </div>
          </a>
          <a href={window.HOTMART_CHECKOUT_URL} onClick={() => window.trackCheckout('header')} className="header-cta">
            <span className="dot"></span>
            Garantir minha vaga
          </a>
        </div>
      </div>
    </header>);

}

/* ============= VSL com poster custom ============= */
function VSLPlayer() {
  const [playing, setPlaying] = useState(false);
  return (
    <div className="vsl-frame">
      {playing ?
        <iframe
          src="https://www.youtube.com/embed/3aY0ithakts?rel=0&modestbranding=1&autoplay=1"
          title="VSL Curso Método LEGADO"
          frameBorder="0"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
          style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
        /> :
        <button className="vsl-poster" onClick={() => setPlaying(true)} aria-label="Reproduzir apresentação do Método LEGADO">
          <span className="vsl-poster-photo" aria-hidden="true"></span>
          <span className="vsl-poster-grad" aria-hidden="true"></span>
          <span className="vsl-poster-top">
            <span className="vsl-tag"><span className="rec"></span> Apresentação do Método</span>
            <span className="vsl-dur"><Icon.Clock size={12} /> 14 min</span>
          </span>
          <span className="vsl-poster-center">
            <span className="vsl-play-btn"><Icon.Play size={30} /></span>
            <span className="vsl-poster-cta">Pressione play</span>
          </span>
          <span className="vsl-poster-cap">Edivaldo M. Carvalho Neto · Conselheiro e sucessor de 3ª geração</span>
        </button>
      }
    </div>
  );
}

/* ============= HERO ============= */
function Hero() {
  return (
    <section className="hero">
      <ParallaxOrb kind="blue" style={{ top: "10%", right: "-200px" }} />
      <ParallaxOrb kind="gold" style={{ bottom: "10%", left: "-150px", opacity: 0.35 }} />
      <div className="container hero-inner">
        <Reveal className="hero-mentor" delay="1">
          <span className="hero-mentor-photo" aria-hidden="true"></span>
          <span className="hero-mentor-text">
            Com <strong>Edivaldo M. Carvalho Neto</strong>
            <span className="hero-mentor-role">Conselheiro · Sucessor de 3ª geração</span>
          </span>
        </Reveal>
        <Reveal as="h1" className="display h1 hero-headline" delay="2">
          O passo a passo que transforma o filho do dono em <em>líder respeitado</em> pela equipe, pela família e pelo próprio fundador.
        </Reveal>
        <Reveal as="p" className="lead hero-sub" delay="3">
          Se você sente que nasceu dentro da empresa, mas ainda não conquistou seu lugar de verdade,
          esta apresentação pode mudar sua trajetória.
        </Reveal>

        <Reveal stagger className="hero-badges">
          <div className="hero-badge"><span className="hero-badge-num">10 anos</span><span className="hero-badge-lbl">à frente da operação</span></div>
          <div className="hero-badge"><span className="hero-badge-num">270</span><span className="hero-badge-lbl">colaboradores</span></div>
          <div className="hero-badge"><span className="hero-badge-num">R$ 103M</span><span className="hero-badge-lbl">de faturamento</span></div>
        </Reveal>

        <Reveal scale><div className="pre-vsl">
          <div className="pre-vsl-title">
            <Icon.Play size={11} /> Assista antes de decidir · Apresentação do Método LEGADO
          </div>
          <ul>
            <li>O erro número 1 que faz a equipe ainda te ver como filho do dono e como reverter em 30 dias.</li>
            <li>Como conquistar respeito do fundador sem confronto, mesmo se ele já te disse que você "ainda não está pronto".</li>
            <li>O acordo familiar que blinda a empresa de fratura societária na próxima geração.</li>
          </ul>
        </div></Reveal>

        <Reveal scale><VSLPlayer /></Reveal>


        <Reveal><div className="hero-cta-row">
          <a href={window.HOTMART_CHECKOUT_URL} onClick={() => window.trackCheckout('hero')} className="btn btn-primary lg">
            Quero me tornar um líder legítimo
            <span className="btn-arrow"><Icon.ArrowRight /></span>
          </a>
          <div className="hero-cta-fine">
            <span><Icon.Lock /> Pagamento seguro · Hotmart</span>
            <span><Icon.Shield /> Garantia 180 dias</span>
            <span><Icon.Clock /> Acesso imediato</span>
          </div>
        </div></Reveal>

        <Reveal><div className="hero-creds">
          <span className="hero-creds-label">Formação e bagagem do mentor</span>
          <div className="hero-creds-row">
            <span className="hero-cred-logo">FGV<span>MBA</span></span>
            <span className="hero-cred-logo">FDC<span>Conselheiro</span></span>
            <span className="hero-cred-logo">UNAMA<span>Eng. Produção</span></span>
            <span className="hero-cred-logo">75<span>anos de operação</span></span>
          </div>
        </div></Reveal>
      </div>
    </section>);

}

/* ============= PROVA RÁPIDA ============= */
function ProofStrip() {
  return (
    <section className="proof-strip tight">
      <div className="container">
        <div className="proof-grid">
          <Reveal>
            <div className="kicker" style={{ marginBottom: 8 }}>Empresa real · aplicada na prática</div>
            <div className="proof-num">
              <span className="from">De R$ 16 milhões</span>
              <span className="display">R$ <CountUp to={103} suffix="M" duration={1800} /></span>
              <span className="to-tag">Operação de transporte fluvial · 2016 → 2025</span>
            </div>
          </Reveal>
          <Reveal stagger className="proof-pillars">
            <div className="proof-pillar">
              <div className="proof-pillar-num">01</div>
              <div className="proof-pillar-text">Crescimento sustentável.</div>
            </div>
            <div className="proof-pillar">
              <div className="proof-pillar-num">02</div>
              <div className="proof-pillar-text">Gestão profissionalizada.</div>
            </div>
            <div className="proof-pillar">
              <div className="proof-pillar-num">03</div>
              <div className="proof-pillar-text">Paz familiar restaurada.</div>
            </div>
            <div className="proof-pillar">
              <div className="proof-pillar-num">04</div>
              <div className="proof-pillar-text">Clareza de liderança.</div>
            </div>
          </Reveal>
        </div>

        <Reveal><div className="proof-quote">
          <p>
            "Esses números não são do curso. São de <strong>10 anos liderando uma empresa familiar de transporte fluvial</strong> aplicando
            exatamente o que vou te ensinar."
          </p>
          <div className="proof-quote-foot"><span className="proof-quote-avatar" aria-hidden="true"></span><div className="proof-quote-sig">
            <span className="proof-quote-name">Edivaldo M. Carvalho Neto</span>
            <span className="proof-quote-role">Conselheiro · Sucessor de 3ª geração</span>
          </div></div>
        </div></Reveal>
      </div>
    </section>);

}

/* ============= DOR ============= */
function Dor() {
  const items = [
  "Seu pai ou tios centralizam tudo.",
  "Você opina, mas ninguém leva a sério.",
  "A equipe ainda te vê como filho do dono.",
  "A empresa cresce, mas a gestão continua amadora.",
  "Existem conflitos silenciosos.",
  "Você quer assumir, mas não sabe como fazer certo."];

  return (
    <section data-screen-label="04 Dor">
      <div className="container">
        <div className="section-head">
          <h2 className="display h2">Talvez hoje você viva isso.</h2>
        </div>
        <div className="dor-list">
          {items.map((t, i) =>
          <div key={i} className="dor-item">
              <div className="dor-item-num">{String(i + 1).padStart(2, "0")}</div>
              <div className="dor-item-text">{t}</div>
            </div>
          )}
        </div>
        <div className="dor-bottom">
          <div className="dor-bottom-eyebrow">E o pior</div>
          <p className="dor-bottom-line">
            Você sente potencial. <em>Mas ainda não consegue provar valor.</em>
          </p>
        </div>
      </div>
    </section>);

}

/* ============= LEGADO METHOD ============= */
function LegadoMethod() {
  const pillars = [
  { letter: "L", name: "Linha de Sucessão", desc: "Defina papel, cargo e responsabilidades." },
  { letter: "E", name: "Estrutura de Gestão", desc: "Indicadores, metas, DRE e gestão profissional." },
  { letter: "G", name: "Ganho de Credibilidade", desc: "Respeito conquistado através de entregas reais." },
  { letter: "A", name: "Alinhamento Familiar", desc: "Separar emoção de decisão." },
  { letter: "D", name: "Documento de Governança", desc: "Regras claras e acordos maduros." },
  { letter: "O", name: "Operação Sustentável", desc: "Autonomia e continuidade." }];

  return (
    <section className="legado-section" data-screen-label="05 Método LEGADO">
      <div className="container">
        <div className="section-head" style={{ textAlign: "center", margin: "0 auto 28px", alignItems: "center" }}>
          <h2 className="display h2">Conheça o Método LEGADO.</h2>
          <p className="lead" style={{ maxWidth: "56ch" }}>
            Seis pilares modulares. Você começa pelo que mais arde na sua empresa e segue na ordem que faz
            sentido para a sua sucessão.
          </p>
        </div>

        <div className="legado-states">
          <div className="legado-state legado-state-from">
            <span className="legado-state-label">Você entra como</span>
            <span className="legado-state-text">Herdeiro inseguro</span>
          </div>
          <div className="legado-state-arrow"><Icon.ArrowRight /></div>
          <div className="legado-state legado-state-to">
            <span className="legado-state-label">Você sai como</span>
            <span className="legado-state-text">Líder legítimo</span>
          </div>
        </div>

        <Reveal stagger><div className="legado-pillars">
          {pillars.map((p, i) =>
            <article key={p.letter} className="legado-pillar-card" data-pillar={p.letter}>
              <div className="legado-pillar-num">Pilar {String(i + 1).padStart(2, "0")}</div>
              <div className="legado-pillar-letter" aria-hidden="true">{p.letter}</div>
              <div className="legado-pillar-body">
                <h3 className="legado-pillar-name">{p.name}</h3>
                <p className="legado-pillar-desc">{p.desc}</p>
              </div>
              <div className="legado-pillar-corner" aria-hidden="true"></div>
            </article>
          )}
        </div></Reveal>

        <div className="legado-modular-tag">
          <span className="legado-modular-dot"></span>
          O método é modular. Comece pelo pilar que mais arde na sua empresa.
        </div>
      </div>
    </section>);

}

/* ============= BENEFÍCIOS ============= */
function Beneficios() {
  const items = [
  "Ser respeitado pela competência, não pelo sobrenome.",
  "Reduzir conflitos familiares.",
  "Liderar com segurança.",
  "Modernizar a empresa.",
  "Preservar o legado.",
  "Crescer com estrutura.",
  "Assumir com legitimidade.",
  "Decidir com método, não no improviso."];

  return (
    <section data-screen-label="06 Benefícios">
      <div className="container">
        <div className="section-head">
          <h2 className="display h2">Com isso, você poderá:</h2>
        </div>
        <div className="benefit-list">
          {items.map((t, i) =>
          <div key={i} className="benefit-item">
              <div className="benefit-num">{String(i + 1).padStart(2, "0")}</div>
              <div className="benefit-text">{t}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ============= CTA BAND ============= */
function CtaBand({ text, label = "Quero entrar no Método LEGADO" }) {
  return (
    <section className="cta-band tight">
      <div className="container-narrow">
        <p className="cta-band-text">{text}</p>
        <a href={window.HOTMART_CHECKOUT_URL} onClick={() => window.trackCheckout('cta-band')} className="btn btn-primary lg">
          {label} <span className="btn-arrow"><Icon.ArrowRight /></span>
        </a>
      </div>
    </section>);

}

window.LegadoComponentsA = { Icon, SiteHeader, Hero, ProofStrip, Dor, LegadoMethod, Beneficios, CtaBand };
Object.assign(window, { Icon, SiteHeader, Hero, ProofStrip, Dor, LegadoMethod, Beneficios, CtaBand });