/* global React */

const SSIcon = ({ kind, size = 22 }) => {
  const p = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.6, strokeLinecap: "round", strokeLinejoin: "round" };
  switch (kind) {
    case "image":
      return <svg {...p}><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="9" cy="9" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>;
    case "bag":
      return <svg {...p}><path d="M6 7h12l-1 14H7L6 7z"/><path d="M9 7V5a3 3 0 0 1 6 0v2"/></svg>;
    case "video":
      return <svg {...p}><rect x="3" y="5" width="14" height="14" rx="2"/><polygon points="14,9 14,15 19,12" fill="currentColor" stroke="none"/></svg>;
    case "web":
      return <svg {...p}><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/><circle cx="6" cy="6.5" r="0.6" fill="currentColor"/><circle cx="8.5" cy="6.5" r="0.6" fill="currentColor"/></svg>;
    case "csv":
      return <svg {...p}><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 3v18"/></svg>;
    case "file":
      return <svg {...p}><path d="M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"/><path d="M14 3v6h6"/></svg>;
    case "notes":
      return <svg {...p}><rect x="4" y="4" width="16" height="16" rx="2"/><path d="M8 9h8M8 13h6M8 17h4"/></svg>;
    case "tag":
      return <svg {...p}><path d="M3 12l9-9h9v9l-9 9z"/><circle cx="16" cy="8" r="1.2"/></svg>;
    case "graph":
      return <svg {...p}><path d="M4 19V5"/><path d="M4 19h16"/><path d="M7 16l4-5 3 3 5-7"/></svg>;
    case "mail":
      return <svg {...p}><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 7 9-7"/></svg>;
    case "megaphone":
      return <svg {...p}><path d="M3 11v2a1 1 0 0 0 1 1h2l5 4V6L6 10H4a1 1 0 0 0-1 1z"/><path d="M14 8c1.5 1 1.5 7 0 8"/></svg>;
    case "truck":
      return <svg {...p}><rect x="2" y="7" width="12" height="10" rx="1"/><path d="M14 10h4l3 3v4h-7"/><circle cx="6" cy="18" r="1.6"/><circle cx="17" cy="18" r="1.6"/></svg>;
    case "chat":
      return <svg {...p}><path d="M4 5h16v11H8l-4 4z"/></svg>;
    case "rotate":
      return <svg {...p}><path d="M4 12a8 8 0 0 1 14-5"/><path d="M18 4v3h-3"/><path d="M20 12a8 8 0 0 1-14 5"/><path d="M6 20v-3h3"/></svg>;
    case "spark":
      return <svg {...p}><path d="M12 3v4M12 17v4M3 12h4M17 12h4M6 6l2.5 2.5M15.5 15.5L18 18M6 18l2.5-2.5M15.5 8.5L18 6"/></svg>;
    case "shield":
      return <svg {...p}><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/></svg>;
    case "heart":
      return <svg {...p}><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.5A4 4 0 0 1 19 10c0 5.5-7 10-7 10z"/></svg>;
    case "search":
      return <svg {...p} strokeWidth="1.8"><circle cx="11" cy="11" r="6"/><path d="M20 20l-4.5-4.5"/></svg>;
    case "crawl":
      return <svg {...p}><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>;
    case "kb":
      return <svg {...p}><path d="M5 4h11a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3z"/><path d="M5 17a3 3 0 0 1 3-3h11"/></svg>;
    case "q":
      return <svg {...p}><rect x="3" y="3" width="18" height="18" rx="3"/><path d="M9 10a3 3 0 1 1 4 2.8c-.6.3-1 .8-1 1.5V15M12 18v0"/></svg>;
    default:
      return null;
  }
};

const SSCard = ({ icon, tint, label }) => (
  <div className={`ss-card ss-card-${tint}`}>
    <div className="ss-card-icon"><SSIcon kind={icon} size={22} /></div>
    <div className="ss-card-label">{label}</div>
  </div>
);

const SSChip = ({ icon, tint, label }) => (
  <span className={`ss-chip ss-chip-${tint}`}>
    <span className="ss-chip-icon"><SSIcon kind={icon} size={15} /></span>
    {label}
  </span>
);

