// sections.jsx — Header, sections & footer for Ultra 3D Brasil
const { useState: useStateS, useEffect: useEffectS } = React;

function WAIcon({ s = 20 }) {
  return (
    <svg viewBox="0 0 24 24" style={{ width: s, height: s }} fill="currentColor">
      <path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.25-1.38a9.9 9.9 0 004.79 1.22c5.46 0 9.91-4.45 9.91-9.91S17.5 2 12.04 2zm0 18.15c-1.48 0-2.93-.4-4.2-1.15l-.3-.18-3.12.82.83-3.04-.2-.31a8.2 8.2 0 01-1.26-4.38c0-4.54 3.7-8.23 8.25-8.23 4.54 0 8.23 3.69 8.23 8.23 0 4.54-3.69 8.24-8.23 8.24zm4.52-6.16c-.25-.12-1.47-.72-1.69-.81-.23-.08-.39-.12-.56.12-.16.25-.64.81-.78.97-.14.17-.29.19-.54.06-.25-.12-1.05-.39-1.99-1.23-.74-.66-1.23-1.47-1.38-1.72-.14-.25-.01-.38.11-.5.11-.11.25-.29.37-.43.13-.14.17-.25.25-.41.08-.17.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31-.22.25-.86.85-.86 2.07s.89 2.4 1.01 2.56c.12.17 1.75 2.67 4.23 3.74.59.26 1.05.41 1.41.52.59.19 1.13.16 1.56.1.48-.07 1.47-.6 1.68-1.18.21-.58.21-1.07.14-1.18-.06-.1-.22-.16-.47-.28z"/>
    </svg>
  );
}
function IGIcon() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="1.1" fill="currentColor" stroke="none"/></svg>;
}
function MailIcon() {
  return <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>;
}

function Header() {
  const [scrolled, setScrolled] = useStateS(false);
  useEffectS(() => {
    const on = () => setScrolled(window.scrollY > 30);
    on();
    window.addEventListener("scroll", on, { passive: true });
    return () => window.removeEventListener("scroll", on);
  }, []);
  const links = [
    ["Catálogo", "#catalogo"], ["Como funciona", "#como"],
    ["Personalização", "#personalizar"], ["Loja", "https://loja.ultra3dbrasil.com.br"], ["Sobre", "#sobre"], ["Avaliações", "#avaliacoes"],
  ];
  return (
    <header className={"hdr" + (scrolled ? " scrolled" : "")}>
      <div className="wrap hdr-inner">
        <a className="logo" href="#inicio"><img src="assets/logo-ultra-blue.png" alt="Ultra 3D Brasil" /></a>
        <nav className="nav">
          {links.map(([t, h]) => <a key={h} href={h}>{t}</a>)}
        </nav>
        <div className="hdr-cta">
          <a className="btn btn-gold" href={WHATSAPP} target="_blank" rel="noopener"><WAIcon s={18} /> Falar no WhatsApp</a>
        </div>
      </div>
    </header>
  );
}

function Marquee() {
  const items = ["God of War", "Star Wars", "Chaveiros", "Bonecos fofos", "Topos de bolo", "Colecionáveis", "Decoração", "Brindes corporativos", "Lembrancinhas"];
  const row = [...items, ...items];
  return (
    <div className="marquee" aria-hidden="true">
      <div className="marquee-track">
        {row.map((t, i) => (
          <React.Fragment key={i}><span className="item">{t}</span><span className="sep">✦</span></React.Fragment>
        ))}
      </div>
    </div>
  );
}

