// app.jsx — YetiShopping main App

const { useState, useEffect, useRef } = React;

// ─────────────────────────────────────────────────────────────────────────────
// Histórico de busca (localStorage)
function useSearchHistory() {
  const [history, setHistory] = useState(() => {
    try { return JSON.parse(localStorage.getItem("yeti_hist") || "[]"); } catch { return []; }
  });
  function add(term) {
    setHistory(prev => {
      const updated = [term, ...prev.filter(h => h !== term)].slice(0, 6);
      localStorage.setItem("yeti_hist", JSON.stringify(updated));
      return updated;
    });
  }
  function remove(term) {
    setHistory(prev => {
      const updated = prev.filter(h => h !== term);
      localStorage.setItem("yeti_hist", JSON.stringify(updated));
      return updated;
    });
  }
  return { history, add, remove };
}

// ─────────────────────────────────────────────────────────────────────────────
// Hook: busca AliExpress — skeleton enquanto carrega, produtos reais depois
function useSearch(keyword, size = 12, sort = "") {
  const [products, setProducts] = useState(makeSkeleton(size));
  const [loading, setLoading]   = useState(true);

  useEffect(() => {
    if (!keyword) { setLoading(false); return; }
    let cancelled = false;
    setLoading(true);
    setProducts(makeSkeleton(size));
    YetiAPI.search(keyword, { size, sort }).then(list => {
      if (!cancelled) { setProducts(list); setLoading(false); }
    });
    return () => { cancelled = true; };
  }, [keyword, sort]);

  return { products, loading };
}

// ─────────────────────────────────────────────────────────────────────────────
// Header — design original YetiShopping
function Header({ onLogo, onSearch, query, setQuery }) {
  return (
    <header style={{
      position: "sticky", top: 0, zIndex: 50,
      background: "rgba(250,246,236,.95)", backdropFilter: "blur(12px)",
      WebkitBackdropFilter: "blur(12px)", borderBottom: "1px solid #E8E1CC",
    }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", padding: "10px 24px", display: "flex", alignItems: "center", gap: 20 }}>
        <button onClick={onLogo} style={{ display: "flex", alignItems: "center", gap: 8, background: "none", border: 0, cursor: "pointer", padding: 0 }}>
          <img src="assets/yeti-icon.png" alt="" style={{ width: 48, height: 48 }}/>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: "#0E2A47", letterSpacing: "-.02em" }}>
            yeti<span style={{ color: "#FFC72C", WebkitTextStroke: "0.5px #0E2A47" }}>shopping</span>
          </span>
        </button>

        <div style={{ flex: 1, maxWidth: 460, position: "relative" }}>
          <input value={query} onChange={e => setQuery(e.target.value)}
            onKeyDown={e => e.key === "Enter" && onSearch?.()}
            placeholder="Buscar produto... ex: iPhone, tênis, fone..."
            style={{
              width: "100%", border: "1.5px solid #E8E1CC", background: "white",
              borderRadius: 999, padding: "9px 120px 9px 36px", fontSize: 13.5,
              fontFamily: "inherit", color: "#0E2A47", outline: "none",
            }}
            onFocus={e => e.target.style.borderColor="#0E2A47"}
            onBlur={e => e.target.style.borderColor="#E8E1CC"}
          />
          <svg style={{ position: "absolute", left: 12, top: "50%", transform: "translateY(-50%)", opacity: .5 }}
               width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="#0E2A47" strokeWidth="2.4" strokeLinecap="round">
            <circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/>
          </svg>
          <button onClick={onSearch} style={{
            position: "absolute", right: 4, top: 4, bottom: 4,
            background: "#FFC72C", color: "#0E2A47", border: "1.5px solid #0E2A47",
            borderRadius: 999, padding: "0 16px", fontWeight: 800, fontSize: 13,
            cursor: "pointer", fontFamily: "inherit",
          }}>Buscar</button>
        </div>

        <button style={{
          marginLeft: "auto", background: "#FFC72C", border: "1.5px solid #0E2A47",
          borderRadius: 10, padding: "0 14px", height: 38, cursor: "pointer",
          display: "flex", alignItems: "center", gap: 6, color: "#0E2A47",
          fontSize: 13, fontWeight: 700, fontFamily: "inherit",
        }}>🔔 Criar alerta</button>
      </div>
    </header>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Hero — compacto e limpo
function Hero({ onSearch, query, setQuery, onGarimpo }) {
  const { history, remove } = useSearchHistory();
  return (
    <section style={{ background: "linear-gradient(135deg, #0E2A47 0%, #1A365D 100%)", padding: "40px 24px 50px" }}>
      <div style={{ maxWidth: 860, margin: "0 auto", textAlign: "center" }}>
        <div style={{ display: "inline-flex", alignItems: "center", gap: 6, background: "rgba(255,199,44,.15)", border: "1px solid rgba(255,199,44,.3)", padding: "5px 14px", borderRadius: 999, fontSize: 12, fontWeight: 700, color: "#FFC72C", marginBottom: 16, letterSpacing: ".04em" }}>
          ⚡ MELHORES PREÇOS DA ALIEXPRESS EM TEMPO REAL
        </div>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: "clamp(28px, 4vw, 48px)", color: "white", margin: "0 0 12px", lineHeight: 1.1, letterSpacing: "-.02em" }}>
          Compre quando o preço estiver de <span style={{ color: "#FFC72C" }}>boas</span>. 🤙
        </h1>
        <p style={{ fontSize: 15, color: "rgba(255,255,255,.7)", margin: "0 0 28px" }}>
          Busque qualquer produto e compare os menores preços da AliExpress agora
        </p>

        <div style={{ position: "relative", maxWidth: 580, margin: "0 auto 16px" }}>
          <input value={query} onChange={e => setQuery(e.target.value)}
            onKeyDown={e => e.key === "Enter" && onSearch?.()}
            placeholder="ex: iPhone, tênis Nike, smartwatch..."
            style={{
              width: "100%", border: "2px solid rgba(255,255,255,.2)", background: "rgba(255,255,255,.1)",
              borderRadius: 14, padding: "15px 140px 15px 20px", fontSize: 15,
              fontFamily: "inherit", color: "white", outline: "none",
            }}
          />
          <button onClick={onSearch} style={{
            position: "absolute", right: 6, top: 6, bottom: 6,
            background: "#FFC72C", color: "#0E2A47", border: "none",
            borderRadius: 10, padding: "0 22px", fontWeight: 800, fontSize: 14,
            cursor: "pointer", fontFamily: "inherit",
          }}>Buscar</button>
        </div>

        <div style={{ display: "flex", gap: 8, justifyContent: "center", flexWrap: "wrap" }}>
          {["Smartphone", "Fone Bluetooth", "Smartwatch", "Notebook", "Câmera"].map(t => (
            <button key={t} onClick={() => { setQuery(t); onSearch?.(); }} style={{
              background: "rgba(255,255,255,.1)", border: "1px solid rgba(255,255,255,.2)",
              color: "rgba(255,255,255,.8)", padding: "5px 14px", borderRadius: 99,
              fontSize: 12, cursor: "pointer", fontFamily: "inherit",
            }}>{t}</button>
          ))}
          <button onClick={onGarimpo} style={{
            background: "linear-gradient(135deg, #f59e0b, #d97706)", border: "none",
            color: "white", padding: "5px 14px", borderRadius: 99,
            fontSize: 12, fontWeight: 800, cursor: "pointer", fontFamily: "inherit",
          }}>⛏️ Garimpo</button>
        </div>

        {history.length > 0 && (
          <div style={{ display: "flex", alignItems: "center", gap: 6, justifyContent: "center", flexWrap: "wrap", marginTop: 12 }}>
            <span style={{ fontSize: 11, color: "rgba(255,255,255,.4)", fontWeight: 700 }}>RECENTES:</span>
            {history.map(h => (
              <span key={h} style={{ display: "inline-flex", alignItems: "center", gap: 4, background: "rgba(255,255,255,.1)", color: "rgba(255,255,255,.8)", border: "1px solid rgba(255,255,255,.2)", borderRadius: 99, padding: "3px 10px", fontSize: 12 }}>
                <span style={{ cursor: "pointer" }} onClick={() => { setQuery(h); onSearch?.(); }}>{h}</span>
                <span style={{ cursor: "pointer", opacity: .5 }} onClick={() => remove(h)}>×</span>
              </span>
            ))}
          </div>
        )}
      </div>
    </section>
  );
}

