// asiz-hero.jsx — 3 hero variants, mobile-first

function HeroA_Silhouette({ setRoute, formStyle }) {
  const mobile = useIsMobile();
  return (
    <section style={{
      position: 'relative',
      minHeight: mobile ? 'auto' : 'calc(100vh - 68px)',
      overflow: 'hidden',
      display: 'flex',
      alignItems: mobile ? 'stretch' : 'center',
      flexDirection: mobile ? 'column' : 'row',
    }}>
      {/* Full-bleed background video (desktop) or block video (mobile) */}
      <div style={{
        position: mobile ? 'relative' : 'absolute',
        inset: mobile ? 'auto' : 0,
        zIndex: 0,
        width: '100%',
        height: mobile ? 'auto' : '100%',
        aspectRatio: mobile ? '4/5' : 'auto',
      }}>
        <HeroVideo
          src="images/hero.mp4"
          poster="images/hero-poster.jpg"
          ratio="auto"
          showMask={false}
          style={{
            position: 'absolute', inset: 0, width: '100%', height: '100%',
            aspectRatio: 'auto', borderRadius: 0,
          }}
        />
        {/* Readability scrim */}
        <div aria-hidden="true" style={{
          position: 'absolute', inset: 0,
          background: mobile
            ? 'linear-gradient(180deg, rgba(30,22,14,0.15) 0%, rgba(30,22,14,0.45) 60%, rgba(30,22,14,0.85) 100%)'
            : 'linear-gradient(90deg, rgba(30,22,14,0.78) 0%, rgba(30,22,14,0.58) 50%, rgba(30,22,14,0.30) 80%, rgba(30,22,14,0.15) 100%)',
        }} />
        {mobile && (
          <div className="asiz-wrap" style={{
            position: 'absolute', left: 0, right: 0, bottom: 0,
            padding: '0 20px 28px',
            color: 'var(--bg)',
            zIndex: 1,
          }}>
            <Reveal>
              <div className="asiz-eyebrow" style={{ marginBottom: 14, color: 'color-mix(in oklab, var(--bg) 80%, transparent)' }}>
                Nationwide · listing agents &amp; sellers
              </div>
            </Reveal>
            <h1 className="asiz-display" style={{
              fontSize: 'clamp(34px, 9vw, 48px)',
              margin: 0, color: 'var(--bg)', lineHeight: 1.05,
              letterSpacing: '-0.02em',
            }}>
              <span style={{ display: 'block' }}>
                <SplitHeadline text="Your seller gets list price." />
              </span>
              <span style={{ display: 'block', fontStyle: 'italic', color: 'var(--accent)' }}>
                <SplitHeadline text="You keep your full commission." delayStart={0.2} />
              </span>
              <span style={{ display: 'block' }}>
                <SplitHeadline text="We close in a week." delayStart={0.45} />
              </span>
            </h1>
          </div>
        )}
      </div>

      {/* Content */}
      {!mobile && (
        <div className="asiz-wrap" style={{ position: 'relative', zIndex: 1, paddingTop: 72, paddingBottom: 72, color: 'var(--bg)' }}>
          <div style={{ maxWidth: '82%' }}>
            <Reveal><div className="asiz-eyebrow" style={{ marginBottom: 22, color: 'color-mix(in oklab, var(--bg) 80%, transparent)' }}>
              Nationwide · listing agents &amp; sellers
            </div></Reveal>
            <h1 className="asiz-display" style={{
              fontSize: 'clamp(40px, 4.6vw, 72px)',
              margin: 0, color: 'var(--bg)', lineHeight: 1.05,
            }}>
              <span style={{ display: 'block' }}>
                <SplitHeadline text="Your seller gets list price." delayStart={0.05} />
              </span>
              <span style={{ display: 'block', fontStyle: 'italic', color: 'var(--accent)' }}>
                <SplitHeadline text="You keep your full commission." delayStart={0.25} />
              </span>
              <span style={{ display: 'block' }}>
                <SplitHeadline text="We close in a week." delayStart={0.5} />
              </span>
            </h1>
            <Reveal delay={0.9}>
              <p className="asiz-body" style={{ marginTop: 24, maxWidth: '52ch', color: 'color-mix(in oklab, var(--bg) 90%, transparent)' }}>
                We take over the existing mortgage. You hold the file, your seller walks away clean, and the commission is paid from our down payment at closing.
              </p>
            </Reveal>
            <Reveal delay={1.0}>
              <p style={{
                marginTop: 14, fontFamily: 'var(--font-mono)', fontSize: 12,
                letterSpacing: '0.1em', textTransform: 'uppercase',
                color: 'color-mix(in oklab, var(--bg) 70%, transparent)',
              }}>
                Last close: 6 days from offer to deed.
              </p>
            </Reveal>
            <Reveal delay={1.15} style={{ marginTop: 28, display: 'flex', gap: 14, flexWrap: 'wrap' }}>
              <button className="asiz-btn asiz-btn--accent" onClick={() => setRoute('agents')}>
                Agents — send a listing
                <span className="asiz-arrow">
                  <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="8" y2="5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 2 L8 5 L5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
                </span>
              </button>
              <button
                className="asiz-btn"
                onClick={() => setRoute('sellers')}
                style={{
                  background: 'transparent',
                  color: 'var(--bg)',
                  border: '1px solid color-mix(in oklab, var(--bg) 55%, transparent)',
                }}
              >
                Sellers — see the offer
                <span className="asiz-arrow">
                  <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="8" y2="5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 2 L8 5 L5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
                </span>
              </button>
            </Reveal>
          </div>
        </div>
      )}

      {/* Mobile: body + CTA sit below the video block */}
      {mobile && (
        <div className="asiz-wrap" style={{ padding: '32px 20px 40px' }}>
          <Reveal delay={0.2}>
            <p className="asiz-body" style={{ margin: 0, fontSize: 16, lineHeight: 1.5 }}>
              We take over the existing mortgage. You hold the file, your seller walks away clean, and the commission is paid from our down payment at closing.
            </p>
          </Reveal>
          <Reveal delay={0.3}>
            <p style={{
              marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 11,
              letterSpacing: '0.1em', textTransform: 'uppercase',
              color: 'var(--ink-soft)',
            }}>
              Last close: 6 days from offer to deed.
            </p>
          </Reveal>
          <Reveal delay={0.4} style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
            <button className="asiz-btn asiz-btn--accent" onClick={() => setRoute('agents')} style={{ width: '100%', justifyContent: 'center' }}>
              Agents — send a listing
              <span className="asiz-arrow">
                <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="8" y2="5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 2 L8 5 L5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
              </span>
            </button>
            <button className="asiz-btn asiz-btn--ghost" onClick={() => setRoute('sellers')} style={{ width: '100%', justifyContent: 'center' }}>
              Sellers — see the offer
              <span className="asiz-arrow">
                <svg width="10" height="10" viewBox="0 0 10 10"><line x1="1" y1="5" x2="8" y2="5" stroke="currentColor" strokeWidth="1.5" /><path d="M5 2 L8 5 L5 8" stroke="currentColor" strokeWidth="1.5" fill="none" /></svg>
              </span>
            </button>
          </Reveal>
        </div>
      )}
    </section>
  );
}

function Hero({ setRoute, formStyle }) {
  return <HeroA_Silhouette setRoute={setRoute} formStyle={formStyle} />;
}

Object.assign(window, { Hero });