/* Packaging — brand icon-diagonal pattern system */

/* ── Material Symbols Rounded ligature names ──────────── */
const MS_ICONS = [
  'redeem',             // gift box
  'favorite',           // heart
  'cake',               // birthday cake
  'star',               // star
  'shopping_bag',       // shopping bag
  'wine_bar',           // cocktail glass
  'celebration',        // party / celebration
  'workspace_premium',  // premium crown
];

/* ── Equal-spaced diagonal grid ───────────────────────── */
/* 3×3 tile, 72 px between icon centres.
   patternTransform rotate(-25) makes rows run ↗ bottom-left → top-right */
const SPACING = 72;
const GRID    = 3;
const TILE    = GRID * SPACING; // 216 px

const GRID_POSITIONS = (function () {
  const pos = [];
  for (let row = 0; row < GRID; row++) {
    for (let col = 0; col < GRID; col++) {
      const idx = row * GRID + col;
      pos.push({
        x: SPACING * col + SPACING / 2,  // 36, 108, 180
        y: SPACING * row + SPACING / 2,  // 36, 108, 180
        icon: MS_ICONS[idx % MS_ICONS.length],
      });
    }
  }
  return pos;
}());

/* ── SVG pattern renderer ──────────────────────────────── */
const ICON_STYLE = { fontVariationSettings: "'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24" };

function ScatterPattern({ id, bg, fg, opacity = 0.13, iconSize = 30 }) {
  return (
    <pattern
      id={id} x="0" y="0"
      width={TILE} height={TILE}
      patternUnits="userSpaceOnUse"
      patternTransform="rotate(-25)"
    >
      <rect width={TILE} height={TILE} fill={bg} />
      {GRID_POSITIONS.map((p, idx) => (
        <text
          key={idx}
          x={p.x} y={p.y}
          fontFamily="Material Symbols Rounded"
          fontSize={iconSize}
          textAnchor="middle"
          dominantBaseline="central"
          fill={fg}
          opacity={opacity}
          style={ICON_STYLE}
        >{p.icon}</text>
      ))}
    </pattern>
  );
}

/* ── Pattern colour variants ───────────────────────────── */
const PATTERNS = [
  {
    id: "ivory-sap",
    name: "Ivory · Sapphire",
    description: "Primary · tissue paper, gift bag lining, interior wrapping",
    bg: "#FBF8F3", fg: "#1A2D6B", opacity: 0.11,
    textColor: "rgba(26,45,107,0.6)",
  },
  {
    id: "sap-ivory",
    name: "Sapphire · Ivory",
    description: "Dark · luxury box outer, mailer tube, premium wrapping",
    bg: "#1A2D6B", fg: "#FBF8F3", opacity: 0.22,
    textColor: "rgba(255,255,255,0.7)",
  },
  {
    id: "rose-ivory",
    name: "Rose Gold · Ivory",
    description: "Accent · gift card sleeves, seasonal bag variant",
    bg: "#B76E79", fg: "#FBF8F3", opacity: 0.22,
    textColor: "rgba(255,255,255,0.7)",
  },
  {
    id: "champ-umber",
    name: "Champagne · Umber",
    description: "Tertiary · kraft-tone sheets, notecard backs, box base lining",
    bg: "#E8DCC4", fg: "#594623", opacity: 0.16,
    textColor: "rgba(89,70,35,0.55)",
  },
];

/* ── Swatch card ───────────────────────────────────────── */
function PatternSwatch({ p }) {
  const pid = `swatch-${p.id}`;
  return (
    <div className="zo-pkg-card">
      <svg viewBox="0 0 480 360" style={{ display: "block", borderTopLeftRadius: "inherit", borderTopRightRadius: "inherit" }}>
        <defs><ScatterPattern id={pid} bg={p.bg} fg={p.fg} opacity={p.opacity} /></defs>
        <rect width="480" height="360" fill={`url(#${pid})`} />
      </svg>
      <div className="zo-pkg-body">
        <h4 className="zo-pkg-title">{p.name}</h4>
        <p className="zo-pkg-subtitle">{p.description}</p>
      </div>
    </div>
  );
}

/* ── Wide tile (at scale) ──────────────────────────────── */
function PatternTile({ p }) {
  const pid = `tile-${p.id}`;
  return (
    <div style={{ position: "relative", borderRadius: 20, overflow: "hidden", border: "1px solid var(--md-outline-variant)" }}>
      <svg viewBox="0 0 1200 360" style={{ display: "block", width: "100%", height: "auto" }}>
        <defs><ScatterPattern id={pid} bg={p.bg} fg={p.fg} opacity={p.opacity} /></defs>
        <rect width="1200" height="360" fill={`url(#${pid})`} />
      </svg>
      <div style={{
        position: "absolute", bottom: 18, left: 24,
        fontFamily: "var(--font-display)", fontSize: 14, fontWeight: 500,
        color: p.textColor, letterSpacing: "0.3px",
      }}>{p.name}</div>
    </div>
  );
}

