// Section 2: "After an accident, you're legally owed three things"
// Section 3: Social proof strip

const ThreeThings = () => {
  const cards = [
    {
      tag: '01 - Repair',
      title: 'Repair Costs',
      body: 'The body shop bill - the only one most insurers pay willingly.',
    },
    {
      tag: '02 - Personal Injury',
      title: 'Personal Injury',
      body: 'Medical bills, lost wages, and pain and suffering. The at-fault driver\'s insurance pays for these.',
    },
    {
      tag: '03 - Diminished Value',
      title: 'Diminished Value',
      body: 'The post-repair market-value drop - what your car is worth less because it has a wreck on its history. Deevy specializes here.',
      featured: true,
    },
  ];

  return (
    <SectionShell id="three-things" screenLabel="02 Three Things" padY={96}>
      <div style={{ textAlign: 'center', maxWidth: 1100, margin: '0 auto 64px' }}>
        <h2 style={{
          fontFamily: '"Inter", system-ui, sans-serif',
          fontWeight: 600,
          fontSize: 'clamp(26px, 3.4vw, 44px)',
          letterSpacing: '-0.8px',
          lineHeight: 1.15,
          color: '#0D1420',
          margin: '0',
          whiteSpace: 'nowrap',
        }}>
          After an accident, you're legally owed{' '}
          <span style={{
            fontFamily: '"Source Serif 4", Georgia, serif',
            fontStyle: 'italic',
            fontWeight: 500,
            color: '#185FA5',
          }}>three things</span>.
        </h2>
        <Body size={16} style={{ marginTop: 18, maxWidth: 580, marginLeft: 'auto', marginRight: 'auto' }}>
          Most victims settle for the repairs and injury recovery but don't know to demand the Diminished Value.
        </Body>
        <div style={{ width: 48, height: 2, background: '#185FA5', margin: '28px auto 0' }} />
      </div>

      <div style={{
        display: 'grid',
        gridTemplateColumns: 'repeat(3, 1fr)',
        gap: 24,
        alignItems: 'stretch',
      }}>
        {cards.map((c, i) => (
          <div key={i} className={c.featured ? 'dv-glimmer' : ''} style={{
            background: c.featured ? '#DBE9FF' : '#fff',
            borderLeft: c.featured ? '2px solid #185FA5' : '1px solid #DBE9FF',
            padding: c.featured ? '40px 36px 44px' : '36px 32px',
            position: 'relative',
            transform: c.featured ? 'translateY(-12px)' : 'none',
            boxShadow: c.featured ? '0 30px 60px -30px rgba(13,20,32,0.35)' : 'none',
            transition: 'transform 250ms ease',
          }}>
            {c.featured && <DVGlimmerSVG />}
            {c.featured && (
              <div style={{
                position: 'absolute', top: -1, left: -2,
                background: '#185FA5', color: '#fff',
                fontFamily: '"IBM Plex Mono", monospace',
                fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
                padding: '8px 14px',
              }}>
                Deevy specializes here
              </div>
            )}
            <Mono style={{
              fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
              color: c.featured ? '#185FA5' : '#3A4A5E', fontWeight: 500,
              display: 'block', marginTop: c.featured ? 24 : 0,
            }}>
              {c.tag}
            </Mono>
            <SerifH size={28} style={{ marginTop: 18, marginBottom: 14 }}>{c.title}</SerifH>
            <Body size={15} color={c.featured ? '#1a2332' : '#3A4A5E'}>{c.body}</Body>

            {c.featured && (
              <div style={{
                marginTop: 28, paddingTop: 20,
                borderTop: '1px solid rgba(24,95,165,0.2)',
              }}>
                <Body size={13} color="#1a2332">
                  You are legally owed Diminished Value from the at-fault driver's insurance in 49 states if your vehicle was hit in an accident and was not declared a total-loss.
                </Body>
              </div>
            )}
          </div>
        ))}
      </div>
    </SectionShell>
  );
};

const SocialProof = () => {
  const orgs = [
    { name: 'MarketCheck', sub: 'Comparable sales & FMV' },
    { name: 'NADA / J.D. Power', sub: 'Retail valuation' },
    { name: 'Kelley Blue Book', sub: 'Market cross-check' },
    { name: 'AutoCheck', sub: 'Vehicle history' },
    { name: 'Auto auctions', sub: 'Manheim & Adesa records' },
    { name: 'State DMV data', sub: 'Title & accident records' },
  ];

  return (
    <section style={{
      background: '#0D1420',
      backgroundImage: plusPatternBg({ density: 28, opacity: 0.4 }),
      padding: '96px 0',
      fontFamily: '"Inter", system-ui, sans-serif',
      borderTop: '1px solid rgba(219,233,235,0.08)',
      borderBottom: '1px solid rgba(219,233,235,0.08)',
    }}>
      <div style={{ maxWidth: 1240, margin: '0 auto', padding: '0 48px' }}>
        <div style={{
          display: 'flex',
          alignItems: 'center',
          gap: 40,
          flexWrap: 'wrap',
          justifyContent: 'space-between',
        }}>
          <Mono style={{
            fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
            color: '#85B7EB', flex: '0 0 auto',
          }}>
            Methodology aligned with -
          </Mono>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(3, 1fr)',
            columnGap: 40, rowGap: 28, flex: 1,
            maxWidth: 760,
          }}>
            {orgs.map((o) => (
              <div key={o.name} style={{ borderLeft: '1px solid rgba(219,233,255,0.16)', paddingLeft: 20 }}>
                <div style={{
                  fontFamily: '"Source Serif 4", serif',
                  fontWeight: 500, fontSize: 22, color: '#F0F4FA',
                  letterSpacing: '-0.3px',
                }}>{o.name}</div>
                <div style={{
                  fontFamily: '"IBM Plex Mono", monospace',
                  fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
                  color: '#85B7EB', marginTop: 4,
                }}>{o.sub}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { ThreeThings, SocialProof });
