// The Wall — full homepage build (Direction A, chosen)
const WALL_TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accents": ["#f5e642", "#9333EA"],
  "background": "plain",
  "glow": 1.5,
  "sprayTags": false
}/*EDITMODE-END*/;

// Image sets the homepage polaroids cycle through.
const WALL_BENCH_PAINT = [
  { src: 'images/print-mayhem-3.jpg', alt: 'Best painted army trophy, printed and hand-painted', cap: '"best painted army" trophy, printed + painted here' },
  { src: 'images/print-mayhem-1.jpg', alt: 'Goblin trophy, back detail', cap: 'goblin, back detail. airbrush + brush' },
  { src: 'images/print-mayhem-5.jpg', alt: 'Finished trophy off the bench', cap: 'another one off the paint bench' },
];
const WALL_BENCH_DESIGN = [
  { src: 'images/design-cartridge-exploded.png', alt: 'Modular needle cartridge, exploded view', cap: 'modular needle cartridge. design to print' },
  { src: 'images/design-inkcup-hero.png', alt: 'Texas ink cup product render', cap: 'texas ink cup. product run' },
];

// A polaroid that cross-fades through a set of images. Respects reduced-motion.
function RotatingPolaroid({ pool, tilt, interval }) {
  const [i, setI] = React.useState(0);
  const [vis, setVis] = React.useState(true);
  React.useEffect(() => {
    if (pool.length < 2) return;
    const reduce = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce) return;
    const id = setInterval(() => {
      setVis(false);
      setTimeout(() => { setI((p) => (p + 1) % pool.length); setVis(true); }, 450);
    }, interval);
    return () => clearInterval(id);
  }, [pool.length, interval]);
  const cur = pool[i];
  const fade = { opacity: vis ? 1 : 0, transition: 'opacity 0.45s ease' };
  return (
    <figure className="wall-polaroid" style={{ transform: `rotate(${tilt}deg)` }}>
      <img src={cur.src} alt={cur.alt} style={fade} />
      <figcaption style={fade}>{cur.cap}</figcaption>
    </figure>
  );
}

function WallPage() {
  const t = WALL_TWEAK_DEFAULTS;
  const [accA, accB] = t.accents;

  const bgClass = { brick: 'wall-bg-brick', concrete: 'wall-bg-concrete', plain: 'wall-bg-plain' }[t.background] || 'wall-bg-brick';

  const tickerItems = ['COMING SOON', 'RENOVATION UNDERWAY', 'SEALED AT MSRP', 'SINGLES 10–20% OFF', 'PRINT FARM RUNNING'];
  const tickerRun = (key) => (
    <div key={key} style={{ display: 'flex', gap: 30 }}>
      {tickerItems.map((item, i) => (
        <span key={i} className="wall-ticker-item"><span>{item}</span><span className="star">★</span></span>
      ))}
    </div>
  );

  return (
    <div className={`wall-root ${bgClass}`} style={{ '--acc-a': accA, '--acc-b': accB, '--glow': t.glow }}>

      <WallTopbar active="HOME" />

      <section className="wall-hero" data-screen-label="Hero">
        {t.sprayTags && <span className="wall-spray-tag wall-tag-1" aria-hidden="true">since day one</span>}
        {t.sprayTags && <span className="wall-spray-tag wall-tag-2" aria-hidden="true">two sides!</span>}
        <img className="wall-hero-wordmark" src="images/logo-wordmark.png" alt="Southside Studio & Hobbies" />
        <p className="wall-hero-sub">
          A fab studio and a hobby hall behind one rolled-up door.
          Prints, props and code by day. Tables, trades and paint by night.
        </p>
      </section>

      <div className="wall-ticker" aria-hidden="true">
        <div className="wall-ticker-inner">{tickerRun('a')}{tickerRun('b')}</div>
      </div>

      <section className="wall-doors" data-screen-label="Doors">
        <a className="wall-door wall-door-a" href="Studio Page.html" id="studio">
          <div className="wall-door-shift">DAY SHIFT</div>
          <div className="wall-door-title">The Studio</div>
          <div className="wall-door-services">
            <div className="wall-door-svc"><span>+</span>Custom 3D printing &amp; print farm time</div>
            <div className="wall-door-svc"><span>+</span>Miniature painting &amp; commission work</div>
            <div className="wall-door-svc"><span>+</span>Original design, prop &amp; sculpture builds</div>
            <div className="wall-door-svc"><span>+</span>Software &amp; bot development</div>
          </div>
          <span className="wall-door-cta">LET'S BUILD SOMETHING →</span>
        </a>

        <a className="wall-door wall-door-b" href="Hobbies Page.html" id="hobbies">
          <div className="wall-door-shift">NIGHT SHIFT</div>
          <div className="wall-door-title">The Hobbies</div>
          <div className="wall-door-services">
            <div className="wall-door-svc"><span>+</span>Game tables, leagues &amp; MVP nights</div>
            <div className="wall-door-svc"><span>+</span>MSRP on sealed · 10–20% off singles</div>
            <div className="wall-door-svc"><span>+</span>Paint stations &amp; miniature workspace</div>
            <div className="wall-door-svc"><span>+</span>Cosplay &amp; sculpture printing on demand</div>
          </div>
          <span className="wall-door-cta">PULL UP A CHAIR →</span>
        </a>
      </section>

      <WallMvpBanner />

      <section className="wall-work" id="work" data-screen-label="Work">
        <h2 className="wall-work-title">Fresh off the bench</h2>
        <div className="wall-polaroids">
          <RotatingPolaroid pool={WALL_BENCH_PAINT} tilt={-2.5} interval={4200} />
          <RotatingPolaroid pool={WALL_BENCH_DESIGN} tilt={1.5} interval={5200} />
          <figure className="wall-polaroid" style={{ transform: 'rotate(-1deg)' }}>
            <div className="ph wall-ph"><span>photo: game night, tables full</span></div>
            <figcaption>game night. that's your seat</figcaption>
          </figure>
        </div>
        <div className="wall-work-note">↑ that last frame is yours, bring a camera to game night</div>
      </section>

      <section className="wall-visit" id="visit" data-screen-label="Visit">
        <div className="wall-visit-kicker">WHERE TO FIND US</div>
        <div className="wall-visit-addr">Storefront under renovation</div>
        <p style={{ maxWidth: 680, margin: '0 auto 18px', fontFamily: '"Grindy Brush", sans-serif', fontSize: 20, lineHeight: 1.6, color: 'var(--grey)' }}>
          We're rebuilding the Elkhart space so we can host you safely, with doors opening by August. Until then, catch us at local events and pop-ups for sales and pickups.
        </p>
        <div className="wall-visit-hours">
          <span className="wall-chip wall-chip-a">STUDIO · BY APPOINTMENT</span>
          <span className="wall-chip wall-chip-b">HOBBIES · OPEN BY AUGUST</span>
          <span className="wall-chip wall-chip-y">RENOVATION UNDERWAY</span>
        </div>
        <a className="wall-visit-cta" href="Contact Page.html">CONTACT US</a>
      </section>

      <footer className="wall-footer">
        <img src="images/logo-badge.jpg" alt="Southside Studio & Hobbies badge" style={{ height: 64, width: 64, borderRadius: '50%' }} />
        <span>SOUTHSIDE STUDIO &amp; HOBBIES · ELKHART TX · S3HOBBIES.COM</span>
      </footer>
    </div>
  );
}
window.WallPage = WallPage;