// hero.jsx — Hero section + the animated product-mock that loops in it.
// The mock simulates the Prexi product canvas: a "scenes" rail on the
// left, a video preview in the middle showing fake product shots, and
// an auto-populating variant grid on the right. It loops every ~14s.

/* eslint-disable react/prop-types */

// ─────────────────────────────────────────────────────────
// HeroMock — animated faux-product surface
// Plays a continuous loop of: scene selected → variants generate →
// new scene added → variants generate. Pure CSS keyframes; React
// just lays out the DOM. Lives in the right column of the hero.
// ─────────────────────────────────────────────────────────
function HeroMock() {
  // 4 scenes, animated to "appear" in sequence
  const scenes = [
  { id: 1, label: "01 · Hook", duration: "0:03" },
  { id: 2, label: "02 · Product", duration: "0:04" },
  { id: 3, label: "03 · UGC clip", duration: "0:05" },
  { id: 4, label: "04 · CTA card", duration: "0:02" }];


  // 9-up variant grid that fills in over the loop
  const variants = Array.from({ length: 9 }, (_, i) => i);

  return (
    <div className="hero-mock">
      {/* top bar — fake app chrome */}
      <div className="hm-top">
        <div className="hm-traffic">
          <span /><span /><span />
        </div>
        <div className="hm-tabs">
          <div className="hm-tab active">
            <span className="hm-tab-dot" />
            Vellum · Sleep tincture · Spring brief
          </div>
        </div>
        <div className="hm-actions">
          <div className="hm-pill">
            <span className="hm-pulse" />
            Agent running
          </div>
        </div>
      </div>

      {/* main 3-col surface */}
      <div className="hm-body">
        {/* left rail — scenes */}
        <div className="hm-rail">
          <div className="hm-rail-head">
            <span className="hm-rail-title">Scenes</span>
            <span className="hm-rail-count mono">4/4</span>
          </div>
          <div className="hm-scenes">
            {scenes.map((s, i) =>
            <div
              key={s.id}
              className={`hm-scene hm-scene-${i + 1}`}>
              
                <div className="hm-scene-thumb" />
                <div className="hm-scene-meta">
                  <div className="hm-scene-label">{s.label}</div>
                  <div className="hm-scene-dur mono">{s.duration}</div>
                </div>
              </div>
            )}
          </div>
          <div className="hm-rail-foot">
            <span className="mono" style={{ opacity: 0.55, fontSize: 10 }}>+ ADD SCENE</span>
          </div>
        </div>

        {/* center — preview */}
        <div className="hm-stage">
          <div className="hm-stage-frame">
            <div className="hm-stage-vid">
              {/* fake "video" — animated product composition */}
              <div className="hm-vid-bg" />
              <div className="hm-vid-product">
                <div className="hm-bottle">
                  <div className="hm-bottle-cap" />
                  <div className="hm-bottle-neck" />
                  <div className="hm-bottle-body">
                    <div className="hm-bottle-label">
                      <div className="hm-bottle-brand">VELLUM</div>
                      <div className="hm-bottle-sub">SLEEP · 30ml</div>
                    </div>
                  </div>
                </div>
              </div>
              {/* caption overlay — animates word-by-word */}
              <div className="hm-caption">
                <span className="hm-cap-w hm-cap-1">Asleep</span>{" "}
                <span className="hm-cap-w hm-cap-2">in</span>{" "}
                <span className="hm-cap-w hm-cap-3">12</span>{" "}
                <span className="hm-cap-w hm-cap-4">minutes.</span>
              </div>
              {/* progress + playhead */}
              <div className="hm-vid-controls">
                <div className="hm-vid-progress">
                  <div className="hm-vid-progress-fill" />
                </div>
                <div className="hm-vid-time mono">0:08 / 0:14</div>
              </div>
            </div>
          </div>

          {/* timeline */}
          <div className="hm-timeline">
            <div className="hm-timeline-track">
              <div className="hm-clip hm-clip-1" style={{ width: "18%", left: "0%" }} />
              <div className="hm-clip hm-clip-2" style={{ width: "28%", left: "19%" }} />
              <div className="hm-clip hm-clip-3" style={{ width: "32%", left: "48%" }} />
              <div className="hm-clip hm-clip-4" style={{ width: "18%", left: "81%" }} />
              <div className="hm-playhead" />
            </div>
            <div className="hm-timeline-ruler mono">
              <span>0:00</span>
              <span>0:04</span>
              <span>0:08</span>
              <span>0:12</span>
              <span>0:16</span>
            </div>
          </div>
        </div>

        {/* right rail — variants */}
        <div className="hm-variants">
          <div className="hm-rail-head">
            <span className="hm-rail-title">Variants</span>
            <span className="hm-rail-count mono">
              <span className="hm-var-count">9</span>/9
            </span>
          </div>
          <div className="hm-var-grid">
            {variants.map((v) =>
            <div key={v} className={`hm-var hm-var-${v + 1}`}>
                <div className="hm-var-thumb" />
              </div>
            )}
          </div>
          <div className="hm-rail-foot hm-status">
            <span className="hm-status-dot" />
            <span className="mono" style={{ fontSize: 10, letterSpacing: "0.06em" }}>
              EXPORTING TO META · 4 LIVE
            </span>
          </div>
        </div>
      </div>
    </div>);

}

// ─────────────────────────────────────────────────────────
// Hero — eyebrow, headline, sub, CTAs, mock
// ─────────────────────────────────────────────────────────
function Hero({ copy }) {
  const c = copy;
  return (
    <section className="hero" id="top">
      <div className="hero-glow" aria-hidden="true" />
      <div className="container-wide">
        <div className="hero-grid">
          <div className="hero-text">
            <div className="eyebrow hero-eyebrow">
              <span className="hero-eye-dot" />
              {c.eyebrow}
            </div>
            <h1 className="hero-headline">
              {c.headlineLead}{" "}
              <span className="serif-italic hero-em">{c.headlineEm}</span>{" "}
              {c.headlineTail}
            </h1>
            <p className="hero-sub">{c.sub}</p>
            <div className="hero-ctas">
              <button className="btn btn-primary">
                <PlayIcon /> Watch the demo
              </button>
              <a className="btn btn-ghost" href="book-a-call.html">
                Talk to founder <ArrowIcon />
              </a>
            </div>
            <div className="hero-meta">
              <span className="mono hero-meta-item">
                <span className="hm-pulse" /> Live with 20+ marketing teams
              </span>
            </div>
          </div>

          <div className="hero-mock-wrap">
            <HeroMock />
          </div>
        </div>
      </div>
    </section>);

}

function PlayIcon() {
  return (
    <svg viewBox="0 0 14 14" fill="none">
      <path d="M3.5 2.5L11 7L3.5 11.5V2.5Z" fill="currentColor" />
    </svg>);

}
function ArrowIcon() {
  return (
    <svg viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
      <path d="M2.5 7H11.5M8 3.5L11.5 7L8 10.5" />
    </svg>);

}

Object.assign(window, { Hero, HeroMock });