// ui.jsx — Header, Hero (3 directions), Story, Footer
const { useState, useEffect, useRef } = React;

// ---- tiny inline marks -------------------------------------------------
function Wordmark({ onClick }) {
  return (
    <button className="brandmark" onClick={onClick} aria-label="Sax Playing Dog — home">
      <span className="brandmark-spd">SPD</span>
      <span className="brandmark-full">Sax Playing Dog</span>
    </button>
  );
}

// Embroidered logo "patch" — the real stitched dog, cropped from the product.
function LogoPatch({ cw, size = 'md' }) {
  return (
    <span className={`patch patch-${size}`}>
      <img src={cw.logo} alt="Sax Playing Dog embroidered logo" />
    </span>
  );
}

// ---- Header ------------------------------------------------------------
function Header({ cw, cartCount, onShop, onStory, onHome, onCart, scrolled }) {
  return (
    <header className={`site-head ${scrolled ? 'is-scrolled' : ''}`}>
      <Wordmark onClick={onHome} />
      <nav className="site-nav">
        <button onClick={onShop}>Shop</button>
        <button onClick={onStory}>Story</button>
      </nav>
      <button className="cart-btn" onClick={onCart} aria-label="Open cart">
        <span>Cart</span>
        <span className={`cart-count ${cartCount ? 'has' : ''}`}>{cartCount}</span>
      </button>
    </header>
  );
}

// ---- Hero --------------------------------------------------------------
function Hero({ cw, variant, onShop }) {
  const front = `${cw.dir}/${cw.files.front}`;

  const Lockup = ({ compact }) => (
    <div className={`lockup ${compact ? 'lockup-compact' : ''}`}>
      <h1 className="spd">SPD</h1>
      <div className="wordrow">
        <span className="rule" />
        <span className="words">Sax&nbsp;Playing&nbsp;Dog</span>
        <span className="rule" />
      </div>
    </div>
  );

  if (variant === 'split') {
    return (
      <section className="hero hero-split" id="top">
        <div className="hero-split-left">
          <p className="eyebrow">Embroidered corduroy caps · printed to order</p>
          <Lockup compact />
          <p className="hero-sub">
            One hand-drawn dog, one very good hat. Pick your color below.
          </p>
          <div className="hero-cta-row">
            <button className="btn btn-solid" onClick={onShop}>Shop the cap — $39.99</button>
            <LogoPatch cw={cw} size="sm" />
          </div>
        </div>
        <div className="hero-split-right">
          <div className="hero-stage">
            <img className="hero-hat" src={front} alt={`${cw.name} corduroy cap`} />
          </div>
        </div>
        <ScrollCue onShop={onShop} />
      </section>
    );
  }

  if (variant === 'marquee') {
    const strip = Array.from({ length: 8 });
    return (
      <section className="hero hero-marquee" id="top">
        <div className="marquee">
          <div className="marquee-track">
            {strip.concat(strip).map((_, i) => (
              <span key={i} className="marquee-item">Sax&nbsp;Playing&nbsp;Dog<i>•</i></span>
            ))}
          </div>
        </div>
        <div className="hero-marquee-body">
          <h1 className="spd spd-giant">SPD</h1>
          <img className="hero-hat hero-hat-float" src={front} alt={`${cw.name} corduroy cap`} />
        </div>
        <div className="hero-marquee-foot">
          <LogoPatch cw={cw} size="sm" />
          <button className="btn btn-solid" onClick={onShop}>Shop the cap — $39.99</button>
        </div>
        <ScrollCue onShop={onShop} />
      </section>
    );
  }

  // default: poster
  return (
    <section className="hero hero-poster" id="top">
      <p className="eyebrow">Embroidered corduroy caps · printed to order</p>
      <Lockup />
      <div className="hero-stage hero-stage-poster">
        <img className="hero-hat" src={front} alt={`${cw.name} corduroy cap`} />
      </div>
      <div className="hero-cta-row center">
        <button className="btn btn-solid" onClick={onShop}>Shop the cap — $39.99</button>
      </div>
      <ScrollCue onShop={onShop} />
    </section>
  );
}

function ScrollCue({ onShop }) {
  return (
    <button className="scroll-cue" onClick={onShop} aria-label="Scroll to shop">
      <span>Choose your color</span>
      <span className="scroll-cue-arrow">↓</span>
    </button>
  );
}

// ---- Story -------------------------------------------------------------
const WORN_COUNT = 6;

function Story({ cw }) {
  // Duplicate the set so the marquee can loop seamlessly.
  const cards = Array.from({ length: WORN_COUNT * 2 });

  return (
    <section className="story" id="story">
      <div className="story-grid">
        <div className="story-text">
          <p className="eyebrow">{STORY.kicker}</p>
          <h2 className="story-title">{STORY.title}</h2>
          {STORY.body.map((p, i) => <p key={i} className="story-p">{p}</p>)}
          <p className="story-sign">— Drawn once. Stitched ever since.</p>
        </div>
        <div className="story-art">
          <figure className="origin-main">
            <img src="assets/story/original-ink.jpg" alt="The original Sax Playing Dog, drawn in ink" />
            <figcaption>The original · ink on paper</figcaption>
          </figure>
          <div className="origin-pair">
            <figure className="origin-page">
              <img src="assets/story/sketchbook-page.jpg" alt="The sketchbook page the dog was drawn on" />
              <figcaption>The sketchbook page</figcaption>
            </figure>
            <figure className="origin-traced">
              <div className="origin-traced-stage">
                <img src="assets/story/traced-color.png" alt="The traced color version used to make the hats" />
              </div>
              <figcaption>Traced clean — the exact art stitched onto every cap.</figcaption>
            </figure>
          </div>
          <p className="story-cap">Drawn once in ink, traced into color, then embroidered in {cw.thread.toLowerCase()}.</p>
        </div>
      </div>

      {/* ---- Worn-in-the-wild carousel (auto-rotating) ---- */}
      <div className="worn">
        <div className="worn-head">
          <div>
            <p className="eyebrow">Worn in the wild</p>
            <h3 className="worn-title">On heads we love.</h3>
          </div>
        </div>
        <div className="worn-marquee">
          <div className="worn-track" aria-hidden="true">
            {cards.map((_, i) => (
              <figure className="worn-card" key={i}>
                <div className="worn-ph"><span className="worn-ph-label">photo</span></div>
              </figure>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ---- Footer ------------------------------------------------------------
function Footer({ cw }) {
  return (
    <footer className="site-foot">
      <div className="foot-brand">
        <span className="foot-spd">SPD</span>
        <span className="foot-full">Sax Playing Dog</span>
      </div>
      <div className="foot-socials">
        {SOCIALS.map((s) => (
          <a key={s.label} href={s.href} target="_blank" rel="noreferrer">
            <span className="foot-soc-label">{s.label}</span>
            <span className="foot-soc-handle">{s.handle}</span>
          </a>
        ))}
      </div>
      <p className="foot-fine">© {new Date().getFullYear()} Sax Playing Dog · saxplayingdog.com · Printed & shipped to order</p>
    </footer>
  );
}

Object.assign(window, { Header, Hero, Story, Footer, LogoPatch, Wordmark });