/* landing.jsx — Stone-style centered light layout. Exports to window. */
const { useState, useEffect, useRef } = React;

function useReveal() {
  const ref = useRef(null);
  useEffect(() => {
    const el = ref.current; if (!el) return;
    const io = new IntersectionObserver((ents) => {
      ents.forEach(e => { if (e.isIntersecting) { e.target.classList.add('in'); io.unobserve(e.target); } });
    }, { threshold: 0.12 });
    el.querySelectorAll('.fade-up').forEach(n => io.observe(n));
    return () => io.disconnect();
  }, []);
  return ref;
}

/* ---- centered brand wordmark ---- */
function Logo({ brand, accent, size = 22 }) {
  const parts = brand.trim().split(' ');
  const first = parts[0] || 'Brand';
  const rest = parts.slice(1).join(' ');
  return (
    <div style={{ display: 'inline-flex', alignItems: 'center', gap: 9 }}>
      <span style={{
        width: size + 6, height: size + 6, borderRadius: 8, background: accent,
        display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--display)', fontWeight: 800, fontSize: size - 4, color: '#fff',
      }}>{first[0]}</span>
      <span style={{ fontFamily: 'var(--display)', fontWeight: 800, fontSize: size, letterSpacing: '-0.02em', color: 'var(--ink)', whiteSpace: 'nowrap' }}>
        {first}{rest && <span style={{ color: 'var(--ink-3)', fontWeight: 700 }}>{' ' + rest}</span>}
      </span>
    </div>
  );
}

/* ---- header (logo, centered) ---- */
function Header({ brand, accent }) {
  return (
    <div style={{ textAlign: 'center', paddingTop: 30, paddingBottom: 6 }}>
      <Logo brand={brand} accent={accent} />
    </div>
  );
}

/* ---- hero headline ---- */
function Hero({ accent }) {
  return (
    <div style={{ textAlign: 'center', paddingTop: 0 }}>
      <h1 className="display" style={{ fontSize: 'clamp(29px, 4.5vw, 45px)', color: 'var(--ink)', lineHeight: 1.14, textWrap: 'balance', maxWidth: 760, margin: '0 auto' }}>
        We Help Mechanics Get More Jobs From Google For Just $197<span style={{ fontSize: '0.62em', fontWeight: 700, color: 'var(--ink-3)' }}>/mo</span>
      </h1>
    </div>
  );
}

/* ---- the GATED main video ---- */
function GatedVideo({ accent, unlocked, videoId, onUnlockRequest }) {
  const [hover, setHover] = useState(false);
  return (
    <div style={{ marginTop: 0 }}>
      <div
        onClick={() => { if (!unlocked) onUnlockRequest(); }}
        onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
        style={{
          position: 'relative', aspectRatio: '16 / 9',
          height: 'min(48dvh, calc((min(100vw, 820px) - 44px) * 0.5625))',
          width: 'auto', maxWidth: '100%', margin: '0 auto',
          borderRadius: 16, overflow: 'hidden',
          background: 'linear-gradient(135deg,#eef4fd,#dde9fa)',
          border: '1px solid var(--line)', boxShadow: '0 24px 60px -28px rgba(20,52,127,.45)',
          cursor: unlocked ? 'default' : 'pointer',
        }}>
        {unlocked && videoId ? (
          <iframe
            src={`https://player.vimeo.com/video/${videoId}?autoplay=1&title=0&byline=0&portrait=0&dnt=1`}
            style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0 }}
            allow="autoplay; fullscreen; picture-in-picture" allowFullScreen title="Main video"></iframe>
        ) : (
          <React.Fragment>
            {/* blurred preview frame of the actual video */}
            {videoId ? (
              <img src={`https://vumbnail.com/${videoId}_large.jpg`} alt="" aria-hidden="true"
                onError={(e) => { e.target.style.display = 'none'; }}
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', filter: 'blur(3px) brightness(.82)', transform: 'scale(1.06)' }} />
            ) : (
              <div style={{ position: 'absolute', inset: 0, opacity: .5,
                background: 'repeating-linear-gradient(45deg, rgba(20,52,127,.04) 0 2px, transparent 2px 15px)' }} />
            )}
            <div style={{ position: 'absolute', inset: 0, background: videoId ? 'linear-gradient(180deg, rgba(12,27,48,.18), rgba(12,27,48,.34))' : 'transparent' }} />
            <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
              <div style={{
                width: 76, height: 76, borderRadius: 100, background: accent,
                display: 'flex', alignItems: 'center', justifyContent: 'center',
                transform: hover && !unlocked ? 'scale(1.07)' : 'scale(1)', transition: 'transform .18s ease',
                boxShadow: `0 14px 40px -8px ${accent}`,
              }}>
                <svg width="26" height="30" viewBox="0 0 28 32" fill="none"><path d="M26 14.27a2 2 0 0 1 0 3.46L4 30.5A2 2 0 0 1 1 28.77V3.23A2 2 0 0 1 4 1.5l22 12.77Z" fill="#fff"/></svg>
              </div>
            </div>
          </React.Fragment>
        )}
      </div>
    </div>
  );
}

/* ---- Step 1 + CTA + PS ---- */
function StepCTA({ accent, unlocked, onCta }) {
  return (
    <div style={{ textAlign: 'center', marginTop: 0 }}>
      <p style={{ fontSize: 18.5, color: 'var(--ink-2)' }}>
        <span style={{ fontWeight: 800, color: 'var(--ink)', textDecoration: 'underline', textUnderlineOffset: 3 }}>Step 1:</span>{' '}
        {unlocked ? 'Watch the video, then book your free audit call below.' : 'Watch this quick video to see exactly how we get your phone ringing.'}
      </p>
      <div style={{ marginTop: 18 }}>
        <button className="btn btn-primary btn-lg pulse" onClick={onCta} style={{ minWidth: 280 }}>
          {unlocked ? 'Book My Free Audit Call →' : 'Click to See How It Works'}
        </button>
      </div>
      <p style={{ marginTop: 18, fontSize: 17, fontWeight: 700, color: 'var(--ink-2)' }}>
        PS: Do your research. Read the reviews. See the results 👇
      </p>
    </div>
  );
}

Object.assign(window, { useReveal, Logo, Header, Hero, GatedVideo, StepCTA });