/* Section 8 — Proof masonry: 6 cards, asymmetric layout */
function Proof() {
  return (
    <section id="proof" className="section--subtle section-pad" data-screen-label="08 Proof">
      <div className="container container--wide">
        <div style={{ maxWidth: 720, marginBottom: 'clamp(48px, 6vw, 72px)' }}>
          <p className="eyebrow">In their words</p>
          <h2 className="h-section" style={{ marginBottom: 20 }}>
            Real home service companies. Real portfolios.
          </h2>
          <p className="lede" style={{ maxWidth: '54ch' }}>
            A few of the home service businesses we represent, in their own words.
          </p>
        </div>

        {/* Masonry: a 12-col grid with cards spanning varying col widths and row heights */}
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(12, 1fr)',
          gridAutoRows: 'minmax(160px, auto)',
          gap: 16,
        }}>
          {/* Card 1 — LARGE (8 cols, 2 rows) */}
          <QuoteCard
            size="hero"
            colSpan="7"
            rowSpan="2"
            quote="We just finished up a million-dollar project. We're starting another one next week. Both of those customers came from PMHOA Pro."
            name="Mike Ashworth"
            role="Owner, Ashco Roofing"
            tag="$1M+ project"
            initials="MA"
            accent
          />
          {/* Card 2 — medium top-right */}
          <QuoteCard
            colSpan="5"
            rowSpan="1"
            quote="We managed to go from 20% commercial to over 80% commercial. Now only 20% of our work is residential."
            name="Paul"
            role="Rochester Roofing, NY"
            tag="20% → 80% commercial"
            initials="P"
          />
          {/* Card 3 — medium right */}
          <QuoteCard
            colSpan="5"
            rowSpan="1"
            quote="I landed a $300k deal using the Lunch & Learn breakdown their presenter made for me."
            name="Logan"
            role="Servpro of Wilmington"
            tag="$300k deal"
            initials="L"
          />
          {/* Card 4 — bottom-left */}
          <QuoteCard
            colSpan="4"
            rowSpan="1"
            quote="Some of the first contacts they put me in front of turned into about $300,000 worth of work in six months."
            name="Bill Jackson"
            role="Bill Jackson Roofing"
            tag="$300k in 6 months"
            initials="BJ"
          />
          {/* Card 5 — bottom-mid */}
          <QuoteCard
            colSpan="4"
            rowSpan="1"
            quote="We've put 100% of the people we've reached out to onto our preferred vendor list."
            name="Tom Miller"
            role="Owner, Servpro of Montrose Telluride, CO"
            tag="100% conversion"
            initials="TM"
          />
          {/* Card 6 — bottom-right */}
          <QuoteCard
            colSpan="4"
            rowSpan="1"
            quote="I thought they were full of it at first. They created a free trial on my terms. After 2 weeks, I was sold."
            name="Robert"
            role="Servpro Campbell"
            tag="Free trial → signed"
            initials="R"
          />
        </div>

        <div style={{
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginTop: 28,
          gap: 24,
          flexWrap: 'wrap',
        }}>
          <p style={{
            margin: 0,
            fontSize: 14,
            color: 'var(--fg-muted)',
            fontStyle: 'italic',
          }}>
            200+ home service companies served since 2020.
          </p>
          <a
            href="#hero-cta"
            className="text-link"
            onClick={(e) => {
              e.preventDefault();
              window.dispatchEvent(new CustomEvent('pmhoa:open-zip-modal', { detail: { source: 'proof_casestudies' } }));
            }}
          >See all case studies</a>
        </div>
      </div>
    </section>
  );
}

function QuoteCard({ quote, name, role, tag, initials, colSpan = '6', rowSpan = '1', size, accent }) {
  const hero = size === 'hero';
  return (
    <article style={{
      gridColumn: `span ${colSpan}`,
      gridRow: `span ${rowSpan}`,
      background: accent ? 'var(--pmhoa-ink)' : 'white',
      color: accent ? 'white' : 'var(--fg)',
      border: accent ? 'none' : '1px solid var(--border)',
      borderRadius: 16,
      padding: hero ? 'clamp(28px, 3.5vw, 48px)' : '28px 28px 24px',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'space-between',
      gap: 24,
      position: 'relative',
      overflow: 'hidden',
      transition: 'transform 200ms ease, box-shadow 200ms ease',
      boxShadow: accent ? '0 12px 40px rgba(17,22,28,0.18)' : 'none',
    }}
    onMouseEnter={(e) => {
      e.currentTarget.style.transform = 'translateY(-2px)';
      e.currentTarget.style.boxShadow = accent
        ? '0 18px 56px rgba(17,22,28,0.28)'
        : '0 8px 24px rgba(17,22,28,0.08)';
    }}
    onMouseLeave={(e) => {
      e.currentTarget.style.transform = 'translateY(0)';
      e.currentTarget.style.boxShadow = accent
        ? '0 12px 40px rgba(17,22,28,0.18)'
        : 'none';
    }}
    >
      {/* Tag */}
      {tag && (
        <span style={{
          display: 'inline-flex',
          alignItems: 'center',
          gap: 6,
          alignSelf: 'flex-start',
          fontSize: 11,
          fontWeight: 800,
          letterSpacing: '0.12em',
          textTransform: 'uppercase',
          color: accent ? 'var(--pmhoa-blue-light)' : 'var(--pmhoa-blue)',
          padding: '6px 10px',
          background: accent ? 'rgba(136,195,235,0.12)' : 'rgba(18,144,207,0.10)',
          borderRadius: 4,
        }}>
          {tag}
        </span>
      )}

      <blockquote style={{
        margin: 0,
        fontSize: hero ? 'clamp(22px, 2.4vw, 32px)' : 16,
        lineHeight: hero ? 1.32 : 1.5,
        fontWeight: hero ? 600 : 500,
        letterSpacing: hero ? '-0.015em' : '-0.005em',
        color: accent ? 'white' : 'var(--fg)',
        textWrap: 'pretty',
        flex: 1,
      }}>
        <span style={{
          color: accent ? 'var(--pmhoa-blue-light)' : 'var(--pmhoa-blue)',
          fontFamily: 'Georgia, serif',
          fontWeight: 700,
          marginRight: 4,
        }}>"</span>
        {quote}
        <span style={{
          color: accent ? 'var(--pmhoa-blue-light)' : 'var(--pmhoa-blue)',
          fontFamily: 'Georgia, serif',
          fontWeight: 700,
        }}>"</span>
      </blockquote>

      <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
        <div style={{
          width: hero ? 44 : 36,
          height: hero ? 44 : 36,
          borderRadius: 999,
          background: accent
            ? 'linear-gradient(135deg, #1290CF, #88C3EB)'
            : 'linear-gradient(135deg, #0c6c9b, #1290CF)',
          color: 'white',
          display: 'grid', placeItems: 'center',
          fontFamily: 'var(--font-condensed)',
          fontWeight: 700,
          fontSize: hero ? 15 : 12,
          letterSpacing: '0.02em',
          flexShrink: 0,
        }}>{initials}</div>
        <div style={{ minWidth: 0 }}>
          <div style={{
            fontSize: hero ? 16 : 14,
            fontWeight: 800,
            letterSpacing: '-0.005em',
            color: accent ? 'white' : 'var(--fg)',
          }}>{name}</div>
          <div style={{
            fontSize: hero ? 13 : 12,
            color: accent ? 'rgba(255,255,255,0.6)' : 'var(--fg-subtle)',
            marginTop: 2,
          }}>{role}</div>
        </div>
      </div>
    </article>
  );
}

window.Proof = Proof;