// Header + Hero
const { useState, useEffect, useRef } = React;

const WHATSAPP_LINK = "https://wa.me/16892664002?text=Oi%20J%C3%BAnior%2C%20vi%20seu%20site%20e%20quero%20saber%20mais.";
const WHATSAPP_INSTAGRAM = "https://wa.me/16892664002?text=Oi%20J%C3%BAnior%2C%20quero%20crescer%20no%20Instagram%20e%20monetizar.";
const WHATSAPP_NEGOCIOS = "https://wa.me/16892664002?text=Oi%20J%C3%BAnior%2C%20quero%20abrir%20ou%20escalar%20meu%20neg%C3%B3cio%20nos%20EUA.";

const NAV_ITEMS = [
  { id: "mentoria", label: "Mentorias" },
  { id: "impacto", label: "Impacto B2B" },
  { id: "produtos", label: "Produtos" },
  { id: "parceiros", label: "Parceiros" },
  { id: "checklist", label: "Checklist" },
];

const Header = ({ activeSection }) => {
  const [open, setOpen] = useState(false);
  return (
    <header className="site-header">
      <div className="container">
        <a href="#top" className="brand" aria-label="Curiosidade na América — início">
          <span className="brand-mark">CA</span>
          <span className="brand-text">
            Curiosidade<br/>na&nbsp;América
            <small>Por Júnior Costa</small>
          </span>
        </a>
        <nav className="nav" aria-label="Principal">
          {NAV_ITEMS.map(n => (
            <a key={n.id} href={`#${n.id}`} className={activeSection === n.id ? "active" : ""}>{n.label}</a>
          ))}
        </nav>
        <a href={WHATSAPP_LINK} target="_blank" rel="noopener" className="btn btn-primary nav-cta">
          Falar com Júnior <Icon name="arrow-right" size={16}/>
        </a>
        <button className="menu-btn" aria-label="Abrir menu" aria-expanded={open} onClick={() => setOpen(o => !o)}>
          <Icon name={open ? "close" : "menu"} size={22}/>
        </button>
      </div>
      <div className={`mobile-menu ${open ? "open" : ""}`} aria-hidden={!open}>
        {NAV_ITEMS.map(n => (
          <a key={n.id} href={`#${n.id}`} onClick={() => setOpen(false)}>{n.label}</a>
        ))}
        <a href={WHATSAPP_LINK} target="_blank" rel="noopener" className="btn btn-primary" style={{ marginTop: 24, alignSelf: "flex-start" }}>
          Falar no WhatsApp <Icon name="arrow-right" size={16}/>
        </a>
      </div>
    </header>
  );
};