// 2 carrosséis na home — mais vendidos e melhores ofertas
function HomeCarousels({ onProduct }) {
  const C1 = { keyword: "best selling electronics phone laptop", label: "🔥 Mais Vendidos Agora", sub: "Os produtos mais comprados da AliExpress" };
  const C2 = { keyword: "hot deals discount sale gadgets", label: "💰 Melhores Ofertas", sub: "Maiores descontos do dia" };

  return (
    <section style={{ padding: "32px 24px 60px", maxWidth: 1280, margin: "0 auto" }}>
      {[C1, C2].map((c, ci) => (
        <CarrosselSimples key={ci} config={c} onProduct={onProduct} style={{ marginBottom: ci === 0 ? 48 : 0 }}/>
      ))}
    </section>
  );
}

function CarrosselSimples({ config, onProduct, style }) {
  const scrollRef = useRef(null);
  const [products, setProducts] = useState(makeSkeleton(7));
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    YetiAPI.search(config.keyword, { size: 7 }).then(list => {
      if (!cancelled) { setProducts(list.length > 0 ? list.slice(0, 7) : makeSkeleton(7)); setLoading(false); }
    });
    return () => { cancelled = true; };
  }, [config.keyword]);

  // Auto-scroll
  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const timer = setInterval(() => {
      if (!scrollRef.current) return;
      const e2 = scrollRef.current;
      const max = e2.scrollWidth - e2.clientWidth;
      if (max <= 0) return;
      e2.scrollLeft >= max - 10 ? e2.scrollTo({ left: 0, behavior: "smooth" }) : e2.scrollTo({ left: e2.scrollLeft + 220, behavior: "smooth" });
    }, 3000);
    return () => clearInterval(timer);
  }, [products.length]);

  const scroll = dir => { if (scrollRef.current) scrollRef.current.scrollLeft += dir * 220; };

  return (
    <div style={style}>
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 16 }}>
        <div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 24, color: "#0E2A47", margin: 0 }}>{config.label}</h2>
          <p style={{ fontSize: 13, color: "#7E7458", margin: "4px 0 0" }}>{config.sub}</p>
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          <button onClick={() => scroll(-1)} style={{ width: 36, height: 36, borderRadius: "50%", border: "1.5px solid #E8E1CC", background: "white", cursor: "pointer", fontSize: 16 }}>‹</button>
          <button onClick={() => scroll(1)}  style={{ width: 36, height: 36, borderRadius: "50%", border: "1.5px solid #E8E1CC", background: "white", cursor: "pointer", fontSize: 16 }}>›</button>
        </div>
      </div>
      <div ref={scrollRef} style={{ display: "flex", gap: 16, overflowX: "auto", paddingBottom: 8, scrollBehavior: "smooth", scrollbarWidth: "none" }}>
        {products.slice(0, 7).map(p => (
          <div key={p.id} style={{ minWidth: 220, maxWidth: 220, flexShrink: 0 }}>
            <ProductCard product={p} onClick={onProduct}/>
          </div>
        ))}
      </div>
    </div>
  );
}

