/* eslint-disable */
const { useState: useStateMid, useMemo: useMemoMid, useEffect: useEffectMid } = React;

/* ───── Capabilities (tabbed showcase) ───── */
function Capabilities() {
  const [activeId, setActiveId] = useStateMid(window.CAPABILITIES[0].id);
  const active = useMemoMid(
    () => window.CAPABILITIES.find((c) => c.id === activeId),
    [activeId]
  );

  return (
    <section id="capabilities" className="section alt">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">02 — What we can make</span>
            <h2>Every material a museum store sells. <em>Made under one roof.</em></h2>
          </div>
          <p className="desc">
            Every category below is a real production line we run today. Switch tabs to
            explore formats, indicative MOQs and lead times. Mix and match across
            categories to build a coordinated retail collection.
          </p>
        </div>

        <div className="cap-tabs" role="tablist">
          {window.CAPABILITIES.map((c) => (
            <button
              key={c.id}
              role="tab"
              aria-selected={c.id === activeId}
              className={`cap-tab ${c.id === activeId ? "is-active" : ""}`}
              onClick={() => setActiveId(c.id)}
            >
              <span className="swatch" style={{ background: c.color }}></span>
              {c.label}
              <span className="cap-count">{String(c.items.length).padStart(2, "0")}</span>
            </button>
          ))}
        </div>

        <div className="cap-panel">
          <div className="cap-meta">
            <h3>{active.label}</h3>
            <p>{active.blurb}</p>
            <ul className="specs">
              {Object.entries(active.specs).map(([k, v]) => (
                <li key={k}><span className="k">{k}</span><span className="v">{v}</span></li>
              ))}
            </ul>
          </div>
          <div className="cap-grid" key={active.id}>
            {active.items.map((name, i) => {
              const tint = window.tintFor(name, active.color);
              const bg = `oklch(${tint.lightness}% 0.04 ${
                hexToHue(active.color) + tint.angle
              })`;
              const src = window.IMAGES?.[active.id]?.[name];
              return (
                <Reveal key={name} className="cap-item" delay={i * 20}>
                  <div className="thumb" style={{ background: bg }}>
                    {src ? (
                      <img
                        className="thumb-img"
                        src={src}
                        alt={name}
                        loading="lazy"
                        onError={(e) => { e.currentTarget.style.display = 'none'; }}
                      />
                    ) : (
                      <span className="thumb-label">
                        [ {name.toUpperCase()} ]<br />
                        product photo
                      </span>
                    )}
                  </div>
                  <div className="name">{name}</div>
                  <div className="ts">{active.id.toUpperCase()}-{String(i + 1).padStart(3, "0")}</div>
                </Reveal>
              );
            })}
          </div>
        </div>
      </div>
    </section>
  );
}

function hexToHue(hex) {
  const c = hex.replace("#", "");
  const r = parseInt(c.slice(0, 2), 16) / 255;
  const g = parseInt(c.slice(2, 4), 16) / 255;
  const b = parseInt(c.slice(4, 6), 16) / 255;
  const max = Math.max(r, g, b), min = Math.min(r, g, b);
  let h = 0;
  if (max !== min) {
    const d = max - min;
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h *= 60;
  }
  return h;
}