// Hero — editorial split
const Hero = ({ heroVariant }) => {
  return (
    <section id="top" className="hero" aria-label="Introdução">
      <style>{`
        .hero { padding-top: clamp(40px, 6vw, 72px); padding-bottom: clamp(40px, 6vw, 80px); }
        .hero-grid {
          display: grid;
          grid-template-columns: 1fr;
          gap: clamp(32px, 5vw, 64px);
          align-items: stretch;
        }
        @media (min-width: 980px) {
          .hero-grid { grid-template-columns: 1.05fr 1fr; gap: 64px; }
        }
        .hero-badge {
          display: inline-flex;
          align-items: center;
          gap: 14px;
          background: var(--soft);
          color: var(--ink);
          padding: 10px 16px;
          border-radius: 999px;
          font-size: 12px;
          font-weight: 500;
          letter-spacing: 0.02em;
        }
        .hero-badge .pip {
          width: 6px; height: 6px; border-radius: 50%;
          background: var(--accent);
          box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent);
        }
        .hero-badge strong { font-weight: 700; }
        .hero h1 {
          font-size: clamp(44px, 8vw, 96px);
          line-height: 0.96;
          margin-top: 28px;
        }
        .hero h1 em {
          font-style: italic;
          font-weight: 400;
          color: var(--accent);
        }
        .hero .lede {
          font-size: clamp(16px, 1.6vw, 19px);
          color: var(--ink-2);
          margin-top: 24px;
          max-width: 48ch;
          line-height: 1.55;
        }
        .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
        .hero-meta {
          margin-top: 56px;
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 18px;
          padding-top: 28px;
          border-top: 1px solid var(--border);
        }
        .hero-meta dt {
          font-family: var(--mono);
          font-size: 10px;
          letter-spacing: 0.18em;
          color: var(--ink-2);
          text-transform: uppercase;
          margin-bottom: 6px;
        }
        .hero-meta dd {
          margin: 0;
          font-family: var(--serif);
          font-size: clamp(22px, 2.6vw, 32px);
          font-weight: 500;
          letter-spacing: -0.01em;
        }
        .hero-media {
          position: relative;
          aspect-ratio: 4/5;
          border-radius: var(--radius-lg);
          overflow: hidden;
          isolation: isolate;
        }
        @media (min-width: 980px) {
          .hero-media { aspect-ratio: auto; min-height: 620px; }
        }
        .hero-media .frame-meta {
          position: absolute;
          inset: auto 16px 16px 16px;
          display: flex;
          justify-content: space-between;
          align-items: end;
          color: #fff;
          z-index: 2;
          font-family: var(--mono);
          font-size: 10px;
          letter-spacing: 0.18em;
          text-transform: uppercase;
        }
        .hero-media .frame-meta .num {
          font-family: var(--serif);
          font-size: 56px;
          letter-spacing: -0.04em;
          line-height: 1;
          color: var(--accent);
          font-style: italic;
        }
        .play-pill {
          position: absolute;
          left: 16px; top: 16px;
          z-index: 2;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 8px 14px 8px 10px;
          background: rgba(255,255,255,0.92);
          color: var(--ink);
          font-size: 11px;
          font-weight: 600;
          letter-spacing: 0.06em;
          text-transform: uppercase;
          border-radius: 999px;
          backdrop-filter: blur(8px);
        }
        .play-pill span.dot {
          width: 22px; height: 22px;
          border-radius: 50%;
          background: var(--ink);
          color: #fff;
          display: grid; place-items: center;
        }
      `}</style>
      <div className="container">
        <div className="hero-grid">
          <div>
            <div className="hero-badge reveal">
              <span className="pip"></span>
              <span><strong>+61M</strong> visualizações</span>
              <span style={{ width: 1, height: 14, background: "var(--ink-2)", opacity: 0.3 }}></span>
              <span><strong>+340K</strong> seguidores</span>
            </div>
            <h1 className="reveal" data-delay="1">
              Clareza para criar,<br/>
              estruturar e <em>lançar.</em>
            </h1>
            <p className="lede reveal" data-delay="2">
              Saturado de gestores de tráfego e promessas vazias?
              Você provavelmente já tem o produto — o que falta é
              alguém que entre no seu contexto, enxergue o que está
              travado e acompanhe até o resultado. Sem achismo.
              Com presença e estratégia real.
            </p>
            <div className="hero-ctas reveal" data-delay="3">
              <a href={WHATSAPP_INSTAGRAM} target="_blank" rel="noopener" className="btn btn-primary">
                Crescer no Instagram <Icon name="arrow-right" size={16}/>
              </a>
              <a href={WHATSAPP_NEGOCIOS} target="_blank" rel="noopener" className="btn btn-ghost">
                Negócios nos EUA <Icon name="arrow-up-right" size={16}/>
              </a>
            </div>
            <dl className="hero-meta reveal" data-delay="4">
              <div>
                <dt>Anos empreendendo</dt>
                <dd>20+</dd>
              </div>
              <div>
                <dt>Clientes atendidos</dt>
                <dd>800+</dd>
              </div>
              <div>
                <dt>Visualizações</dt>
                <dd>+60M</dd>
              </div>
            </dl>
          </div>
          <div className="hero-media reveal" data-delay="2">
            <img src="assets/junior.jpeg" alt="Júnior Costa em seu escritório em Orlando" loading="eager" style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}/>
            <div style={{ position: "absolute", inset: 0, background: "linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%)", zIndex: 1 }}></div>
            <div className="frame-meta">
              <div>
                <div>Júnior Costa</div>
                <div style={{ opacity: 0.7 }}>Orlando, FL · 2026</div>
              </div>
              <div className="num">01</div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Header = Header;
window.Hero = Hero;
window.NAV_ITEMS = NAV_ITEMS;
window.WHATSAPP_LINK = WHATSAPP_LINK;
window.WHATSAPP_INSTAGRAM = WHATSAPP_INSTAGRAM;
window.WHATSAPP_NEGOCIOS = WHATSAPP_NEGOCIOS;