function StatsStrip() { return null; }

// Navegação de categorias (estilo Shein) + botão Garimpo
function CategoryNav({ onSearch, setQuery, onGarimpo }) {
  return (
    <nav style={{ background: "white", borderBottom: "1px solid #eee", overflowX: "auto", scrollbarWidth: "none" }}>
      <div style={{ display: "flex", gap: 0, padding: "0 16px", whiteSpace: "nowrap", alignItems: "stretch" }}>
        {CATEGORIES.map(c => (
          <button key={c.id} onClick={() => { setQuery(c.keyword); onSearch?.(); }} style={{
            background: "none", border: "none", padding: "10px 14px",
            fontSize: 12, color: "#333", cursor: "pointer", fontFamily: "inherit",
            display: "flex", flexDirection: "column", alignItems: "center", gap: 3,
            borderBottom: "2px solid transparent", transition: "border-color .15s, color .15s",
          }}
            onMouseEnter={e => { e.currentTarget.style.borderBottomColor="#E60026"; e.currentTarget.style.color="#E60026"; }}
            onMouseLeave={e => { e.currentTarget.style.borderBottomColor="transparent"; e.currentTarget.style.color="#333"; }}
          >
            <span style={{ fontSize: 18 }}>{c.icon}</span>
            <span>{c.name}</span>
          </button>
        ))}
        {/* Botão Garimpo */}
        <button onClick={onGarimpo} style={{
          background: "linear-gradient(135deg, #f59e0b, #d97706)", border: "none",
          padding: "10px 16px", fontSize: 12, color: "white", cursor: "pointer",
          fontFamily: "inherit", fontWeight: 800, margin: "6px 0 6px 8px",
          borderRadius: 8, display: "flex", flexDirection: "column", alignItems: "center", gap: 3,
        }}>
          <span style={{ fontSize: 18 }}>⛏️</span>
          <span>Garimpo</span>
        </button>
      </div>
    </nav>
  );
}


