/* global React, window, BOXES */
// =======================================================================
//  Componentes compartilhados — placeholders, selo, chips, countdown,
//  nav e moldura. Os blocos maiores ficam em sections.jsx.
// =======================================================================

const { useState, useEffect, useMemo, useRef } = React;

/* ---------- placeholder de imagem ---------- */

function PH({ label = "imagem", className = "", style }) {
  return (
    <div className={`ph ${className}`} style={style}>
      <span>{label}</span>
    </div>
  );
}

/* ---------- selo circular giratório ---------- */

function Seal() {
  return (
    <svg className="seal" viewBox="0 0 130 130" aria-hidden="true">
      <defs>
        <path id="seal-path"
          d="M65,65 m-52,0 a52,52 0 1,1 104,0 a52,52 0 1,1 -104,0" />
      </defs>
      <text>
        <textPath href="#seal-path" startOffset="0">
          Edição limitada · Dia dos namorados · 12 jun 2026 · Zuzunely ·
        </textPath>
      </text>
      <text x="65" y="62" textAnchor="middle" className="core">12 · 06</text>
      <text x="65" y="80" textAnchor="middle" style={{ fontFamily: 'var(--font-mono)', fontSize: 7, letterSpacing: '0.2em', fill: 'var(--ink-soft)' }}>SEXTA</text>
    </svg>
  );
}

/* ---------- countdown ---------- */

function useCountdown(target) {
  const [now, setNow] = useState(Date.now());
  useEffect(() => {
    const id = setInterval(() => setNow(Date.now()), 1000);
    return () => clearInterval(id);
  }, []);
  const diff = Math.max(0, target - now);
  const d = Math.floor(diff / 86400000);
  const h = Math.floor(diff / 3600000) % 24;
  const m = Math.floor(diff / 60000) % 60;
  const s = Math.floor(diff / 1000) % 60;
  return { d, h, m, s };
}

function Countdown() {
  // alvo: 12 jun 2026 às 08:00 (data fixa para a campanha)
  const target = useMemo(() => new Date("2026-06-12T08:00:00-03:00").getTime(), []);
  const { d, h, m, s } = useCountdown(target);
  const pad = (n) => String(n).padStart(2, "0");
  return (
    <div className="countdown" aria-label="Contagem regressiva">
      <div className="unit">
        <div className="num">{pad(d)}</div>
        <div className="label">Dias</div>
      </div>
      <div className="unit">
        <div className="num">{pad(h)}</div>
        <div className="label">Horas</div>
      </div>
      <div className="unit">
        <div className="num">{pad(m)}</div>
        <div className="label">Minutos</div>
      </div>
      <div className="unit">
        <div className="num">{pad(s)}</div>
        <div className="label">Segundos</div>
      </div>
    </div>
  );
}

/* ---------- nav ---------- */

function Nav({ cartCount, onCartOpen, headline }) {
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="index.html" className="brand" style={{ textDecoration: "none" }}>
          Zuzunely<sup>desde 2018 · BH</sup>
        </a>
        <div className="nav-links">
          <a href="index.html">← Voltar ao Zuzu</a>
          <a href="#caixas">As caixas</a>
          <a href="#jantar">O jantar</a>
          <a href="#calendario">Retirada</a>
          <a href="#instagram">Instagram</a>
        </div>
        <button className="cart-btn" onClick={onCartOpen} aria-label="Abrir carrinho">
          <span>Carrinho</span>
          <span className="badge">{cartCount}</span>
        </button>
      </div>
    </nav>
  );
}

/* ---------- price ---------- */

function fmt(n) {
  return n.toLocaleString("pt-BR", { minimumFractionDigits: 0 });
}

function Price({ value, suffix, large }) {
  return (
    <span className="price" style={large ? { fontSize: 40 } : undefined}>
      R$ {fmt(value)}
      {suffix && <small>{suffix}</small>}
    </span>
  );
}

/* ---------- formato ms para texto ---------- */

function Toast({ msg, on }) {
  return (
    <div className={`toast ${on ? "show" : ""}`}>
      <span className="heart" aria-hidden="true"></span>
      <span>{msg}</span>
    </div>
  );
}

/* ---------- marquee ---------- */

function Marquee() {
  const phrase = "Junho sem pressa  ·  Cafoço em casa  ·  Encomendas até 09 de junho  ·  Retirada de 10 a 14 de junho  ·  Jantar no dia 12 às 20h  ·  ";
  return (
    <div className="marquee">
      <div className="marquee-track">
        {Array.from({ length: 4 }).map((_, i) => (
          <span key={i}>
            {phrase}<span className="heart sq" aria-hidden="true"></span>
          </span>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, { PH, Seal, Countdown, Nav, Price, fmt, Toast, Marquee, useCountdown });