/* ── Hero brand pattern (full-width) ───────────────────── */
function BrandPatternHero() {
  const pid = "hero-brand";
  return (
    <div style={{ position: "relative", borderRadius: 28, overflow: "hidden", marginBottom: 12 }}>
      <svg viewBox="0 0 1200 480" style={{ display: "block", width: "100%", height: "auto" }}>
        <defs><ScatterPattern id={pid} bg="#FBF8F3" fg="#1A2D6B" opacity={0.11} /></defs>
        <rect width="1200" height="480" fill={`url(#${pid})`} />
      </svg>
      <div style={{
        position: "absolute", inset: 0,
        display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center",
        gap: 8,
      }}>
        <div style={{ fontSize: 11, fontWeight: 600, letterSpacing: 2, textTransform: "uppercase", color: "rgba(26,45,107,0.45)" }}>Brand pattern</div>
        <div style={{ fontFamily: "var(--font-display)", fontSize: 32, fontWeight: 500, color: "rgba(26,45,107,0.22)", letterSpacing: "0.5px" }}>
          Icon scatter
        </div>
      </div>
    </div>
  );
}

/* ── Section ───────────────────────────────────────────── */
function PackagingSection() {
  return (
    <section id="packaging" className="zo-section">
      <div className="zo-section-eyebrow">04 — Packaging</div>
      <h2 className="zo-section-title">The pattern is the brand.</h2>
      <p className="zo-section-lede">
        One pattern. Four colour palettes. The Zocane icon scatter — gift, heart, cake, star, bag, cocktail, celebration, premium — tiles seamlessly across every surface, from tissue paper to digital headers.
      </p>

      <BrandPatternHero />
      <div style={{ fontSize: 12, color: "var(--md-on-surface-variant)", marginBottom: 48, lineHeight: 1.7 }}>
        <strong style={{ color: "var(--md-on-surface)" }}>Icon scatter · {TILE} px tile.</strong>{" "}
        Eight Material Symbols Rounded icons (gift · heart · cake · star · bag · cocktail · celebration · premium) on a 3×3 equal-spaced diagonal grid. Rows run bottom-left to top-right. Works at any scale — 100 dpi offset print to 4K screen.
      </div>

      <h3 className="zo-subsection-title">Colour variants</h3>
      <p style={{ color: "var(--md-on-surface-variant)", fontSize: 14, marginBottom: 20, maxWidth: "62ch" }}>
        Same tile, four colourways. Pick by surface: Ivory for soft interior surfaces, Sapphire for premium outer packaging, Rose Gold for seasonal accents, Champagne for kraft-tone and neutral grounds.
      </p>
      <div className="zo-pkg-grid" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(240px, 1fr))" }}>
        {PATTERNS.map(p => <PatternSwatch key={p.id} p={p} />)}
      </div>

      <h3 className="zo-subsection-title">At scale</h3>
      <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
        {PATTERNS.map(p => <PatternTile key={p.id} p={p} />)}
      </div>

      <div style={{ marginTop: 32, padding: "20px 24px", background: "var(--md-secondary-container)", color: "var(--md-on-secondary-container)", borderRadius: 20, fontSize: 14, lineHeight: 1.6 }}>
        <strong style={{ fontFamily: "var(--font-display)", fontWeight: 500, fontSize: 16 }}>Surface spec.</strong>
        <span style={{ marginLeft: 8 }}>
          Rigid ivory <span className="zo-mono">#FBF8F3</span> matte art paper (157 gsm) over 6–8 mm greyboard. N42 magnet closure. Champagne foam tray, cream non-woven lining.
          Premium kraft bags, twisted-rope handles, blind-debossed seal at base.
          Pattern printed at 150 lpi minimum · Pantone-matched colourways available on request.
        </span>
      </div>

      <h3 className="zo-subsection-title">Inside the box — strict prohibitions</h3>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: 12 }}>
        {[
          "No MRP stickers", "No retail barcodes", "No printed digital invoices",
          "No promotional inserts", "No coupon cards", "No packing slips with pricing",
        ].map(item => (
          <div key={item} style={{
            padding: "14px 18px",
            background: "var(--md-error-container)", color: "var(--md-on-error-container)",
            borderRadius: 12, fontSize: 13, fontWeight: 500,
            display: "flex", alignItems: "center", gap: 10,
          }}>
            <span style={{ fontSize: 16 }}>✕</span>
            {item}
          </div>
        ))}
      </div>
    </section>
  );
}

window.PackagingSection = PackagingSection;