// ─────────────────────────────────────────────────────────────────────────────
// ProductCarousel — carrossel horizontal de produtos de UMA categoria
function ProductCarousel({ storeConfig, onProduct }) {
  const scrollRef = useRef(null);
  const kw = storeConfig.keyword || storeConfig.name;
  const [shown, setShown] = useState(makeSkeleton(8));
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    setLoading(true);
    setShown(makeSkeleton(8));
    YetiAPI.search(kw, { size: 10 }).then(list => {
      if (!cancelled) { setShown(list); setLoading(false); }
    });
    return () => { cancelled = true; };
  }, [storeConfig.key]);

  // Auto-scroll contínuo — usa shown.length para não resetar a cada render
  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    const STEP = 212;
    const timer = setInterval(() => {
      if (!scrollRef.current) return;
      const el2 = scrollRef.current;
      const max = el2.scrollWidth - el2.clientWidth;
      if (max <= 0) return;
      if (el2.scrollLeft >= max - 10) {
        el2.scrollTo({ left: 0, behavior: "smooth" });
      } else {
        el2.scrollTo({ left: el2.scrollLeft + STEP, behavior: "smooth" });
      }
    }, 3000);
    return () => clearInterval(timer);
  }, [shown.length]);

  const scroll = (dir) => {
    if (scrollRef.current) scrollRef.current.scrollLeft += dir * 280;
  };

  return (
    <div style={{ marginBottom: 8 }}>
      {/* Header da loja */}
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 14 }}>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{ background: storeConfig.color, color: storeConfig.text, padding: "6px 14px", borderRadius: 10, fontWeight: 800, fontSize: 14, display: "flex", alignItems: "center", gap: 6 }}>
            <span>{storeConfig.emoji}</span> {storeConfig.name}
            {storeConfig.isAffiliate && (
              <span style={{ fontSize: 9, background: "rgba(255,255,255,.3)", padding: "1px 6px", borderRadius: 999, fontWeight: 700, letterSpacing: ".04em" }}>AFILIADO</span>
            )}
          </div>
          {shown.length > 0 && (
            <span style={{ fontSize: 12, color: "#7E7458" }}>{shown.length} produtos encontrados</span>
          )}
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          <button onClick={() => scroll(-1)} style={{ width: 32, height: 32, borderRadius: "50%", border: "1.5px solid #E8E1CC", background: "white", cursor: "pointer", fontSize: 14, display: "flex", alignItems: "center", justifyContent: "center" }}>‹</button>
          <button onClick={() => scroll(1)}  style={{ width: 32, height: 32, borderRadius: "50%", border: "1.5px solid #E8E1CC", background: "white", cursor: "pointer", fontSize: 14, display: "flex", alignItems: "center", justifyContent: "center" }}>›</button>
        </div>
      </div>

      {/* Cards horizontais */}
      <div ref={scrollRef} style={{ display: "flex", gap: 12, overflowX: "auto", paddingBottom: 8, scrollBehavior: "smooth", scrollbarWidth: "none", msOverflowStyle: "none" }}>
        {shown.length === 0 ? (
          /* Fallback: botão para ir à loja */
          <a href={YetiAPI.nonAffiliateSearchUrl(storeConfig.key, storeConfig.name)}
             target="_blank" rel="noopener noreferrer sponsored"
             style={{ minWidth: 220, background: storeConfig.color, color: storeConfig.text, borderRadius: 16, padding: "32px 20px", textDecoration: "none", display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 10, fontSize: 14, fontWeight: 700, flexShrink: 0 }}>
            <span style={{ fontSize: 36 }}>{storeConfig.emoji}</span>
            Ver todos os produtos<br/>em {storeConfig.name} →
          </a>
        ) : (
          shown.slice(0, 10).map(p => (
            <div key={p.id} style={{ minWidth: 200, maxWidth: 200, flexShrink: 0 }}>
              <ProductCard product={p} onClick={onProduct} variant="compact"/>
            </div>
          ))
        )}

        {/* Botão "ver mais" no final */}
        {shown.length >= 3 && (
          <a href={YetiAPI.nonAffiliateSearchUrl(storeConfig.key, storeConfig.name)}
             target="_blank" rel="noopener noreferrer sponsored"
             style={{ minWidth: 160, background: "#FAF6EC", border: "1.5px dashed #E8E1CC", borderRadius: 16, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", gap: 8, textDecoration: "none", color: "#0E2A47", fontSize: 13, fontWeight: 600, flexShrink: 0 }}>
            <span style={{ fontSize: 28 }}>{storeConfig.emoji}</span>
            Ver mais em<br/>{storeConfig.name} →
          </a>
        )}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// StoreCarouselsSection — todos os carrosséis numa seção
function StoreCarouselsSection({ onProduct }) {
  const stores = YetiAPI.CAROUSEL_STORES;
  return (
    <section style={{ padding: "48px 24px 60px", maxWidth: 1280, margin: "0 auto" }}>
      <div style={{ marginBottom: 32 }}>
        <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: "#111", margin: 0 }}>Explorar por categoria</h2>
      </div>

      <div style={{ display: "flex", flexDirection: "column", gap: 40 }}>
        {stores.map(store => (
          <ProductCarousel key={store.key} storeConfig={store} onProduct={onProduct}/>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// TopDropsSection — maiores descontos gerais
function TopDropsSection({ onProduct }) {
  const { products } = useSearch("best deals electronics", 12);
  const sorted = [...products].sort((a, b) => {
    const da = a.base > 0 ? (1 - a.current / a.base) : 0;
    const db = b.base > 0 ? (1 - b.current / b.base) : 0;
    return db - da;
  });
  return (
    <section style={{ padding: "20px 24px 52px", maxWidth: 1280, margin: "0 auto" }}>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", marginBottom: 22 }}>
        <div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: "#111", margin: 0 }}>🔥 Mais vendidos hoje</h2>
        </div>
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
        {sorted.slice(0, 4).map(p => <ProductCard key={p.id} product={p} onClick={onProduct}/>)}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// CategoriesRow
function CategoriesRow({ onPick }) {
  return (
    <section style={{ padding: "0 24px 52px", maxWidth: 1280, margin: "0 auto" }}>
      <div style={{ fontSize: 12, fontWeight: 700, color: "#FFC72C", textTransform: "uppercase", letterSpacing: ".1em", marginBottom: 8, WebkitTextStroke: ".4px #0E2A47" }}>Explore</div>
      <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 32, color: "#0E2A47", margin: "0 0 20px", letterSpacing: "-.02em" }}>Categorias mais buscadas</h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 10 }}>
        {CATEGORIES.map(c => (
          <button key={c.id} onClick={() => onPick?.(c)} className="ys-cat" style={{
            display: "flex", flexDirection: "column", alignItems: "flex-start", gap: 4,
            background: "white", border: "1.5px solid #E8E1CC", borderRadius: 14,
            padding: "14px 16px 16px", cursor: "pointer", fontFamily: "inherit", color: "inherit",
            textAlign: "left", transition: "transform .15s ease, border-color .15s ease",
          }}>
            <div style={{ fontSize: 28, marginBottom: 4 }}>{c.icon}</div>
            <div style={{ fontSize: 14, fontWeight: 700, color: "#0E2A47" }}>{c.name}</div>
            <div style={{ fontSize: 11, color: "#7E7458" }}>Ver ofertas →</div>
          </button>
        ))}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// TrendingSection — últimas semanas
function TrendingSection({ onProduct }) {
  const { products } = useSearch("popular gadgets", 8);
  return (
    <section style={{ padding: "0 24px 60px", maxWidth: 1280, margin: "0 auto" }}>
      <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: "#111", margin: "0 0 16px" }}>⭐ Mais buscados esta semana</h2>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 14 }}>
        {products.slice(0, 8).map(p => <ProductCard key={p.id} product={p} onClick={onProduct}/>)}
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// ⛏️ Garimpo Modal
function GarimpoModal({ isOpen, onClose, onGarimpo }) {
  const [term, setTerm] = useState("");
  const sugestoes = ["iPhone", "Nike", "Fone Bluetooth", "Tênis", "Relógio", "Câmera", "Notebook", "Joias"];

  if (!isOpen) return null;

  function executar() {
    if (!term.trim()) return;
    onGarimpo(term.trim());
    onClose();
    setTerm("");
  }

  return (
    <div onClick={e => e.target === e.currentTarget && onClose()} style={{
      position: "fixed", inset: 0, background: "rgba(0,0,0,0.65)", zIndex: 500,
      display: "flex", alignItems: "center", justifyContent: "center", padding: 20,
    }}>
      <div style={{ background: "white", borderRadius: 24, padding: 40, maxWidth: 520, width: "100%", boxShadow: "0 24px 64px rgba(0,0,0,0.3)" }}>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 20 }}>
          <div>
            <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 24, color: "#111", margin: "0 0 4px" }}>⛏️ Garimpo</h2>
            <p style={{ fontSize: 14, color: "#666", margin: 0 }}>Encontra os preços mais baratos na AliExpress</p>
          </div>
          <button onClick={onClose} style={{ background: "#f1f5f9", border: "none", borderRadius: "50%", width: 36, height: 36, cursor: "pointer", fontSize: 20, color: "#666", fontFamily: "inherit" }}>×</button>
        </div>

        <div style={{ background: "linear-gradient(135deg, #fffbeb, #fef3c7)", borderRadius: 12, padding: 14, marginBottom: 20, border: "1px solid #fde68a" }}>
          <p style={{ fontSize: 13, color: "#92400e", margin: 0, fontWeight: 600 }}>
            💡 O Garimpo busca na AliExpress e ordena pelo <strong>menor preço</strong> — perfeito para encontrar as melhores promoções!
          </p>
        </div>

        <div style={{ display: "flex", gap: 10, marginBottom: 16 }}>
          <input
            autoFocus value={term}
            onChange={e => setTerm(e.target.value)}
            onKeyDown={e => e.key === "Enter" && executar()}
            placeholder="Ex: iPhone, Nike Air Max, Fone Bluetooth..."
            style={{ flex: 1, border: "2px solid #e2e8f0", borderRadius: 12, padding: "14px 16px", fontSize: 15, outline: "none", fontFamily: "inherit" }}
          />
          <button onClick={executar} style={{
            background: "linear-gradient(135deg, #f59e0b, #d97706)", color: "white", border: "none",
            borderRadius: 12, padding: "14px 20px", fontWeight: 800, fontSize: 14, cursor: "pointer", fontFamily: "inherit",
          }}>⛏️ Garimpar!</button>
        </div>

        <div style={{ display: "flex", gap: 8, flexWrap: "wrap", alignItems: "center" }}>
          <span style={{ fontSize: 12, color: "#666", fontWeight: 600 }}>Tente:</span>
          {sugestoes.map(s => (
            <span key={s} onClick={() => setTerm(s)} style={{
              background: "#f1f5f9", border: "1px solid #e2e8f0", borderRadius: 999,
              padding: "4px 12px", fontSize: 12, fontWeight: 600, cursor: "pointer", color: "#374151",
            }}>{s}</span>
          ))}
        </div>
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Trust Bar (estilo YetiFinds)
function TrustBar() {
  return (
    <div style={{ background: "white", borderBottom: "1px solid #eee" }}>
      <div style={{ maxWidth: 1440, margin: "0 auto", padding: "12px 20px", display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 8, textAlign: "center" }}>
        {[["✓", "#FF6600", "Qualidade Verificada"], ["👁", "#FF6600", "Transparência"], ["🔒", "#FF6600", "Proteção de Dados"], ["⚡", "#FF6600", "Preços em Tempo Real"]].map(([icon, color, text], i) => (
          <div key={i} style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: 6 }}>
            <span style={{ color, fontSize: 15 }}>{icon}</span>
            <span style={{ fontSize: 11, fontWeight: 700, color: "#374151", textTransform: "uppercase", letterSpacing: ".5px" }}>{text}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// SearchResultsSection — com sort, histórico e load more
function SearchResultsSection({ query, onProduct, onBack }) {
  const [sort, setSort] = useState("");
  const [allProducts, setAllProducts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [offset, setOffset] = useState(0);
  const [hasMore, setHasMore] = useState(true);
  const [loadingMore, setLoadingMore] = useState(false);

  // Busca inicial
  useEffect(() => {
    if (!query) return;
    setLoading(true);
    setAllProducts([]);
    setOffset(0);
    setHasMore(true);
    YetiAPI.search(query, { size: 24, offset: 0, sort }).then(list => {
      setAllProducts(list);
      setHasMore(list.length >= 20);
      setLoading(false);
    });
  }, [query, sort]);

  function loadMore() {
    const newOffset = offset + 24;
    setOffset(newOffset);
    setLoadingMore(true);
    YetiAPI.search(query, { size: 24, offset: newOffset, sort }).then(list => {
      setAllProducts(prev => [...prev, ...list]);
      setHasMore(list.length >= 20);
      setLoadingMore(false);
    });
  }

  return (
    <section style={{ padding: "24px 20px 80px", maxWidth: 1440, margin: "0 auto" }}>
      {/* Header da busca */}
      <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 20, flexWrap: "wrap" }}>
        <button onClick={onBack} style={{ background: "none", border: "1px solid #ddd", borderRadius: 8, padding: "8px 14px", cursor: "pointer", fontSize: 13, color: "#333", fontFamily: "inherit" }}>← Voltar</button>
        <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: "#111" }}>
          Resultados para <span style={{ color: "#E60026" }}>"{query}"</span>
        </div>
        {!loading && <span style={{ background: "#fff0ee", color: "#E60026", fontSize: 12, fontWeight: 700, padding: "4px 12px", borderRadius: 99 }}>{allProducts.length} produtos</span>}

        {/* Sort filter */}
        <select value={sort} onChange={e => setSort(e.target.value)} style={{
          marginLeft: "auto", border: "1px solid #ddd", borderRadius: 8,
          padding: "8px 14px", fontSize: 13, fontFamily: "inherit", cursor: "pointer", outline: "none",
        }}>
          <option value="">Relevância</option>
          <option value="price">Menor Preço</option>
          <option value="-price">Maior Preço</option>
        </select>
      </div>

      {/* Grid de produtos */}
      {loading ? (
        <div style={{ textAlign: "center", padding: "60px 0" }}>
          <div style={{ width: 40, height: 40, border: "4px solid #eee", borderTopColor: "#FF6600", borderRadius: "50%", margin: "0 auto 16px", animation: "spin 1s linear infinite" }}/>
          <p style={{ color: "#FF6600", fontWeight: 700 }}>Buscando na AliExpress...</p>
        </div>
      ) : (
        <div style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 1 }}>
          {allProducts.map(p => <ProductCard key={p.id} product={p} onClick={onProduct}/>)}
        </div>
      )}

      {/* Load More */}
      {!loading && hasMore && (
        <div style={{ textAlign: "center", marginTop: 32 }}>
          <button onClick={loadMore} disabled={loadingMore} style={{
            background: "white", border: "2px solid #FF6600", color: "#FF6600",
            borderRadius: 8, padding: "14px 40px", fontWeight: 800, fontSize: 15,
            cursor: "pointer", fontFamily: "inherit",
          }}>
            {loadingMore ? "Carregando..." : "Carregar mais produtos 🔄"}
          </button>
        </div>
      )}
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// HowItWorks
function HowItWorks() {
  return (
    <section style={{ padding: "72px 24px", background: "#0E2A47", color: "white" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto" }}>
        <div style={{ textAlign: "center", marginBottom: 44 }}>
          <div style={{ fontSize: 12, fontWeight: 700, color: "#FFC72C", textTransform: "uppercase", letterSpacing: ".15em", marginBottom: 10 }}>Como funciona</div>
          <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 40, margin: 0, letterSpacing: "-.025em", textWrap: "balance" }}>Três passos, e o Yeti faz<br/>a parte chata por você.</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 20 }}>
          {[
            { n:"01", icon:"🔎", title:"Cola o link ou busca", desc:"Cole o link da Amazon, Mercado Livre ou qualquer loja — ou busque pelo nome do produto." },
            { n:"02", icon:"🔔", title:"Define o preço-alvo", desc:"Diz pro Yeti o preço que vale a pena. Ele fica de olho 24/7 sem você precisar fazer nada." },
            { n:"03", icon:"🤙", title:"Compra na boa", desc:"Quando o preço cair, te avisamos por email ou push. Aí é só correr pro abraço." },
          ].map((s, i) => (
            <div key={i} style={{ background: "rgba(255,255,255,.06)", border: "1.5px solid rgba(255,199,44,.2)", borderRadius: 20, padding: "26px 22px" }}>
              <div style={{ width: 52, height: 52, borderRadius: 14, background: "#FFC72C", color: "#0E2A47", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 24, marginBottom: 18 }}>{s.icon}</div>
              <div style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 13, color: "#FFC72C", letterSpacing: ".05em", marginBottom: 6 }}>PASSO {s.n}</div>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, margin: "0 0 10px", color: "white" }}>{s.title}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: "rgba(255,255,255,.72)", margin: 0 }}>{s.desc}</p>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 44, display: "flex", justifyContent: "center" }}>
          <button style={{ background: "#FFC72C", color: "#0E2A47", border: 0, borderRadius: 12, padding: "14px 26px", fontSize: 15, fontWeight: 800, cursor: "pointer", fontFamily: "inherit" }}>
            🦴 Criar primeiro alerta — grátis
          </button>
        </div>
      </div>
    </section>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Footer
