// sections.jsx — Prediseñadas, Accesorios, Ofertas
// exposes: DesignsView, AccessoriesView, OffersView

function SectionHead({ eyebrow, title, sub }) {
  return (
    <div className="col rise" style={{ marginBottom: 48, maxWidth: 760 }}>
      <span className="eyebrow" style={{ marginBottom: 18 }}>{eyebrow}</span>
      <h1 className="display" style={{ fontSize: "clamp(40px, 6vw, 74px)" }}>{title}</h1>
      {sub && <p style={{ fontSize: 18, color: "var(--ink-70)", marginTop: 18, lineHeight: 1.5 }}>{sub}</p>}
    </div>
  );
}

// ---------- PREDISEÑADAS ----------
function DesignCard({ d, index, onUse }) {
  const [hover, setHover] = React.useState(false);
  const previewModel = CC.models.find((m) => m.brand === "iPhone") || CC.models[0];
  return (
    <div className="glass rise" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{
      borderRadius: 26, padding: 22, display: "flex", flexDirection: "column", alignItems: "center", gap: 14,
      transition: "transform 0.3s ease, box-shadow 0.3s ease", transform: hover ? "translateY(-6px)" : "none",
      boxShadow: hover ? "0 30px 60px -22px rgba(139,92,255,0.5), inset 0 1px 0 rgba(255,255,255,0.12)" : "var(--shadow-glass)",
      animationDelay: Math.min(index, 8) * 0.05 + "s",
    }}>
      <div style={{ height: 250, display: "flex", alignItems: "center", justifyContent: "center", transition: "transform 0.4s ease", transform: hover ? "scale(1.03) rotate(-1.5deg)" : "none" }}>
        <PhoneCase model={previewModel} design={{ img: d.img }} scale={0.43} />
      </div>
      <div className="row" style={{ width: "100%", justifyContent: "space-between", alignItems: "flex-end", gap: 12 }}>
        <div className="col" style={{ flex: 1, minWidth: 0 }}>
          <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 18, lineHeight: 1.15 }}>{d.name}</span>
          <span style={{ fontSize: 12.5, color: "var(--ink-50)" }}>{d.cat} · por {d.author}</span>
        </div>
        <span style={{ fontWeight: 700, fontSize: 16, flexShrink: 0, whiteSpace: "nowrap" }} className="grad-text">{fmt(d.price)}</span>
      </div>
      <button className="btn" onClick={() => onUse(d)} style={{
        width: "100%", justifyContent: "center", padding: "13px 0", marginTop: 4,
        background: hover ? "var(--grad-neon)" : "var(--glass-bg-strong)", color: "#fff", fontSize: 14.5,
        border: "1px solid var(--glass-border)", transition: "background 0.3s ease",
      }}>Usar este diseño <Icon name="arrow" size={16} /></button>
    </div>
  );
}

function DesignsView({ onUse }) {
  const cats = ["Todas", ...Array.from(new Set(CC.designs.map((d) => d.cat)))];
  const [cat, setCat] = React.useState("Todas");
  const list = cat === "Todas" ? CC.designs : CC.designs.filter((d) => d.cat === cat);
  return (
    <div className="page section-pad">
      <SectionHead eyebrow="Curado por COOLCASE" title="Diseños prediseñados" sub="Elige uno y lo cargamos directo en el editor para que lo hagas tuyo: súmale tu nombre, fotos o stickers." />
      <div className="row rise" style={{ gap: 9, marginBottom: 36, flexWrap: "wrap" }}>
        {cats.map((c) => {
          const active = c === cat;
          return (
            <button key={c} onClick={() => setCat(c)} className="btn" style={{
              padding: "9px 18px", fontSize: 14,
              background: active ? "var(--grad-neon)" : "var(--glass-bg)",
              border: active ? "1px solid transparent" : "1px solid var(--glass-border)",
              color: "#fff", fontWeight: active ? 700 : 500,
              boxShadow: active ? "0 8px 22px -8px rgba(255,61,240,0.5)" : "none",
            }}>{c}</button>
          );
        })}
      </div>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))", gap: 24 }}>
        {list.map((d, i) => <DesignCard key={d.id} d={d} index={i} onUse={onUse} />)}
      </div>
    </div>
  );
}

// ---------- ACCESORIOS ----------
function AccessoriesView({ onAddAccessory }) {
  const accentByIdx = ["#ff3df0", "#2de2ff", "#8b5cff", "#3dffa8", "#ffd84d", "#ff7a3d"];
  return (
    <div className="page section-pad">
      <SectionHead eyebrow="Suma y combina" title="Accesorios" sub="Complementa tu carcasa con cordones, soportes y charms que combinan con tu diseño." />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(300px, 1fr))", gap: 22 }}>
        {CC.accessories.map((a, i) => {
          const accent = accentByIdx[i % accentByIdx.length];
          return <AccessoryCard key={a.id} a={a} accent={accent} index={i} onAdd={onAddAccessory} />;
        })}
      </div>
    </div>
  );
}

