// 49-states map (Nebraska greyed) + Sample report preview

// State paths (simplified rect grid - editorial, not literal)
// Using a clean grid layout similar to periodic-table-of-states
const STATE_GRID = [
  // [code, row, col, name]
  ['AK', 0, 0], ['ME', 0, 10],
  ['VT', 1, 9], ['NH', 1, 10],
  ['WA', 2, 1], ['ID', 2, 2], ['MT', 2, 3], ['ND', 2, 4], ['MN', 2, 5], ['IL', 2, 6], ['WI', 2, 7], ['MI', 2, 8], ['NY', 2, 9], ['MA', 2, 10],
  ['OR', 3, 1], ['UT', 3, 2], ['WY', 3, 3], ['SD', 3, 4], ['IA', 3, 5], ['IN', 3, 6], ['OH', 3, 7], ['PA', 3, 8], ['NJ', 3, 9], ['CT', 3, 10], ['RI', 3, 11],
  ['CA', 4, 1], ['NV', 4, 2], ['CO', 4, 3], ['NE', 4, 4], ['MO', 4, 5], ['KY', 4, 6], ['WV', 4, 7], ['VA', 4, 8], ['MD', 4, 9], ['DE', 4, 10],
  ['AZ', 5, 2], ['NM', 5, 3], ['KS', 5, 4], ['AR', 5, 5], ['TN', 5, 6], ['NC', 5, 7], ['SC', 5, 8], ['DC', 5, 9],
  ['HI', 6, 0], ['TX', 6, 4], ['OK', 6, 5], ['LA', 6, 6], ['MS', 6, 7], ['AL', 6, 8], ['GA', 6, 9],
  ['FL', 7, 9],
];

const StateMap = () => {
  const cell = 56;
  const gap = 4;
  const cols = 12;
  const rows = 8;
  const w = cols * (cell + gap);
  const h = rows * (cell + gap);
  const [mapRef, mapVisible] = useReveal({ threshold: 0.3 });

  return (
    <SectionShell id="map" screenLabel="05 Coverage" padY={96}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 80, alignItems: 'center' }}>
        <div>
          <Eyebrow>Coverage</Eyebrow>
          <SerifH size={56} style={{ marginTop: 20 }}>
            Available in <em style={{ fontStyle: 'italic', color: '#185FA5' }}>44 states</em>.
          </SerifH>
          <Body size={17} style={{ marginTop: 28 }}>
            We file third-party diminished value claims in 44 states plus DC, wherever the law clearly recognizes recovery and our credentials qualify us to file. The remaining states either cap DV recovery or require an in-state appraiser license we don't currently hold (Connecticut, Massachusetts, Nevada, Oregon, Rhode Island).
          </Body>

          <div style={{
            marginTop: 40, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
          }}>
            <div style={{ borderLeft: '2px solid #185FA5', paddingLeft: 16 }}>
              <Mono style={{
                fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
                color: '#185FA5',
              }}>Third-party</Mono>
              <Body size={14} style={{ marginTop: 8 }}>
                Other driver at fault - we file in 44 states + DC.
              </Body>
            </div>
            <div style={{ borderLeft: '2px solid #DBE9FF', paddingLeft: 16 }}>
              <Mono style={{
                fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
                color: '#3A4A5E',
              }}>First-party</Mono>
              <Body size={14} style={{ marginTop: 8 }}>
                Your own policy - only Georgia routinely allows it.
              </Body>
            </div>
          </div>
        </div>

        {/* Grid map */}
        <div style={{
          background: '#fff',
          border: '1px solid #DBE9FF',
          padding: 40,
          position: 'relative',
        }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            paddingBottom: 20, borderBottom: '1px solid #DBE9FF', marginBottom: 24,
          }}>
            <Mono style={{
              fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
              color: '#185FA5',
            }}>Jurisdictional coverage</Mono>
            <Mono style={{ fontSize: 11, color: '#3A4A5E' }}>44 / 50 + DC</Mono>
          </div>

          <svg ref={mapRef} viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: 'auto', display: 'block' }}>
            {STATE_GRID.map(([code, r, c]) => {
              const x = c * (cell + gap);
              const y = r * (cell + gap);
              const rule = window.STATE_RULES && window.STATE_RULES[code];
              const excluded = !rule || !rule.third_party_dv || rule.licensed_appraiser_required;
              // Ripple delay from center of US (col 5, row 4)
              const dx = c - 5, dy = r - 4;
              const dist = Math.sqrt(dx * dx + dy * dy);
              const delay = dist * 60 + 200;
              return (
                <g key={code} style={{
                  opacity: 1,
                  transform: mapVisible ? 'scale(1)' : 'scale(0.92)',
                  transformBox: 'fill-box',
                  transformOrigin: 'center',
                  transition: `transform 600ms cubic-bezier(0.34, 1.56, 0.64, 1) ${delay}ms`,
                }}>
                  <rect
                    x={x} y={y} width={cell} height={cell}
                    fill={excluded ? '#F0F4FA' : '#DBE9FF'}
                    stroke={excluded ? '#DBE9FF' : '#185FA5'}
                    strokeWidth={excluded ? 1 : 0.5}
                    strokeDasharray={excluded ? '3 2' : '0'}
                  />
                  <text
                    x={x + cell / 2} y={y + cell / 2 + 4}
                    textAnchor="middle"
                    fontFamily='"IBM Plex Mono", monospace'
                    fontSize={13}
                    fontWeight={500}
                    fill={excluded ? '#85B7EB' : '#0D1420'}
                  >{code}</text>
                </g>
              );
            })}
          </svg>

          <div style={{
            marginTop: 24, paddingTop: 20, borderTop: '1px solid #DBE9FF',
            display: 'flex', gap: 24, flexWrap: 'wrap',
          }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{ width: 14, height: 14, background: '#DBE9FF', border: '0.5px solid #185FA5' }} />
              <Mono style={{
                fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#3A4A5E',
              }}>Covered</Mono>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <div style={{
                width: 14, height: 14, background: '#F0F4FA',
                border: '1px dashed #DBE9FF',
              }} />
              <Mono style={{
                fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#3A4A5E',
              }}>Not currently serviced</Mono>
            </div>
          </div>
        </div>
      </div>
    </SectionShell>
  );
};