function Catalog() {
  const [active, setActive] = useStateS("Todos");
  const list = active === "Todos" ? PRODUCTS : PRODUCTS.filter(p => p.cat === active);
  return (
    <section className="section" id="catalogo">
      <div className="wrap">
        <div className="shead r">
          <span className="eyebrow">Catálogo</span>
          <h2 className="serif">Escolha seu personagem.<br />A gente <span className="italic-accent">dá forma</span>.</h2>
          <p>Modelos prontos para pedir ou inspiração para a sua encomenda personalizada. Toda peça sai sob demanda, do seu jeito.</p>
        </div>
        <div className="filters r">
          {CATEGORIES.map(c => (
            <button key={c} className={"chip-btn" + (active === c ? " active" : "")} onClick={() => setActive(c)}>{c}</button>
          ))}
        </div>
        <div className="cat-grid">
          {list.map((p, i) => (
            <article className={"card r d" + ((i % 3) + 1)} key={p.id}>
              <div className="ph">
                <span className="ltag">{p.cat}</span>
                <image-slot id={"prod-" + p.id} src={p.img} placeholder={"Foto · " + p.name}></image-slot>
              </div>
              <div className="body">
                <h3 className="serif">{p.name}</h3>
                <p className="desc">{p.desc}</p>
                <div className="foot">
                  <span className="price">{p.price}</span>
                  <a className="ask" href={WHATSAPP} target="_blank" rel="noopener">Pedir <span className="arrow">→</span></a>
                </div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function HowItWorks() {
  return (
    <section className="section" id="como" style={{ background: "var(--paper-2)" }}>
      <div className="wrap">
        <div className="shead center r">
          <span className="eyebrow">Como funciona</span>
          <h2 className="serif">Da ideia à sua mão em <span className="italic-accent">4 passos</span>.</h2>
        </div>
        <div className="steps">
          {STEPS.map((s, i) => (
            <div className={"step r d" + (i + 1)} key={s.n}>
              <Icon name={s.ic} className="ic" />
              <div className="num">{s.n}</div>
              <h3 className="serif">{s.t}</h3>
              <p>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Customization() {
  const feats = ["Modelagem do zero a partir de foto ou referência", "Escolha de cor, tamanho e base", "Mockup pra aprovar antes de imprimir"];
  return (
    <section className="section" id="personalizar">
      <div className="wrap">
        <div className="custom r">
          <div className="custom-inner">
            <div className="txt">
              <span className="eyebrow">Personalização</span>
              <h2 className="serif">Tem uma ideia na cabeça? Manda pra gente.</h2>
              <p>Personagem de jogo, mascote da empresa, lembrancinha de festa ou aquele presente impossível de achar pronto. Se dá pra modelar, a gente imprime.</p>
              <ul className="feats">
                {feats.map((f, i) => <li key={i}><span className="tick">✓</span>{f}</li>)}
              </ul>
              <a className="btn btn-gold" href={WHATSAPP} target="_blank" rel="noopener"><WAIcon s={18} /> Enviar minha ideia</a>
            </div>
            <a className="drop" href={WHATSAPP} target="_blank" rel="noopener">
              <div className="dropbox">
                <Icon name="upload" />
                <b>Arraste sua referência</b>
                <span>ou toque pra enviar pelo WhatsApp</span>
              </div>
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

function About() {
  return (
    <section className="section" id="sobre">
      <div className="wrap">
        <div className="about-grid">
          <div className="about-img r">
            <image-slot id="about-priscilla" src="uploads/3d2.jpg" placeholder="Foto do ateliê / impressora"></image-slot>
            <div className="badge"><b className="serif">Priscilla</b><span>Fundadora &amp; designer</span></div>
          </div>
          <div className="about r d1">
            <span className="eyebrow">Sobre</span>
            <h2 className="serif" style={{ fontSize: "clamp(30px,4vw,52px)", lineHeight: 1.05, margin: "14px 0 8px" }}>
              Cada peça nasce de uma ideia <span className="italic-accent">— e de um capricho digital</span>.
            </h2>
            <p>A Ultra 3D Brasil é um ateliê de impressão 3D que une tecnologia de ponta ao cuidado artesanal: do desenho do arquivo ao acabamento manual, cada item passa pela nossa mão antes de chegar à sua.</p>
            <blockquote className="quote">"Gosto quando o cliente segura a peça e sorri. É aí que o trabalho fez sentido."</blockquote>
            <p>Atendemos de peças únicas a brindes corporativos em lote, sempre com prazo combinado e contato direto com quem produz.</p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Reviews() {
  return (
    <section className="section" id="avaliacoes" style={{ background: "var(--paper-2)" }}>
      <div className="wrap">
        <div className="shead center r">
          <span className="eyebrow">Avaliações</span>
          <h2 className="serif">Quem pediu, <span className="italic-accent">sorriu</span>.</h2>
        </div>
        <div className="rev-grid">
          {REVIEWS.map((rv, i) => (
            <div className={"rev r d" + (i + 1)} key={i}>
              <div className="stars">{[0, 0, 0, 0, 0].map((_, k) => <Star key={k} />)}</div>
              <p className="q serif">"{rv.q}"</p>
              <div className="who">
                <span className="av">{rv.i}</span>
                <div><b>{rv.n}</b><span>{rv.r}</span></div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" id="contato">
      <div className="wrap foot-cta r">
        <h2 className="serif">Bora tirar sua ideia <i>do papel</i>?</h2>
        <a className="btn btn-gold" href={WHATSAPP} target="_blank" rel="noopener" style={{ fontSize: 16, padding: "18px 32px" }}>
          <WAIcon s={20} /> Pedir orçamento agora
        </a>
      </div>
      <div className="wrap foot-main">
        <div>
          <div className="logo"><img src="assets/logo-ultra-white.png" alt="Ultra 3D Brasil" /></div>
          <p>Impressão 3D de personagens, colecionáveis, chaveiros e brindes personalizados. Feito à mão, no Brasil.</p>
        </div>
        <div className="foot-col">
          <h4>Navegar</h4>
          <a href="#catalogo">Catálogo</a>
          <a href="#como">Como funciona</a>
          <a href="#personalizar">Personalização</a>
          <a href="#sobre">Sobre</a>
        </div>
        <div className="foot-col">
          <h4>Categorias</h4>
          <a href="#catalogo">God of War</a>
          <a href="#catalogo">Star Wars</a>
          <a href="#catalogo">Chaveiros</a>
          <a href="#catalogo">Bonecos fofos</a>
        </div>
        <div className="foot-col">
          <h4>Contato</h4>
          <a href={WHATSAPP} target="_blank" rel="noopener">WhatsApp</a>
          <a href={INSTAGRAM} target="_blank" rel="noopener">@ultra3dbrasil</a>
          <span>Brasil</span>
        </div>
      </div>
      <div className="wrap foot-bottom">
        <span>© {new Date().getFullYear()} Ultra 3D Brasil. Todos os direitos reservados.</span>
        <div className="socials">
          <a href={WHATSAPP} target="_blank" rel="noopener" aria-label="WhatsApp"><WAIcon s={18} /></a>
          <a href={INSTAGRAM} target="_blank" rel="noopener" aria-label="Instagram"><IGIcon /></a>
          <a href="#contato" aria-label="E-mail"><MailIcon /></a>
        </div>
      </div>
    </footer>
  );
}

function WAFloat() {
  return <a className="wa-float" href={WHATSAPP} target="_blank" rel="noopener" aria-label="WhatsApp"><WAIcon s={32} /></a>;
}

Object.assign(window, { Header, Marquee, Catalog, HowItWorks, Customization, About, Reviews, Footer, WAFloat });