/* ───── Process ───── */
function Process() {
  const stroke = { fill: "none", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round", strokeLinejoin: "round" };
  const steps = [
    {
      n: "01", t: "Concept", eta: "Week 1",
      d: "Brief intake, artwork audit, format brainstorm. We translate curatorial intent into a product list.",
      svg: (
        <svg viewBox="0 0 28 28" {...stroke}>
          <path d="M14 4a6 6 0 016 6c0 3-2 4.5-2.5 6.5h-7C10 14.5 8 13 8 10a6 6 0 016-6z"/>
          <path d="M11 19h6M12 22h4"/>
        </svg>
      )
    },
    {
      n: "02", t: "Design", eta: "Week 2–3",
      d: "Technical drawings, mock-ups and packaging concepts. Every spec documented for review.",
      svg: (
        <svg viewBox="0 0 28 28" {...stroke}>
          <path d="M5 22l4-1 13-13-3-3L6 18z"/>
          <path d="M16 8l3 3"/>
          <path d="M5 22h18" opacity=".4"/>
        </svg>
      )
    },
    {
      n: "03", t: "Sampling", eta: "+5–7 days",
      d: "First samples in five to seven days. Iterate on color, finish and construction before tooling.",
      svg: (
        <svg viewBox="0 0 28 28" {...stroke}>
          <path d="M11 4h6v5l4 11a2 2 0 01-2 2.7H9a2 2 0 01-2-2.7l4-11z"/>
          <path d="M11 4h6"/>
          <circle cx="13" cy="17" r="1"/>
          <circle cx="16" cy="20" r="1"/>
        </svg>
      )
    },
    {
      n: "04", t: "Production", eta: "Week 6–10",
      d: "Quality-controlled short-run manufacturing across our network. Inline checks at every stage.",
      svg: (
        <svg viewBox="0 0 28 28" {...stroke}>
          <path d="M4 22V12l5 3V12l5 3V12l5 3V8l5-3v17z"/>
          <path d="M4 22h20" opacity=".4"/>
        </svg>
      )
    },
    {
      n: "05", t: "Packaging", eta: "Week 10",
      d: "Custom carriers, gift boxes, POS displays — designed for floor and exhibition shop.",
      svg: (
        <svg viewBox="0 0 28 28" {...stroke}>
          <path d="M4 9l10-5 10 5v10l-10 5-10-5z"/>
          <path d="M4 9l10 5 10-5M14 14v10"/>
          <path d="M9 6.5l10 5" opacity=".5"/>
        </svg>
      )
    },
    {
      n: "06", t: "Delivery", eta: "Week 11+",
      d: "Consolidated shipping to your warehouses in the U.S. and Europe. Documentation included.",
      svg: (
        <svg viewBox="0 0 28 28" {...stroke}>
          <rect x="3" y="9" width="13" height="10"/>
          <path d="M16 12h5l3 3v4h-8z"/>
          <circle cx="9" cy="21" r="1.8"/>
          <circle cx="20" cy="21" r="1.8"/>
        </svg>
      )
    },
  ];
  return (
    <section id="process" className="section">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">03 — How we work</span>
            <h2>Six steps from <em>artwork to retail floor.</em></h2>
          </div>
          <p className="desc">
            One development team, one timeline, one accountable point of contact. We move
            briefs from concept to delivered, packaged stock without you ever having to
            stitch together separate vendors.
          </p>
        </div>
        <div className="process">
          {steps.map((s, i) => (
            <Reveal key={s.n} className="step" delay={i * 80}>
              <span className="step-num">STEP / {s.n}</span>
              <div className="step-dot">{s.svg}</div>
              <h4>{s.t}</h4>
              <p>{s.d}</p>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ───── Featured partnerships (case study) ───── */
function Trust() {
  const stats = [
    { k: "First samples", v: "5–7 days" },
    { k: "Lead time", v: "8–11 wks" },
    { k: "Active SKUs", v: "150+" },
    { k: "Sell-through", v: "+38%" },
  ];
  return (
    <section id="partners" className="section alt">
      <div className="wrap">
        <div className="section-head">
          <div>
            <span className="eyebrow">04 — Selected partnerships</span>
            <h2>Trusted by the world's <em>leading museum stores.</em></h2>
          </div>
          <p className="desc">
            We're a long-standing development partner for two of the world's most
            recognized cultural institutions — building coordinated retail
            collections from concept through delivered stock.
          </p>
        </div>

        <div className="partner-card">
          <div className="partner-marks" aria-label="Featured museum partners">
            <div className="partner-mark">
              <span className="m-eyebrow">Selected partner · since 2018</span>
              <span className="m-name">The Metropolitan<br/>Museum of Art</span>
              <span className="m-loc">New York, USA</span>
            </div>
            <div className="partner-divider" aria-hidden="true"></div>
            <div className="partner-mark">
              <span className="m-eyebrow">Selected partner · since 2020</span>
              <span className="m-name">The British<br/>Museum</span>
              <span className="m-loc">London, UK</span>
            </div>
          </div>

          <div className="partner-body">
            <div className="partner-quote">
              <div className="q-mark">“</div>
              <blockquote>
                Tin Tin Tint moves like an in-house product team. They turn
                curatorial briefs into retail-ready collections — sampled,
                packaged and shipped — at a cadence that lets us actually
                program around exhibitions instead of behind them.
              </blockquote>
              <cite>
                Head of Retail Product Development
                <span>Tier-1 international museum store · 2025</span>
              </cite>
            </div>
            <div className="partner-stats">
              {stats.map((s) => (
                <div key={s.k} className="pstat">
                  <div className="pstat-v">{s.v}</div>
                  <div className="pstat-k">{s.k}</div>
                </div>
              ))}
            </div>
          </div>

          <div className="partner-foot">
            <span className="pf-label">What we develop with them</span>
            <span className="pf-tags">
              <span>Exhibition tie-in collections</span>
              <span>Permanent-collection product</span>
              <span>Coordinated packaging</span>
              <span>POS &amp; gift-set programs</span>
              <span>Children's &amp; educational lines</span>
            </span>
          </div>

          <p className="partner-note">
            Both partnerships referenced with written permission. Marks of The Metropolitan
            Museum of Art and The British Museum are the property of their respective owners.
          </p>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { Capabilities, Process, Trust });