// Hero.jsx — Editorial homepage hero. Giant italicized headline, rivets in corners,
// vertical client marquee on the right, squiggle arrow signature.
const Hero = ({ variant = "editorial" }) => {
  if (variant === "poster") return <HeroPoster />;
  if (variant === "splitreel") return <HeroSplitReel />;
  return <HeroEditorial />;
};

const CLIENTS = [
  "Twilio", "Cloudflare", "Circle", "Pluralsight", "Carnegie Learning",
  "freeCodeCamp", "ElevenLabs",
];

const HeroEditorial = () => (
  <section className="pc-hero pc-hero--editorial">
    <div className="pc-hero-inner">
      <div className="pc-hero-copy">
        <div className="pc-hero-meta">
          <span className="pc-dot" />
          <span>A production &amp; animation studio —</span>
          <span className="pc-hero-meta-strong">for DevRel teams.</span>
        </div>

        <h1 className="pc-hero-head">
          <span>Technical</span>
          <span className="pc-hero-italic"><em>stories</em></span>
          <span>visually</span>
          <span className="pc-hero-italic"><em>told</em>.</span>
        </h1>

        <div className="pc-hero-sub">
          <Squiggle className="pc-hero-squiggle"/>
          <p>
            A production &amp; animation studio working with platform and
            developer-relations teams — before the script, before the concept —
            to build video systems that make complex products legible.
          </p>
        </div>

        <div className="pc-hero-actions">
          <Button size="lg">See our work</Button>
          <a className="pc-hero-link" href="#process">How we work &nbsp;↓</a>
        </div>
      </div>

    </div>

    <div className="pc-hero-bottom">
      <span>Est. 2019</span>
      <span>Scroll ↓</span>
    </div>
  </section>
);

const HeroPoster = () => (
  <section className="pc-hero pc-hero--poster">
    <div className="pc-poster-grid">
      <div className="pc-poster-cell pc-poster-cell--pink">
        <div className="pc-rivet-sm">A</div>
        <div className="pc-poster-word">Technical</div>
      </div>
      <div className="pc-poster-cell pc-poster-cell--ink">
        <div className="pc-rivet-sm pc-inverse">B</div>
        <div className="pc-poster-word pc-poster-word--italic pc-inverse">stories</div>
      </div>
      <div className="pc-poster-cell pc-poster-cell--yellow">
        <div className="pc-rivet-sm">C</div>
        <div className="pc-poster-word">visually</div>
      </div>
      <div className="pc-poster-cell pc-poster-cell--blue">
        <div className="pc-rivet-sm">D</div>
        <div className="pc-poster-word pc-poster-word--italic">told.</div>
      </div>
    </div>
    <div className="pc-hero-bottom">
      <span>Production &amp; animation for technology teams</span>
      <Button>See our work</Button>
    </div>
  </section>
);

const HeroSplitReel = () => (
  <section className="pc-hero pc-hero--splitreel">
    <div className="pc-hero-inner pc-hero-inner--split">
      <div className="pc-hero-copy">
        <div className="pc-hero-meta">
          <span className="pc-dot" />
          <span>Now Reeling — 2026</span>
        </div>
        <h1 className="pc-hero-head pc-hero-head--tight">
          Technical <em>stories</em>,<br/>
          <em>visually</em> told.
        </h1>
        <p className="pc-hero-lede">
          A production &amp; animation studio for technology teams.
          We help DevRel programs at Twilio, Circle, and Cloudflare say what
          they actually mean — and say it at scale.
        </p>
        <div className="pc-hero-actions">
          <Button size="lg" href="https://calendly.com/poleycreative/meeting-with-poley-creative" target="_blank" rel="noopener noreferrer">Schedule a meeting</Button>
          <a className="pc-hero-link">Watch the reel · 1:24 &nbsp;▶</a>
        </div>
      </div>
      <div className="pc-hero-reel">
        <div className="pc-reel-rivet">
          <span>REEL — 001</span><span>·</span><span>01:24</span>
        </div>
        <div className="pc-reel-frame">
          <img src="assets/hero-reel-street-interview.jpg" alt=""/>
          <button className="pc-reel-play" aria-label="Play reel">▶</button>
        </div>
        <div className="pc-reel-strip">
          <span>Twilio Liftoff</span>
          <span>·</span>
          <span>Cloudflare × LEGO</span>
          <span>·</span>
          <span>Circle CCTP</span>
          <span>·</span>
          <span>MATHstream</span>
        </div>
      </div>
    </div>
  </section>
);

window.Hero = Hero;