function Footer({ onNav }) {
  const nav = (page) => (e) => { e.preventDefault(); onNav?.(page); window.scrollTo({ top: 0, behavior: "instant" }); };
  return (
    <footer style={{ background: "#FAF6EC", borderTop: "1px solid #E8E1CC", padding: "44px 24px 20px" }}>
      <div style={{ maxWidth: 1280, margin: "0 auto", display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr 1fr", gap: 28 }}>
        <div>
          <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 12 }}>
            <img src="assets/yeti-icon.png" alt="" style={{ width: 48, height: 48 }}/>
            <span style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: "#0E2A47" }}>
              yeti<span style={{ color: "#FFC72C", WebkitTextStroke: "0.5px #0E2A47" }}>shopping</span>
            </span>
          </div>
          <p style={{ fontSize: 13, color: "#7E7458", lineHeight: 1.5, maxWidth: 300, margin: 0 }}>
            Comparador de preços brasileiro. Acompanhe o histórico e encontre o melhor momento para comprar.
          </p>
        </div>
        <div>
          <div style={{ fontSize: 11.5, fontWeight: 700, color: "#0E2A47", textTransform: "uppercase", letterSpacing: ".08em", marginBottom: 10 }}>Produto</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
            <a href="#" onClick={nav("home")}   style={{ fontSize: 13, color: "#3A4A5E", textDecoration: "none" }}>Top quedas de preço</a>
            <a href="#" onClick={nav("howto")}  style={{ fontSize: 13, color: "#3A4A5E", textDecoration: "none" }}>Como funciona</a>
          </div>
        </div>
        <div>
          <div style={{ fontSize: 11.5, fontWeight: 700, color: "#0E2A47", textTransform: "uppercase", letterSpacing: ".08em", marginBottom: 10 }}>Empresa</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
            <a href="#" onClick={nav("about")}   style={{ fontSize: 13, color: "#3A4A5E", textDecoration: "none" }}>Sobre o YetiShopping</a>
            <a href="mailto:contato@yetishopping.com.br" style={{ fontSize: 13, color: "#3A4A5E", textDecoration: "none" }}>Contato</a>
          </div>
        </div>
        <div>
          <div style={{ fontSize: 11.5, fontWeight: 700, color: "#0E2A47", textTransform: "uppercase", letterSpacing: ".08em", marginBottom: 10 }}>Legal</div>
          <div style={{ display: "flex", flexDirection: "column", gap: 7 }}>
            <a href="#" onClick={nav("privacy")} style={{ fontSize: 13, color: "#3A4A5E", textDecoration: "none" }}>Política de Privacidade</a>
            <a href="#" onClick={nav("terms")}   style={{ fontSize: 13, color: "#3A4A5E", textDecoration: "none" }}>Termos de Uso</a>
          </div>
        </div>
      </div>
      <div style={{ maxWidth: 1280, margin: "28px auto 0", paddingTop: 18, borderTop: "1px solid #E8E1CC", display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 10 }}>
        <div style={{ fontSize: 12, color: "#7E7458" }}>© 2026 YetiShopping. Feito com 🤙 no Brasil.</div>
        <div style={{ fontSize: 12, color: "#7E7458" }}>Os preços podem variar. Sempre verifique o valor final na loja.</div>
      </div>
    </footer>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Página estática reutilizável