function AccessoryCard({ a, accent, index, onAdd }) {
  const [hover, setHover] = React.useState(false);
  const [added, setAdded] = React.useState(false);
  const click = () => { onAdd(a); setAdded(true); setTimeout(() => setAdded(false), 1400); };
  return (
    <div className="glass rise" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{
      borderRadius: 24, padding: 24, position: "relative", overflow: "hidden",
      transition: "transform 0.3s ease, box-shadow 0.3s ease", transform: hover ? "translateY(-6px)" : "none",
      boxShadow: hover ? `0 28px 56px -22px ${accent}66, inset 0 1px 0 rgba(255,255,255,0.12)` : "var(--shadow-glass)",
      animationDelay: index * 0.05 + "s",
    }}>
      <div style={{ position: "absolute", top: -40, right: -40, width: 160, height: 160, borderRadius: "50%", background: `radial-gradient(circle, ${accent}33, transparent 70%)`, pointerEvents: "none" }}/>
      <div style={{ width: 64, height: 64, borderRadius: 18, display: "flex", alignItems: "center", justifyContent: "center", background: `${accent}22`, border: `1px solid ${accent}55`, marginBottom: 20 }}>
        <Icon name={a.icon} size={30} stroke={accent} />
      </div>
      <h3 style={{ fontSize: 20, marginBottom: 6 }}>{a.name}</h3>
      <p style={{ color: "var(--ink-70)", fontSize: 14, marginBottom: 22, lineHeight: 1.5 }}>{a.desc}</p>
      <div className="row" style={{ justifyContent: "space-between" }}>
        <span style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: 22 }}>{fmt(a.price)}</span>
        <button className="btn" onClick={click} style={{ padding: "11px 20px", fontSize: 14, background: added ? "var(--grad-neon)" : "var(--glass-bg-strong)", border: "1px solid var(--glass-border)", color: "#fff" }}>
          {added ? <><Icon name="check" size={16} /> Agregado</> : <><Icon name="plus" size={16} /> Agregar</>}
        </button>
      </div>
    </div>
  );
}

// ---------- OFERTAS ----------
function OffersView() {
  return (
    <div className="page section-pad">
      <SectionHead eyebrow="No te las pierdas" title="Ofertas y promociones" />
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(330px, 1fr))", gap: 22 }}>
        {CC.offers.map((o, i) => <OfferCard key={o.id} o={o} index={i} big={i === 0} />)}
      </div>
    </div>
  );
}

function OfferCard({ o, index, big }) {
  const [hover, setHover] = React.useState(false);
  return (
    <div className="glass rise" onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{
      borderRadius: 26, padding: 28, position: "relative", overflow: "hidden", minHeight: 220,
      gridColumn: big ? "span 1" : "auto",
      display: "flex", flexDirection: "column", justifyContent: "space-between",
      transition: "transform 0.3s ease, box-shadow 0.3s ease", transform: hover ? "translateY(-6px)" : "none",
      boxShadow: hover ? `0 30px 60px -22px ${o.accent}66, inset 0 1px 0 rgba(255,255,255,0.12)` : "var(--shadow-glass)",
      animationDelay: index * 0.06 + "s",
    }}>
      <div style={{ position: "absolute", bottom: -50, right: -30, width: 200, height: 200, borderRadius: "50%", background: `radial-gradient(circle, ${o.accent}, transparent 70%)`, opacity: 0.4, filter: "blur(10px)", pointerEvents: "none" }}/>
      <div style={{ position: "relative" }}>
        <span style={{ display: "inline-block", padding: "7px 15px", borderRadius: 999, background: o.accent, color: o.tag === "ENVÍO" || o.tag === "-30%" ? "#0d0a22" : "#fff", fontSize: 13, fontWeight: 800, letterSpacing: "0.02em", boxShadow: `0 6px 18px -6px ${o.accent}`, marginBottom: 22 }}>{o.tag}</span>
        <h2 style={{ fontSize: 30, marginBottom: 10 }}>{o.title}</h2>
        <p style={{ color: "var(--ink-70)", fontSize: 15, lineHeight: 1.5, maxWidth: 300 }}>{o.desc}</p>
      </div>
      <div className="row" style={{ justifyContent: "space-between", marginTop: 26, position: "relative" }}>
        <span style={{ fontSize: 12.5, color: "var(--ink-50)" }}>{o.until}</span>
        <button className="btn" style={{ padding: "10px 20px", fontSize: 14, background: hover ? "var(--grad-neon)" : "var(--glass-bg-strong)", border: "1px solid var(--glass-border)", color: "#fff", transition: "background 0.3s ease" }}>Ver <Icon name="arrow" size={15} /></button>
      </div>
    </div>
  );
}

Object.assign(window, { DesignsView, AccessoriesView, OffersView, SectionHead });