/* Us Para Você — page sections */

function Header() {
  return (
    <header className="site-header" id="top">
      <div className="container header-row">
        <BrandMark />
        <nav className="nav-links" aria-label="principal">
          <a href="#jornada">Como Funciona</a>
          <a href="#servicos">Serviços</a>
          <a href="#faq">FAQ</a>
        </nav>
        <a href="https://wa.me/18436189874" className="btn btn-outline" aria-label="Falar com consultor no WhatsApp">
          Falar com Consultor
        </a>
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero">
      <span className="hero-blob b1" aria-hidden="true" />
      <span className="hero-blob b2" aria-hidden="true" />
      <div className="container hero-grid">
        <div className="hero-copy">
          <Reveal as="span" className="hero-eyebrow">
            <span className="dot" />
            <span>Florence, SC <strong>→</strong> Brasil inteiro</span>
          </Reveal>
          <Reveal as="h1" delay={1}>
            O melhor dos EUA, com a <em>segurança</em> que você merece e a{" "}
            <span className="accent-underline">praticidade</span> que você precisa.
          </Reveal>
          <Reveal as="p" className="hero-sub" delay={2}>
            Sua ponte exclusiva para as melhores lojas americanas. Tenha um endereço em
            Florence, South Carolina, e receba em qualquer lugar do Brasil — com fotos
            reais de cada item, consolidação inteligente e suporte 100% em português.
          </Reveal>
          <Reveal className="hero-cta-row" delay={3} id="download">
            <StoreBadge kind="apple" />
            <StoreBadge kind="play" />
          </Reveal>
          <Reveal className="hero-trust" delay={4}>
            <span className="ht-item"><Icon.Check /> +12 anos de operação</span>
            <span className="ht-item"><Icon.Check /> Suporte em PT-BR</span>
            <span className="ht-item"><Icon.Check /> Seguro de carga</span>
          </Reveal>
        </div>

        <Reveal className="hero-mockup-wrap" delay={2}>
          <div className="mockup-stage">
            <div className="mockup-bg-circle" aria-hidden="true" />

            {/* Floating chip top-left */}
            <div className="floating-chip" style={{ top: "8%", left: "-2%" }}>
              <span className="fc-ico" style={{ background: "rgba(31,157,107,.12)", color: "#1F9D6B" }}>
                <Icon.Pin size={18} />
              </span>
              <span className="fc-text">
                <span className="l1">Seu endereço nos EUA</span>
                <span className="l2">Florence, SC · Suite 1</span>
              </span>
            </div>

            {/* Floating chip bottom-right */}
            <div className="floating-chip" style={{ bottom: "10%", right: "-4%" }}>
              <span className="fc-ico" style={{ background: "rgba(212,175,55,.16)", color: "#B8941F" }}>
                <Icon.Pkg size={20} />
              </span>
              <span className="fc-text">
                <span className="l1">Caixas recebidas</span>
                <span className="l2">74 · em conferência</span>
              </span>
            </div>

            <div className="iphone-frame">
              <CreditosMockup />
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Jornada() {
  const steps = [
    {
      n: "01",
      icon: <Icon.Pin size={28} />,
      title: "Endereço Exclusivo",
      desc: "Ao se cadastrar no app, você recebe instantaneamente seu endereço físico em Florence, SC. Compre em qualquer loja online dos EUA.",
      tag: null
    },
    {
      n: "02",
      icon: <Icon.Camera size={28} />,
      title: "Gestão Transparente",
      desc: "Recebemos suas encomendas e enviamos fotos reais de cada item dentro do app. Conferência total antes de você decidir o envio.",
      tag: null
    },
    {
      n: "03",
      icon: <Icon.Boxes size={28} />,
      title: "Consolidação Inteligente",
      desc: "Junte várias compras em uma única caixa. Reduza o volume e otimize o frete internacional com a nossa logística.",
      tag: "Economize até 70%"
    }
  ];

  return (
    <section className="sec" id="jornada">
      <div className="container">
        <div className="sec-head">
          <Reveal as="span" className="eyebrow">Sua Jornada</Reveal>
          <Reveal as="h2" delay={1}>
            Da loja americana até a sua porta — <em style={{ fontStyle: "italic", color: "var(--terracotta)" }}>simples assim</em>.
          </Reveal>
          <Reveal as="p" delay={2}>
            Três passos transparentes, gerenciados de ponta a ponta dentro do nosso app.
          </Reveal>
        </div>

        <div className="jornada-grid">
          {steps.map((s, i) => (
            <Reveal key={s.n} className="j-card" delay={i + 1}>
              <div className="j-step">{s.icon}</div>
              <div style={{ display: "flex", alignItems: "baseline", gap: 10, marginBottom: 6 }}>
                <span style={{ fontFamily: "var(--f-display)", fontSize: 14, color: "var(--terracotta)", fontWeight: 600 }}>{s.n}</span>
              </div>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              {s.tag && <span className="j-savings"><Icon.Check size={12} /> {s.tag}</span>}
            </Reveal>
          ))}
        </div>

        <Reveal className="trust-banner" delay={4}>
          <div className="tb-item">
            <span className="tb-icon"><Icon.Shield /></span>
            <span className="tb-text">
              <span className="t1">Seguro de Carga</span>
              <span className="t2">Cobertura completa em trânsito</span>
            </span>
          </div>
          <div className="tb-item">
            <span className="tb-icon"><Icon.ChatHeart /></span>
            <span className="tb-text">
              <span className="t1">Suporte 100% PT-BR</span>
              <span className="t2">Equipe brasileira no app</span>
            </span>
          </div>
          <div className="tb-item">
            <span className="tb-icon"><Icon.Lock /></span>
            <span className="tb-text">
              <span className="t1">Pagamento Seguro</span>
              <span className="t2">PIX, cartão e wallet</span>
            </span>
          </div>
          <div className="tb-item">
            <span className="tb-icon"><Icon.Pkg /></span>
            <span className="tb-text">
              <span className="t1">Tax-Free Otimizado</span>
              <span className="t2">SC favorece sua tributação</span>
            </span>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

function Servicos() {
  const services = [
    {
      icon: <Icon.Bag size={28} />,
      title: "Personal Shopper",
      desc: "Nossa equipe vai às lojas físicas — outlets e lojas de departamento — por você. Experiência VIP em tempo real.",
      bullets: ["Visita guiada via vídeo", "Negociação de preço local", "Garimpo em outlets"],
      vip: true,
      featured: true
    },
    {
      icon: <Icon.Card size={28} />,
      title: "Compra Assistida",
      desc: "Facilitamos suas compras em sites que não aceitam cartões brasileiros ou exigem cadastro local nos EUA.",
      bullets: ["Pagamento em USD por você", "Cadastro com endereço local", "Conversão pelo câmbio do dia"],
      vip: false
    },
    {
      icon: <Icon.Users size={28} />,
      title: "Grupos de Compras",
      desc: "Acesso a oportunidades exclusivas com preços de atacado, abertas direto no app por tempo limitado.",
      bullets: ["Lojas premium americanas", "Promoções por janela curta", "Lotes coletivos"],
      vip: false
    }
  ];

  return (
    <section className="sec alt" id="servicos">
      <div className="container">
        <div className="sec-head">
          <Reveal as="span" className="eyebrow">Serviços sob Demanda</Reveal>
          <Reveal as="h2" delay={1}>
            Mais que redirecionamento — <em style={{ fontStyle: "italic", color: "var(--terracotta)" }}>atendimento concierge</em>.
          </Reveal>
          <Reveal as="p" delay={2}>
            Quando você precisa de algo além da caixa, a gente vai junto.
          </Reveal>
        </div>

        <div className="svc-grid">
          {services.map((s, i) => (
            <Reveal key={s.title} className={`svc-card ${s.featured ? "featured" : ""}`} delay={i + 1}>
              {s.vip && <span className="svc-vip-badge"><Icon.Sparkle size={12} /> VIP</span>}
              <span className="svc-icon">{s.icon}</span>
              <h3>{s.title}</h3>
              <p>{s.desc}</p>
              <ul className="svc-list">
                {s.bullets.map(b => (
                  <li key={b}><Icon.Check size={14} /> {b}</li>
                ))}
              </ul>
              <a href="#download" className="svc-action">
                Solicitar no app <Icon.Arrow size={16} />
              </a>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

function FAQFooter() {
  const [open, setOpen] = useState(0);
  const faqs = [
    { q: "É seguro receber minhas compras aí?", a: "Sim. Operamos há mais de uma década com seguro de carga, fotos individuais de cada item recebido e protocolos de conferência antes do envio internacional." },
    { q: "Como calculo o frete internacional?", a: "Dentro do app você simula o frete pelo peso e dimensão consolidados da sua caixa. Quanto mais itens você consolida, menor o custo por unidade." },
    { q: "Posso comprar em qualquer loja americana?", a: "Sim, qualquer loja online dos EUA que aceite envio doméstico. Para sites que não aceitam cartões brasileiros, use nosso serviço de Compra Assistida." },
    { q: "Quanto tempo leva para chegar ao Brasil?", a: "Em média de 7 a 15 dias úteis após o envio, dependendo da modalidade escolhida e do desembaraço alfandegário." },
    { q: "Há cobrança de imposto?", a: "Compras internacionais podem ser tributadas conforme regras da Receita Federal. Nossa equipe orienta sobre o regime de tributação simplificada." },
    { q: "Posso devolver um item que não serviu?", a: "Sim, antes do envio internacional. Como você vê fotos reais de cada item dentro do app, decide o que enviar e o que devolver à loja americana." },
  ];

  return (
    <footer className="site-footer" id="faq">
      <div className="container">
        <div style={{ marginBottom: 64 }}>
          <Reveal as="span" className="eyebrow" style={{ color: "var(--gold-soft)" }}>Perguntas frequentes</Reveal>
          <Reveal as="h2" delay={1} className="h-display" style={{ fontSize: "clamp(28px, 3.6vw, 40px)", color: "white", margin: "12px 0 32px", maxWidth: 720 }}>
            Tudo que você queria perguntar antes de baixar o app.
          </Reveal>

          <div className="faq-grid">
            {faqs.map((f, i) => (
              <div key={i} className={`faq-item ${open === i ? "open" : ""}`} onClick={() => setOpen(open === i ? -1 : i)}>
                <div className="faq-q">
                  <span>{f.q}</span>
                  <Icon.Plus />
                </div>
                <div className="faq-a">{f.a}</div>
              </div>
            ))}
          </div>
        </div>

        <div className="footer-grid">
          <div>
            <BrandMark onDark />
            <p className="footer-tag">
              Sua ponte exclusiva entre as lojas americanas e o Brasil. Operamos com a
              tranquilidade de um endereço próprio em Florence, SC.
            </p>
            <div className="footer-stores">
              <StoreBadge kind="apple" />
              <StoreBadge kind="play" />
            </div>
          </div>

          <div>
            <h4>Navegação</h4>
            <ul>
              <li><a href="#top">Início</a></li>
              <li><a href="#jornada">Como Funciona</a></li>
              <li><a href="#servicos">Serviços</a></li>
              <li><a href="#faq">FAQ</a></li>
            </ul>
          </div>

          <div>
            <h4>Serviços</h4>
            <ul>
              <li><a href="#servicos">Redirecionamento</a></li>
              <li><a href="#servicos">Personal Shopper</a></li>
              <li><a href="#servicos">Compra Assistida</a></li>
              <li><a href="#servicos">Grupos de Compras</a></li>
            </ul>
          </div>

          <div>
            <h4>Fale conosco</h4>
            <ul>
              <li><a href="https://wa.me/18436189874">WhatsApp Consultor</a></li>
              <li><a href="mailto:usparavoce@gmail.com">usparavoce@gmail.com</a></li>
              <li><a href="#download">Baixar o app</a></li>
            </ul>
          </div>
        </div>

        <div className="footer-bottom">
          <span className="footer-loc">
            <Icon.Pin /> Us Para Você — De Florence, SC para sua casa no Brasil
          </span>
          <span>© {new Date().getFullYear()} Us Para Você. Todos os direitos reservados.</span>
        </div>
      </div>
    </footer>
  );
}

function WhatsAppFAB() {
  const [showTip, setShowTip] = useState(false);
  useEffect(() => {
    const t = setTimeout(() => setShowTip(true), 2400);
    const t2 = setTimeout(() => setShowTip(false), 8000);
    return () => { clearTimeout(t); clearTimeout(t2); };
  }, []);
  return (
    <>
      <span className={`wa-tooltip ${showTip ? "show" : ""}`}>Tire sua dúvida agora</span>
      <a href="https://wa.me/18436189874" className="wa-fab" aria-label="Falar com consultor no WhatsApp"
         onMouseEnter={() => setShowTip(true)} onMouseLeave={() => setShowTip(false)}>
        <Icon.Whats />
      </a>
    </>
  );
}

Object.assign(window, { Header, Hero, Jornada, Servicos, FAQFooter, WhatsAppFAB });