// Intro — hero. Left: the standard. Right: "Start here" framework video.
function Intro() {
  return (
    <section className="hero-section">
      <div className="hero-container">
        <div className="hero-grid">

          {/* LEFT — The standard */}
          <div className="hero-main">
            <div className="numchip" style={{marginBottom:18}}>
              <span className="dot" style={{background:'var(--ext-grad-primary)'}}>IQ</span>
              <span>An Extendly standard</span>
            </div>
            <h1 className="page-h1">
              The result is live by the launch call, within <span className="text-grad">72&nbsp;hours</span> of onboarding. Or it isn't a wedge.
            </h1>
            <p className="page-lead">
              OfferIQ is the five-pillar contract every partner agency offer must clear before Extendly will fulfill on it. <strong>We do the delivery. You do the selling. We only deliver what passes.</strong>
            </p>
          </div>

          {/* RIGHT — Start here video */}
          <aside className="hero-video-side">
            <div className="hero-video-eye">
              <i className="fas fa-play-circle"></i>
              <span>Start here · 5-minute overview</span>
            </div>
            <HeroVideo url={window.OFFERIQ_CONFIG.overviewVideoUrl} />
          </aside>

        </div>
      </div>
    </section>
  );
}

function HeroVideo({ url }) {
  const id = window.ytId(url);
  if (id) {
    return (
      <div className="video-wrap hero-video">
        <iframe
          src={`https://www.youtube.com/embed/${id}`}
          title="OfferIQ framework overview"
          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
          allowFullScreen
        />
      </div>
    );
  }
  return (
    <div className="video-wrap empty hero-video">
      <div className="video-empty-inner">
        <div className="video-play" style={{background:'var(--ext-grad-primary)',boxShadow:'0 10px 24px -8px rgba(26,101,39,0.5)'}}>
          <i className="fas fa-play"></i>
        </div>
        <div style={{fontFamily:'var(--font-headline)',fontWeight:800,fontSize:15,color:'var(--ext-green-dark)',letterSpacing:'-0.005em',marginBottom:4}}>
          Framework overview · 5 min
        </div>
        <div style={{fontSize:12,color:'var(--fg-3)',lineHeight:1.45,maxWidth:300}}>
          Paste a YouTube URL into <code>overviewVideoUrl</code> in <code>components/pillars-data.js</code>
        </div>
      </div>
    </div>
  );
}

window.Intro = Intro;