// site/Hero.jsx — three hero treatments. Each accepts an optional `data` prop
// from Sanity; falls back to hardcoded values when data is absent.
const VIDEO_SRC = 'https://cdn.coverr.co/videos/coverr-business-meeting-7316/1080p.mp4';
const VIDEO_SRC_FALLBACK = 'https://storage.googleapis.com/coverr-main/mp4/Mt_Baker.mp4';
const VIDEO_POSTER = 'assets/team-photo.jpg';

function VideoOrPoster({ className, poster }) {
  const [failed, setFailed] = React.useState(false);
  if (failed) return <img className={className} src={poster} alt="" />;
  return (
    <video className={className} autoPlay muted loop playsInline poster={poster} onError={() => setFailed(true)}>
      <source src={VIDEO_SRC} type="video/mp4" onError={(e) => { e.target.parentNode.dispatchEvent(new Event('error')); }} />
      <source src={VIDEO_SRC_FALLBACK} type="video/mp4" />
    </video>
  );
}

function HeroSafe({ terse, data }) {
  const eyebrow = (data && data.eyebrow) || 'Events . Incentives . Innovation';
  const heading = (data && data.heading) || 'We build moments that build empires.';
  const body    = (data && data.body)    || 'Strategic meetings, incentives, and brand experiences for teams that treat gatherings as a business instrument — not a line item.';
  const ctas    = (data && data.ctas)    || [{label:'See what we do', href:'#services', variant:'primary'}, {label:'Start a conversation', href:'#contact', variant:'ghost'}];

  return (
    <section className="hero-safe">
      <div className="container">
        <div className="grid">
          <div>
            <span className="eyebrow-row"><span className="bar" />{eyebrow}</span>
            <h1>{heading}<span className="period">.</span></h1>
            {!terse && <p className="lead">{body}</p>}
            <div className="ctas">
              {ctas.map((cta, i) => (
                <a key={i} className={`btn btn-${cta.variant || 'primary'}`} href={cta.href}>
                  {cta.label}{cta.variant !== 'ghost' && <span className="btn-arrow"> ›</span>}
                </a>
              ))}
            </div>
          </div>
          <div className="video-tile"><VideoOrPoster poster={VIDEO_POSTER} /></div>
        </div>
      </div>
    </section>
  );
}

function HeroBold({ terse, data }) {
  const eyebrow = (data && data.eyebrow) || 'ENGAGE . Est. 2018';
  const heading = (data && data.heading) || 'Same room. Bigger outcomes.';
  const body    = (data && data.body)    || 'We design the gatherings leadership teams actually remember — meetings, incentives, and product launches engineered for momentum.';
  const stats   = (data && data.stats)   || [{num:'340', unit:'+', lbl:'Programs delivered'}, {num:'42', unit:'k', lbl:'Attendees moved'}, {num:'6', unit:'yr', lbl:'Average client tenure'}, {num:'18', unit:'ct', lbl:'Countries activated'}];
  const ctas    = (data && data.ctas)    || [{label:'See what we do', href:'#services', variant:'primary'}, {label:'Read the Playbook', href:'#playbook', variant:'ghost'}];

  return (
    <section className="hero-bold">
      <div className="container">
        <span className="eyebrow-row"><span className="bar" />{eyebrow}</span>
        <h1>{heading}<span className="period">.</span></h1>
        {!terse && <p className="sub">{body}</p>}
        <div className="hero-row">
          <div className="ctas">
            {ctas.map((cta, i) => (
              <a key={i} className={`btn btn-${cta.variant || 'primary'}`} href={cta.href} style={cta.variant === 'ghost' ? {color:'var(--engage-offwhite)'} : {}}>
                {cta.label}{cta.variant !== 'ghost' && <span className="btn-arrow"> ›</span>}
              </a>
            ))}
          </div>
          <div className="video-panel"><VideoOrPoster poster={VIDEO_POSTER} /></div>
        </div>
        <div className="stats">
          {stats.map((s, i) => (
            <div className="stat" key={i}>
              <div className="num">{s.num}<span className="unit">{s.unit}</span></div>
              <div className="lbl">{s.lbl}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function MarqueeRow({ words, reverse, invert }) {
  const loop = [...words, ...words];
  return (
    <div className={`marquee-row ${reverse ? 'reverse' : ''} ${invert ? 'invert' : ''}`}>
      <div className="marquee-track">
        {loop.map((w, i) => <span key={i}>{w}<span className="period">.</span></span>)}
      </div>
    </div>
  );
}

function HeroCreative({ terse, data }) {
  const tagline    = (data && data.tagline)    || "Business events shouldn't feel like business. They should feel like the moment your team remembers five years later.";
  const rawRows    = (data && data.marqueeRows) || null;
  const marqueeRows = rawRows
    ? rawRows.map(r => r.words.split(',').map(w => w.trim()))
    : [['MOMENTS','MEANING','MOMENTUM','MOVEMENT'], ['STRATEGY','CREATIVITY','TECHNOLOGY','HOSPITALITY'], ['EMPIRES','RITUALS','REUNIONS','RECKONINGS']];
  const ctas = (data && data.ctas) || [{label:'See what we do', href:'#services', variant:'primary'}, {label:'Start a conversation', href:'#contact', variant:'ghost'}];

  return (
    <section className="hero-creative">
      <div className="marquee-stack">
        {marqueeRows.map((words, i) => (
          <MarqueeRow key={i} words={words} reverse={i % 2 === 1} invert={i % 2 === 1} />
        ))}
      </div>
      <div className="container">
        <div className="below">
          <div>
            <span className="eyebrow-row"><span className="bar" />The ENGAGE way</span>
            <div className="tagline" style={{ marginTop: 20 }}>{tagline}</div>
            <div className="ctas">
              {ctas.map((cta, i) => (
                <a key={i} className={`btn btn-${cta.variant || 'primary'}`} href={cta.href}>
                  {cta.label}{cta.variant !== 'ghost' && <span className="btn-arrow"> ›</span>}
                </a>
              ))}
            </div>
          </div>
          <div className="video-wrap"><VideoOrPoster poster={VIDEO_POSTER} /></div>
        </div>
      </div>
    </section>
  );
}

window.HeroSafe = HeroSafe;
window.HeroBold = HeroBold;
window.HeroCreative = HeroCreative;