function ScrollStory() {
  return (
    <>
      {/* Screen 0 — Cards: head on top, bar slot in middle, cards below */}
      <section className="ss-section ss-section-0" id="ss-section-0">
        <div className="ss-section-inner">
          <div className="ss-screen-head">
            <span className="eyebrow">
              <span className="ss-eyebrow-text">WHAT MAKES DISPATCH DIFFERENT</span>
            </span>
            <h2>Show your store. <span className="accent">Don't just describe it.</span></h2>
          </div>
          <div className="ss-screen-bar" id="ss-bar-0" aria-hidden="true" />
          <div className="ss-screen-body">
            <div className="ss-cards-7">
              <SSCard icon="image" tint="violet" label="Brand assets" />
              <SSCard icon="bag" tint="rose" label="Product photos" />
              <SSCard icon="video" tint="red" label="Reference stores" />
              <SSCard icon="web" tint="orange" label="Voice & tone" />
              <SSCard icon="csv" tint="violet" label="Inventory CSVs" />
              <SSCard icon="file" tint="blue" label="Supplier docs" />
              <SSCard icon="notes" tint="green" label="Audience notes" />
            </div>
          </div>
        </div>
      </section>

      {/* Screen 1 — Chips */}
      <section className="ss-section ss-section-1" id="ss-section-1">
        <div className="ss-section-inner">
          <div className="ss-screen-head">
            <span className="eyebrow">
              <span className="ss-eyebrow-text">WHAT MAKES DISPATCH DIFFERENT</span>
            </span>
            <h2>The setup most stores postpone. <span className="accent">Live before you open.</span></h2>
          </div>
          <div className="ss-screen-bar" id="ss-bar-1" aria-hidden="true" />
          <div className="ss-screen-body">
            <div className="ss-chips">
              <SSChip icon="tag" tint="violet" label="Pricing strategy" />
              <SSChip icon="graph" tint="rose" label="Inventory forecasts" />
              <SSChip icon="search" tint="orange" label="SEO setup" />
              <SSChip icon="mail" tint="blue" label="Email flows" />
              <SSChip icon="megaphone" tint="red" label="Ad campaigns" />
              <SSChip icon="truck" tint="green" label="Tax & shipping" />
              <SSChip icon="chat" tint="violet" label="Customer support" />
              <SSChip icon="rotate" tint="orange" label="Returns policy" />
              <SSChip icon="graph" tint="blue" label="Analytics" />
              <SSChip icon="heart" tint="rose" label="Loyalty" />
              <SSChip icon="shield" tint="green" label="Compliance" />
            </div>
          </div>
        </div>
      </section>

      {/* Screen 2 — Panel: bar (with pills) on top, panel below, head at bottom */}
      <section className="ss-section ss-section-2" id="ss-section-2">
        <div className="ss-section-inner">
          <div className="ss-screen-bar ss-screen-bar-tall" id="ss-bar-2" aria-hidden="true" />
          <div className="ss-screen-body">
            <div className="ss-panel">
              <div className="ss-step">
                <div className="ss-marker"><span className="ss-dot" /><span className="ss-line" /></div>
                <div className="ss-step-body">
                  <div className="ss-step-title">Thinking & Reasoning</div>
                </div>
              </div>
              <div className="ss-step">
                <div className="ss-marker"><span className="ss-dot" /><span className="ss-line" /></div>
                <div className="ss-step-body">
                  <div className="ss-step-title">Read 12 brand references</div>
                  <div className="ss-tagrow">
                    <span className="ss-tag"><SSIcon kind="file" size={13} /> Brand_guidelines.pdf</span>
                    <span className="ss-tag"><SSIcon kind="csv" size={13} /> Catalog_v3.csv</span>
                    <span className="ss-tag">+10</span>
                  </div>
                </div>
              </div>
              <div className="ss-step">
                <div className="ss-marker"><span className="ss-dot" /><span className="ss-line" /></div>
                <div className="ss-step-body">
                  <div className="ss-step-title">Crawled the web</div>
                  <div className="ss-tagrow">
                    <span className="ss-tag-logo ss-logo-1">S</span>
                    <span className="ss-tag-logo ss-logo-2">N</span>
                    <span className="ss-tag-logo ss-logo-3">F</span>
                    <span className="ss-tag">+5</span>
                  </div>
                </div>
              </div>
              <div className="ss-step">
                <div className="ss-marker"><span className="ss-dot" /><span className="ss-line" /></div>
                <div className="ss-step-body">
                  <div className="ss-step-title">Drafted offers & ran tradeoffs</div>
                  <div className="ss-tagrow">
                    <span className="ss-tag"><SSIcon kind="q" size={13} /> Will repeat buyers carry LTV?</span>
                    <span className="ss-tag"><SSIcon kind="q" size={13} /> Is the launch margin defensible?</span>
                    <span className="ss-tag">+2</span>
                  </div>
                </div>
              </div>
              <div className="ss-step">
                <div className="ss-marker"><span className="ss-dot" /></div>
                <div className="ss-step-body">
                  <div className="ss-step-title">
                    Built a launch plan from <span className="ss-link">12 signals</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div className="ss-screen-head ss-screen-head-after">
            <span className="eyebrow">
              <span className="ss-eyebrow-text">WHAT MAKES DISPATCH DIFFERENT</span>
            </span>
            <h2>Decisions grounded in your data. <span className="accent">So launch feels inevitable.</span></h2>
          </div>
        </div>
      </section>
    </>
  );
}

window.ScrollStory = ScrollStory;