function StaticPage({ title, subtitle, onBack, children }) {
  return (
    <main style={{ background: "#FAF6EC", minHeight: "100vh" }}>
      <div style={{ maxWidth: 860, margin: "0 auto", padding: "48px 24px 80px" }}>
        <button onClick={onBack} style={{ background: "none", border: "1.5px solid #E8E1CC", borderRadius: 10, padding: "8px 14px", cursor: "pointer", fontSize: 13, color: "#3A4A5E", fontFamily: "inherit", marginBottom: 32 }}>← Voltar</button>
        <div style={{ fontSize: 12, fontWeight: 700, color: "#FFC72C", textTransform: "uppercase", letterSpacing: ".1em", marginBottom: 8, WebkitTextStroke: ".4px #0E2A47" }}>{subtitle}</div>
        <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 40, color: "#0E2A47", margin: "0 0 32px", letterSpacing: "-.02em" }}>{title}</h1>
        <div style={{ fontSize: 15, color: "#3A4A5E", lineHeight: 1.75 }}>{children}</div>
      </div>
    </main>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Política de Privacidade
function PrivacyPage({ onBack }) {
  const H = ({ children }) => <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: "#0E2A47", margin: "32px 0 10px" }}>{children}</h2>;
  const P = ({ children }) => <p style={{ margin: "0 0 14px" }}>{children}</p>;
  return (
    <StaticPage title="Política de Privacidade" subtitle="Legal" onBack={onBack}>
      <P>Última atualização: maio de 2026.</P>
      <P>O <strong>YetiShopping</strong> ("nós", "nosso") respeita sua privacidade. Esta política descreve como coletamos, usamos e protegemos suas informações ao visitar <strong>yetishopping.com.br</strong>.</P>

      <H>1. Informações que coletamos</H>
      <P>Não coletamos dados pessoais diretamente. Podemos coletar dados anônimos de navegação (páginas visitadas, tempo de sessão) por meio de ferramentas de análise de terceiros, como o Google Analytics.</P>

      <H>2. Cookies e publicidade</H>
      <P>Utilizamos o <strong>Google AdSense</strong> para exibir anúncios. O Google pode usar cookies para exibir anúncios com base em visitas anteriores ao nosso site e a outros sites. Você pode desativar o uso de cookies para publicidade personalizada em <a href="https://www.google.com/settings/ads" target="_blank" rel="noopener noreferrer" style={{ color: "#0E2A47" }}>Configurações de Anúncios do Google</a>.</P>
      <P>Terceiros fornecedores, incluindo o Google, usam cookies para exibir anúncios com base nas visitas anteriores do usuário ao nosso site ou a outros sites. O uso de cookies de publicidade pelo Google permite que ele e seus parceiros exibam anúncios aos usuários com base nas visitas a este e a outros sites.</P>

      <H>3. Links para lojas parceiras</H>
      <P>O YetiShopping exibe produtos de diversas lojas (Amazon, Mercado Livre, Magalu, Kabum, entre outras). Ao clicar em um produto, você será redirecionado para a loja parceira. Não somos responsáveis pelas práticas de privacidade dessas lojas.</P>
      <P>Alguns links podem conter identificadores de afiliados. Isso significa que podemos receber uma comissão caso você efetue uma compra, sem custo adicional para você.</P>

      <H>4. Como usamos suas informações</H>
      <P>Os dados de navegação anônimos são usados exclusivamente para melhorar a experiência do site, entender quais categorias são mais acessadas e otimizar o conteúdo exibido.</P>

      <H>5. Seus direitos (LGPD)</H>
      <P>De acordo com a Lei Geral de Proteção de Dados (LGPD — Lei nº 13.709/2018), você tem o direito de acessar, corrigir ou solicitar a exclusão de seus dados pessoais. Para exercer esses direitos, entre em contato conosco pelo e-mail abaixo.</P>

      <H>6. Segurança</H>
      <P>Utilizamos HTTPS em todo o site para garantir que sua navegação seja segura.</P>

      <H>7. Contato</H>
      <P>Dúvidas sobre esta política? Fale conosco: <a href="mailto:contato@yetishopping.com.br" style={{ color: "#0E2A47" }}>contato@yetishopping.com.br</a></P>
    </StaticPage>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Termos de Uso
function TermsPage({ onBack }) {
  const H = ({ children }) => <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: "#0E2A47", margin: "32px 0 10px" }}>{children}</h2>;
  const P = ({ children }) => <p style={{ margin: "0 0 14px" }}>{children}</p>;
  return (
    <StaticPage title="Termos de Uso" subtitle="Legal" onBack={onBack}>
      <P>Última atualização: maio de 2026.</P>
      <P>Ao acessar o <strong>YetiShopping</strong>, você concorda com os seguintes termos.</P>

      <H>1. Sobre o serviço</H>
      <P>O YetiShopping é um comparador de preços brasileiro que reúne informações de produtos de diversas lojas para ajudar consumidores a encontrar o melhor momento para comprar. Não vendemos produtos diretamente.</P>

      <H>2. Precisão dos preços</H>
      <P>Os preços exibidos têm caráter informativo. Os valores podem variar a qualquer momento. Sempre confirme o preço final diretamente na loja antes de efetuar a compra.</P>

      <H>3. Links de afiliados</H>
      <P>Alguns links levam a lojas parceiras e podem conter identificadores de afiliados. Ao comprar por esses links, o YetiShopping pode receber uma comissão sem qualquer custo adicional para você.</P>

      <H>4. Propriedade intelectual</H>
      <P>Todo o conteúdo do site (textos, logotipo, design) é de propriedade do YetiShopping. É proibida a reprodução sem autorização prévia.</P>

      <H>5. Limitação de responsabilidade</H>
      <P>O YetiShopping não se responsabiliza por decisões de compra tomadas com base nas informações do site, nem por problemas ocorridos em transações realizadas nas lojas parceiras.</P>

      <H>6. Contato</H>
      <P><a href="mailto:contato@yetishopping.com.br" style={{ color: "#0E2A47" }}>contato@yetishopping.com.br</a></P>
    </StaticPage>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Sobre nós
function AboutPage({ onBack }) {
  const H = ({ children }) => <h2 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, color: "#0E2A47", margin: "32px 0 10px" }}>{children}</h2>;
  const P = ({ children }) => <p style={{ margin: "0 0 14px" }}>{children}</p>;
  return (
    <StaticPage title="Sobre o YetiShopping" subtitle="Empresa" onBack={onBack}>
      <P>O <strong>YetiShopping</strong> nasceu de uma ideia simples: por que pagar mais caro se o preço de ontem era menor?</P>
      <P>Somos um comparador de preços brasileiro focado em transparência. Reunimos produtos de lojas como Amazon, Mercado Livre, Magalu, Kabum, Casas Bahia e Shopee em um único lugar — para que você saiba exatamente se aquele "desconto" é real ou não.</P>

      <H>Nossa missão</H>
      <P>Ajudar brasileiros a comprar com inteligência. Mostramos o histórico de preços de cada produto para que você saiba se é o momento certo de comprar — ou se vale esperar uma promoção de verdade.</P>

      <H>Como funciona</H>
      <P>Monitoramos os preços de milhares de produtos nas principais lojas brasileiras. Ao acessar um produto, você vê o preço atual, o histórico dos últimos meses e uma análise do Yeti dizendo se é boa hora para comprar.</P>

      <H>Transparência</H>
      <P>Alguns links neste site são links de afiliados — isso significa que podemos receber uma comissão quando você compra por eles, sem nenhum custo extra para você. Essa é uma das formas de manter o serviço gratuito para todos.</P>
      <P>Nunca colocamos o interesse comercial acima da informação correta. Se o preço não está bom, a gente fala.</P>

      <H>Contato</H>
      <P>Quer falar com a gente? Envie um e-mail para <a href="mailto:contato@yetishopping.com.br" style={{ color: "#0E2A47" }}>contato@yetishopping.com.br</a></P>
    </StaticPage>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// Como Funciona (página)
function HowItWorksPage({ onBack }) {
  return (
    <StaticPage title="Como o YetiShopping funciona" subtitle="Guia" onBack={onBack}>
      <p style={{ margin: "0 0 32px", fontSize: 16 }}>
        Entenda como usamos o histórico de preços para te ajudar a comprar no momento certo.
      </p>
      {[
        { n: "01", icon: "🔎", title: "Busque o produto", desc: "Digite o nome do produto na barra de busca. Encontramos nas principais lojas brasileiras: Amazon, Mercado Livre, Magalu, Kabum, Casas Bahia e muito mais." },
        { n: "02", icon: "📊", title: "Veja o histórico de preços", desc: "Exibimos um gráfico com a evolução do preço nos últimos 180 dias. Isso mostra se o preço atual é realmente uma boa oferta ou se já esteve mais barato." },
        { n: "03", icon: "🧊", title: "O Yeti analisa para você", desc: "O Yeti compara o preço atual com o menor preço histórico e emite um veredito: COMPRA agora ou Vale esperar. Simples assim." },
        { n: "04", icon: "🔔", title: "Crie um alerta de preço", desc: "Defina o preço que vale a pena e o Yeti te avisa quando o produto atingir esse valor. Você não precisa ficar verificando o preço todo dia." },
        { n: "05", icon: "🛒", title: "Compre na loja de sua escolha", desc: "Quando o preço estiver bom, clique no botão e vá direto para a loja. Você compra diretamente no site da loja, com toda a segurança e garantia deles." },
      ].map((s, i) => (
        <div key={i} style={{ display: "flex", gap: 20, marginBottom: 28, padding: 20, background: "white", borderRadius: 16, border: "1.5px solid #E8E1CC" }}>
          <div style={{ width: 56, height: 56, borderRadius: 14, background: "#FFC72C", display: "flex", alignItems: "center", justifyContent: "center", fontSize: 26, flexShrink: 0 }}>{s.icon}</div>
          <div>
            <div style={{ fontSize: 11, fontWeight: 700, color: "#FFC72C", letterSpacing: ".08em", marginBottom: 4 }}>PASSO {s.n}</div>
            <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 18, color: "#0E2A47", margin: "0 0 6px" }}>{s.title}</h3>
            <p style={{ fontSize: 14, color: "#3A4A5E", lineHeight: 1.6, margin: 0 }}>{s.desc}</p>
          </div>
        </div>
      ))}
    </StaticPage>
  );
}

// Exports
Object.assign(window, { Header, Hero, CategoryNav, StatsStrip, TopDropsSection, CategoriesRow, TrendingSection, SearchResultsSection, StoreCarouselsSection, HomeCarousels, CarrosselSimples, HowItWorks, Footer, GarimpoModal, TrustBar, PrivacyPage, TermsPage, AboutPage, HowItWorksPage, StaticPage, useSearchHistory });
