/* landing2.jsx — proof: featured (Shaw) video, Ground Works case study, more videos, final CTA */

/* a labeled testimonial video (portrait) */
function VideoCard({ id, label, sub, accent, featured }) {
  return (
    <div className="fade-up" style={{ marginTop: featured ? 12 : 22 }}>
      {label && (
        <div style={{ textAlign: 'center', marginBottom: 12 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 800, letterSpacing: '.04em', textTransform: 'uppercase', color: accent, background: 'var(--blue-soft)', padding: '8px 16px', borderRadius: 100 }}>
            <span style={{ color: '#F5B400' }}>★★★★★</span> {label}
          </div>
          {sub && <div style={{ fontSize: 17, color: 'var(--ink-2)', fontWeight: 600, marginTop: 9 }}>{sub}</div>}
        </div>
      )}
      <div style={{
        position: 'relative', width: '100%', maxWidth: featured ? 380 : 340, margin: '0 auto',
        aspectRatio: '9/16', background: '#0C1B30', borderRadius: 16, overflow: 'hidden',
        border: '1px solid var(--line)', boxShadow: '0 20px 50px -26px rgba(20,52,127,.5)',
      }}>
        <iframe
          src={`https://player.vimeo.com/video/${id}?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={label || `Testimonial ${id}`}></iframe>
      </div>
    </div>
  );
}

function SectionTitle({ children, accent }) {
  return (
    <h2 className="display fade-up" style={{ fontSize: 'clamp(28px,4.6vw,42px)', textAlign: 'center', color: 'var(--ink)', marginTop: 8 }}>
      {children}
    </h2>
  );
}

/* ---- Ground Works case study (light) ---- */
function CaseStudy({ accent }) {
  const ref = useReveal();
  const months = [
    { img: 'assets/gbp-feb.png', tag: 'February', n: '24', delta: 'Baseline', up: false },
    { img: 'assets/gbp-mar.png', tag: 'March', n: '77', delta: '+221%', up: true },
    { img: 'assets/gbp-apr.png', tag: 'April', n: '126', delta: '+425%', up: true },
  ];
  return (
    <section ref={ref} style={{ padding: '26px 0 6px' }}>
      <div style={{ textAlign: 'center' }}>
        <div className="fade-up" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 14, fontWeight: 800, letterSpacing: '.04em', textTransform: 'uppercase', color: accent, background: 'var(--blue-soft)', padding: '8px 16px', borderRadius: 100 }}>
          Case study · Ground Works Mobile Mechanics
        </div>
        <SectionTitle accent={accent}>From 24 calls to 126 calls in 90 days</SectionTitle>
        <p className="fade-up" style={{ fontSize: 18, color: 'var(--ink-2)', marginTop: 14, maxWidth: 560, marginInline: 'auto' }}>
          A Virginia mobile mechanic with a perfect 5.0 rating that nobody could find. Real Google Business Profile call data:
        </p>
      </div>

      {/* profile proof */}
      <div className="fade-up" style={{ display: 'flex', justifyContent: 'center', marginTop: 24 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 16, padding: 14, paddingRight: 22, border: '1px solid var(--line)', borderRadius: 14, background: 'var(--bg-2)', flexWrap: 'wrap', justifyContent: 'center', maxWidth: 540 }}>
          <img src="assets/gbp-profile.png" alt="Ground Works Google Business Profile, 5.0 stars" style={{ width: 200, borderRadius: 10, border: '1px solid var(--line)' }} />
          <div style={{ maxWidth: 230 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <span style={{ color: '#F5B400', fontSize: 17, letterSpacing: 1 }}>★★★★★</span>
              <span style={{ fontWeight: 800 }}>5.0</span>
              <span style={{ fontSize: 13, color: 'var(--ink-3)' }}>· 23 reviews</span>
            </div>
            <p style={{ fontSize: 14, color: 'var(--ink-2)', marginTop: 7 }}>
              A verified, fully-managed Google profile — the foundation every result is built on.
            </p>
          </div>
        </div>
      </div>

      {/* month cards */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(180px,1fr))', gap: 14, marginTop: 18 }}>
        {months.map((m, i) => (
          <div key={i} className="fade-up" style={{ border: '1px solid var(--line)', borderRadius: 14, overflow: 'hidden', background: '#fff', boxShadow: '0 10px 28px -20px rgba(20,52,127,.5)', transitionDelay: `${i * 80}ms` }}>
            <div style={{ position: 'relative', background: '#0C1B30' }}>
              <img src={m.img} alt={`${m.tag} — ${m.n} calls`} style={{ width: '100%', display: 'block' }} />
            </div>
            <div style={{ padding: '16px 18px 18px' }}>
              <div style={{ fontSize: 11, fontWeight: 800, letterSpacing: '.06em', textTransform: 'uppercase', color: 'var(--ink-3)' }}>{m.tag} 2026</div>
              <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginTop: 4 }}>
                <span className="display" style={{ fontSize: 42, color: 'var(--ink)' }}>{m.n}</span>
                <span className="display" style={{ fontSize: 18, color: m.up ? 'var(--good)' : 'var(--ink-4)' }}>{m.delta}</span>
              </div>
              <div style={{ fontSize: 12.5, fontWeight: 700, color: 'var(--ink-3)' }}>calls from Google</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

/* ---- the full proof block in the requested order ---- */
function Proof({ accent }) {
  const ref = useReveal();
  return (
    <section ref={ref} style={{ paddingTop: 30 }}>
      {/* 1) Shaw video */}
      <VideoCard id="1194472718" label="Shaw" sub="Hear it straight from the owner" accent={accent} featured />
      {/* 2) Ground Works case study */}
      <CaseStudy accent={accent} />
      {/* 3) the other videos */}
      <div style={{ textAlign: 'center', marginTop: 26 }}>
        <SectionTitle accent={accent}>More shop owners, more results</SectionTitle>
      </div>
      <div style={{ display: 'flex', flexWrap: 'wrap', gap: 24, justifyContent: 'center', marginTop: 6 }}>
        <VideoCard id="1071544418" accent={accent} />
        <VideoCard id="1070893175" accent={accent} />
      </div>
    </section>
  );
}

/* ---- final CTA ---- */
function FinalCTA({ accent, unlocked, onCta }) {
  const ref = useReveal();
  return (
    <section ref={ref} style={{ padding: '34px 0 8px', textAlign: 'center' }}>
      <h2 className="display fade-up" style={{ fontSize: 'clamp(30px,5vw,46px)', color: accent }}>
        Your shop could be next.
      </h2>
      <p className="fade-up" style={{ fontSize: 19, color: 'var(--ink-2)', marginTop: 16, maxWidth: 560, marginInline: 'auto' }}>
        Same system. Your market. We only take a handful of new shops each month — see if you’re a fit in 60 seconds.
      </p>
      <div className="fade-up" style={{ marginTop: 26 }}>
        <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>
    </section>
  );
}

function Footer({ accent }) {
  return (
    <footer style={{ borderTop: '1px solid var(--line)', padding: '20px 0 32px', marginTop: 24 }}>
      <div style={{ textAlign: 'center', fontSize: 12.5, color: 'var(--ink-4)' }}>
        © {new Date().getFullYear()} · Not affiliated with or endorsed by Google.
      </div>
    </footer>
  );
}

Object.assign(window, { VideoCard, CaseStudy, Proof, FinalCTA, Footer });