/* parts/icons.jsx — SVG icons + CSS ice-cup renders. Exported to window. */
const { useMemo } = React;

/* ---------- UI icons ---------- */
const IcCart = ({s=18}) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <path d="M3 4h2l2.4 12.3a1.5 1.5 0 0 0 1.5 1.2h8.1a1.5 1.5 0 0 0 1.5-1.2L21 8H6"/>
    <circle cx="9" cy="20" r="1.4"/><circle cx="18" cy="20" r="1.4"/>
  </svg>
);
const IcPlus = ({s=16}) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M12 5v14M5 12h14"/></svg>
);
const IcMinus = ({s=16}) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round"><path d="M5 12h14"/></svg>
);
const IcClose = ({s=18}) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18"/></svg>
);
const IcArrow = ({s=18}) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
);
const IcCheck = ({s=18}) => (
  <svg width={s} height={s} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"><path d="M4 12l5 5L20 6"/></svg>
);

/* ---------- Feature icons (white stroke, sit on gradient tile) ---------- */
const FiBolt = () => (
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M13 2L4 14h6l-1 8 9-12h-6l1-8z"/></svg>
);
const FiSnow = () => (
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2v20M2 12h20M5 5l14 14M19 5L5 19M12 5l-3-2M12 5l3-2M12 19l-3 2M12 19l3 2M5 12l-2-3M5 12l-2 3M19 12l2-3M19 12l2 3"/></svg>
);
const FiRoute = () => (
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="19" r="2.2"/><circle cx="18" cy="5" r="2.2"/><path d="M8 19h6a4 4 0 0 0 0-8H10a4 4 0 0 1 0-8h6"/></svg>
);
const FiShield = () => (
  <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M12 2l8 3v6c0 5-3.4 8.5-8 11-4.6-2.5-8-6-8-11V5l8-3z"/><path d="M9 12l2 2 4-4"/></svg>
);
const FiLeaf = () => (
  <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6"/></svg>
);

/* ---------- Social icons ---------- */
const SoIg = () => (
  <svg width="19" height="19" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><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" fill="currentColor" stroke="none"/></svg>
);
const SoTk = () => (
  <svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor"><path d="M16.5 3c.4 2.3 1.9 4 4.2 4.3v3c-1.6.1-3-.3-4.2-1.1v6.4c0 3.7-2.7 6.4-6.2 6.4A6 6 0 0 1 4 16c0-3.3 2.9-6 6.6-5.5v3.2c-.5-.2-1-.3-1.5-.3-1.6 0-2.8 1.2-2.8 2.7 0 1.6 1.2 2.8 2.8 2.8 1.6 0 2.9-1.2 2.9-3.2V3h2.5z"/></svg>
);
const SoX = () => (
  <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M18 2h3l-7.5 8.6L22 22h-6.8l-5-6.6L4.5 22H1.5l8-9.2L2 2h7l4.5 6L18 2zm-2.4 18h1.9L8.5 4H6.5l9.1 16z"/></svg>
);
const SoYt = () => (
  <svg width="19" height="19" viewBox="0 0 24 24" fill="currentColor"><path d="M22 12c0-2.3-.2-3.6-.4-4.3a2.8 2.8 0 0 0-2-2C18 5.4 12 5.4 12 5.4s-6 0-7.6.3a2.8 2.8 0 0 0-2 2C2.2 8.4 2 9.7 2 12s.2 3.6.4 4.3a2.8 2.8 0 0 0 2 2c1.6.3 7.6.3 7.6.3s6 0 7.6-.3a2.8 2.8 0 0 0 2-2c.2-.7.4-2 .4-4.3zM10 15.5v-7l6 3.5-6 3.5z"/></svg>
);

/* ---------- CSS ICE CUP (hero) ---------- */
function IceCup(){
  // hand-placed ice cubes inside the cup
  const cubes = [
    {l:'14%', t:'30%', w:64, h:60, r:-12},
    {l:'48%', t:'24%', w:58, h:56, r:14},
    {l:'30%', t:'48%', w:70, h:62, r:6},
    {l:'12%', t:'58%', w:52, h:50, r:20},
    {l:'52%', t:'52%', w:60, h:58, r:-8},
    {l:'34%', t:'70%', w:54, h:48, r:-18},
  ];
  const drops = [
    {l:'10%',t:'40%',w:9,h:13},{l:'88%',t:'30%',w:7,h:10},{l:'82%',t:'62%',w:11,h:15},
    {l:'6%',t:'70%',w:8,h:11},{l:'90%',t:'80%',w:9,h:13},
  ];
  return (
    <div className="cup">
      <div className="cup-shadow"></div>
      <div className="cup-rim"></div>
      <div className="cup-body">
        <div className="cup-liquid"></div>
        {cubes.map((c,i)=>(
          <div key={i} className="ice" style={{left:c.l,top:c.t,width:c.w,height:c.h,transform:`rotate(${c.r}deg)`}}></div>
        ))}
      </div>
      {drops.map((d,i)=>(
        <div key={i} className="drop" style={{left:d.l,top:d.t,width:d.w,height:d.h}}></div>
      ))}
    </div>
  );
}

/* ---------- mini cup (product cards) ---------- */
function MiniCup(){
  const cubes = [
    {l:'18%',t:'34%',w:30,h:28,r:-10},
    {l:'46%',t:'30%',w:26,h:24,r:12},
    {l:'30%',t:'52%',w:32,h:28,r:4},
    {l:'50%',t:'58%',w:24,h:22,r:-14},
  ];
  return (
    <div className="mini-cup">
      <div className="mc-rim"></div>
      <div className="mc-body">
        {cubes.map((c,i)=>(
          <div key={i} className="mc-ice" style={{left:c.l,top:c.t,width:c.w,height:c.h,transform:`rotate(${c.r}deg)`}}></div>
        ))}
      </div>
    </div>
  );
}

/* ---------- brand mark ---------- */
const BrandMark = ({s=30}) => (
  <svg className="mark" width={s} height={s} viewBox="0 0 32 32" fill="none">
    <defs>
      <linearGradient id="bm" x1="0" y1="0" x2="1" y2="1">
        <stop offset="0" stopColor="var(--accent-2)"/><stop offset="1" stopColor="var(--accent-deep)"/>
      </linearGradient>
    </defs>
    <path d="M8 4h16l-2.2 21a3 3 0 0 1-3 2.6h-5.6a3 3 0 0 1-3-2.6L8 4z" fill="url(#bm)"/>
    <path d="M8 4h16l-.5 5H8.5L8 4z" fill="#fff" opacity="0.85"/>
    <g stroke="#fff" strokeWidth="1.4" strokeLinecap="round" opacity="0.9">
      <path d="M16 12v9M12 14l8 5M20 14l-8 5"/>
    </g>
  </svg>
);

Object.assign(window, {
  IcCart, IcPlus, IcMinus, IcClose, IcArrow, IcCheck,
  FiBolt, FiSnow, FiRoute, FiShield, FiLeaf,
  SoIg, SoTk, SoX, SoYt,
  IceCup, MiniCup, BrandMark,
});