const SampleReport = () => (
  <SectionShell id="sample-report" screenLabel="06 Sample Report" padY={96}>
    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.1fr', gap: 96, alignItems: 'center' }}>
      <div>
        <Eyebrow>The deliverable</Eyebrow>
        <SerifH size={56} style={{ marginTop: 20 }}>
          A report insurers actually open.
        </SerifH>
        <Body size={17} style={{ marginTop: 28 }}>
          Eighteen pages. Cover letter, methodology, comparable-sales data, photo documentation, and a single-page demand calculation. Signed by a licensed appraiser in your jurisdiction.
        </Body>

        <div style={{ marginTop: 40 }}>
          {[
            ['Cover letter', 'Plain-English summary, addressed to the claims adjuster.'],
            ['Methodology', 'How the comp set was selected. Defensible in arbitration.'],
            ['Comparable sales', '8–12 vehicles, real listings, sourced and dated.'],
            ['Photo documentation', 'Damage extent, repair quality, structural notes.'],
            ['Demand calculation', 'One number. One page. Itemized.'],
          ].map(([k, v], i) => (
            <div key={k} style={{
              display: 'grid', gridTemplateColumns: '40px 1fr',
              gap: 16, padding: '16px 0',
              borderTop: i === 0 ? '1px solid #DBE9FF' : 'none',
              borderBottom: '1px solid #DBE9FF',
            }}>
              <Mono style={{ fontSize: 11, color: '#185FA5', letterSpacing: '0.14em' }}>
                0{i + 1}
              </Mono>
              <div>
                <div style={{
                  fontFamily: '"Inter", sans-serif', fontWeight: 500,
                  fontSize: 15, color: '#0D1420', marginBottom: 4,
                }}>{k}</div>
                <Body size={13}>{v}</Body>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Mock report */}
      <div style={{ position: 'relative', perspective: '1500px' }}>
        <div style={{
          background: '#fff',
          boxShadow: '0 50px 100px -40px rgba(13,20,32,0.4), 0 20px 40px -20px rgba(13,20,32,0.2)',
          padding: '48px 44px',
          fontFamily: '"Inter", sans-serif',
          transform: 'rotateY(-3deg) rotateX(2deg)',
          transformOrigin: 'center',
          aspectRatio: '8.5 / 11',
        }}>
          {/* Header */}
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            paddingBottom: 16, borderBottom: '2px solid #0D1420',
          }}>
            <div style={{
              display: 'flex', alignItems: 'baseline',
              fontFamily: '"Source Serif 4", serif',
              fontWeight: 500, fontSize: 22, letterSpacing: '-0.4px', color: '#0D1420',
            }}>
              Deevy
              <svg viewBox="0 0 22 11" aria-hidden="true" style={{ width: '0.73em', height: '0.36em', marginLeft: '0.32em', marginBottom: '0.18em', fill: '#378ADD', flexShrink: 0 }}>
                <circle cx="5.5" cy="9" r="1.4" />
                <circle cx="16.5" cy="9" r="1.4" />
                <path d="M 1 7.8 C 1 6.8 1.8 6.3 3 6.3 L 4.2 6.3 Q 5 4.2 7 3.7 L 14 3.7 Q 16 4.2 17.3 5.7 L 18.8 6.3 C 20 6.3 21 6.8 21 7.8 L 21 8.5 L 1 8.5 Z" />
              </svg>
            </div>
            <Mono style={{ fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#3A4A5E' }}>
              Report № DV-2026-04183
            </Mono>
          </div>

          <div style={{ marginTop: 20 }}>
            <Mono style={{ fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#185FA5' }}>
              Diminished Value Appraisal
            </Mono>
            <div style={{
              fontFamily: '"Source Serif 4", serif',
              fontWeight: 500, fontSize: 24, letterSpacing: '-0.4px', color: '#0D1420',
              marginTop: 8, lineHeight: 1.15,
            }}>
              2022 Toyota Camry SE<br />
              <span style={{ color: '#3A4A5E', fontSize: 16 }}>Post-Repair Market Loss Analysis</span>
            </div>
          </div>

          {/* Two-col data */}
          <div style={{
            marginTop: 24, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16,
            paddingTop: 16, borderTop: '1px solid #DBE9FF',
          }}>
            {[
              ['VIN', '4T1G11AK···7438'],
              ['Year / Make', '2022 Toyota'],
              ['Mileage', '24,180'],
              ['Loss date', '03 / 14 / 2026'],
              ['Jurisdiction', 'Virginia'],
              ['Claim type', 'Third-party'],
            ].map(([k, v]) => (
              <div key={k}>
                <Mono style={{ fontSize: 8, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#3A4A5E' }}>
                  {k}
                </Mono>
                <Mono style={{ fontSize: 12, color: '#0D1420', display: 'block', marginTop: 2 }}>{v}</Mono>
              </div>
            ))}
          </div>

          {/* Calc box */}
          <div style={{
            marginTop: 24,
            background: '#F0F4FA',
            borderLeft: '2px solid #185FA5',
            padding: '20px 18px',
          }}>
            <Mono style={{ fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#185FA5' }}>
              Calculated diminished value
            </Mono>
            <div style={{
              fontFamily: '"Source Serif 4", serif',
              fontWeight: 500, fontSize: 40, letterSpacing: '-1.2px', color: '#0D1420',
              marginTop: 8,
            }}>
              $5,160<span style={{ fontSize: 18, color: '#3A4A5E' }}>.00</span>
            </div>
            <Mono style={{ fontSize: 9, letterSpacing: '0.14em', color: '#3A4A5E', marginTop: 6, display: 'block' }}>
              18.2% of pre-loss FMV · comparable-sales method
            </Mono>
          </div>

          <div style={{
            marginTop: 24, paddingTop: 16, borderTop: '1px solid #DBE9FF',
            display: 'flex', justifyContent: 'space-between',
          }}>
            <div>
              <Mono style={{ fontSize: 8, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#3A4A5E' }}>
                Appraiser
              </Mono>
              <div style={{
                fontFamily: '"Source Serif 4", serif', fontStyle: 'italic',
                fontSize: 14, color: '#0D1420', marginTop: 4,
              }}>M. Holloway</div>
              <Mono style={{ fontSize: 9, color: '#3A4A5E' }}>VA · License #A-4421</Mono>
            </div>
            <Mono style={{ fontSize: 9, color: '#3A4A5E', alignSelf: 'flex-end' }}>
              Page 1 / 18
            </Mono>
          </div>
        </div>

        {/* Side label */}
        <div style={{
          position: 'absolute', top: -8, right: -24,
          background: '#185FA5', color: '#fff',
          fontFamily: '"IBM Plex Mono", monospace',
          fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
          padding: '8px 14px',
          transform: 'rotate(2deg)',
        }}>
          Sample · redacted
        </div>
      </div>
    </div>
  </SectionShell>
);

Object.assign(window, { StateMap, SampleReport });
