// "How Deevy works" 3-step + "What is Diminished Value" explainer

// Crash animation: two cars collide, smoke puffs rise from hoods
const CrashAnimation = () => {
  return (
    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
      <style>{`
        @keyframes gas-stream {
          0%   { opacity: 0; transform: translateY(0) scaleY(0.6); }
          15%  { opacity: 0.85; }
          80%  { opacity: 0.5; }
          100% { opacity: 0; transform: translateY(-58px) scaleY(1.4); }
        }
        .gas-stream {
          animation: gas-stream 2.6s ease-out infinite;
          transform-origin: bottom center;
        }
      `}</style>
      <div style={{ position: 'absolute', inset: 0 }}>
        {/* Single thin stream of gas rising from impact point */}
        <div className="gas-stream" style={{
          position: 'absolute',
          left: '50%',
          top: 30,
          transform: 'translateX(-50%)',
          width: 4,
          height: 48,
          background: 'linear-gradient(to top, rgba(240,244,250,0.9) 0%, rgba(240,244,250,0.55) 40%, rgba(240,244,250,0) 100%)',
          borderRadius: '50% 50% 40% 40% / 80% 80% 20% 20%',
          filter: 'blur(1.2px)',
        }} />

        {/* Cars - bumpers touching at center */}
        <div style={{ position: 'absolute', bottom: 14, left: 0, right: 0, display: 'flex', justifyContent: 'center', alignItems: 'flex-end', gap: 0 }}>
          <div style={{ transform: 'translateX(2px)' }}>
            <CarSvg color="#85B7EB" damaged />
          </div>
          <div style={{ transform: 'translateX(-2px) scaleX(-1)' }}>
            <CarSvg color="#378ADD" damaged />
          </div>
        </div>

        {/* Road line */}
        <div style={{
          position: 'absolute', bottom: 6, left: 16, right: 16, height: 1,
          background: 'repeating-linear-gradient(90deg, rgba(133,183,235,0.4) 0 6px, transparent 6px 14px)',
        }} />
      </div>
    </div>
  );
};

const CarSvg = ({ color, damaged }) => (
  <svg width="92" height="40" viewBox="0 0 92 40" fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* Body - front (right side) is crumpled */}
    <path d={damaged
      ? "M6 28 L14 16 L34 12 L62 12 L74 20 L80 26 L82 30 L78 32 L72 30 L20 30 L14 32 L6 30 Z"
      : "M6 28 L14 16 L34 12 L62 12 L78 18 L86 22 L86 30 L78 32 L72 30 L20 30 L14 32 L6 30 Z"
    } fill={color} opacity="0.85" />
    {/* Roof */}
    <path d="M22 16 L36 8 L58 8 L70 16 Z" fill={color} opacity="0.55" />
    {/* Windows */}
    <path d="M26 16 L36 10 L48 10 L48 16 Z" fill="#0D1420" opacity="0.5" />
    <path d={damaged ? "M50 10 L56 10 L62 14 L50 16 Z" : "M50 10 L58 10 L66 16 L50 16 Z"} fill="#0D1420" opacity="0.5" />
    {/* Wheels */}
    <circle cx="22" cy="32" r="6" fill="#0D1420" />
    <circle cx="22" cy="32" r="3" fill={color} opacity="0.7" />
    <circle cx="72" cy="32" r="6" fill="#0D1420" />
    <circle cx="72" cy="32" r="3" fill={color} opacity="0.7" />
    {/* Crumple lines on hood */}
    {damaged && (
      <g stroke="#0D1420" strokeWidth="0.6" opacity="0.45" fill="none">
        <path d="M66 18 L70 22" />
        <path d="M70 14 L74 19" />
        <path d="M74 22 L78 26" />
      </g>
    )}
    {/* Broken headlight */}
    <rect x={damaged ? 78 : 82} y="22" width="3" height="4" fill={damaged ? '#3A4A5E' : '#FFD66B'} opacity="0.8" />
  </svg>
);


const HowItWorks = () => {
  const [stepsRef, stepsVisible] = useReveal({ threshold: 0.25 });
  const steps = [
    {
      n: '01',
      title: 'Tell us about the accident',
      body: 'Five minutes. VIN, repair invoice, photos. Anything you have. We pull the rest.',
      detail: 'Avg. completion: 5m',
    },
    {
      n: '02',
      title: 'Our appraisers build the report',
      body: 'Licensed appraisers benchmark your vehicle against pre-loss comps using MarketCheck, KBB, AutoCheck, and other data points.',
      detail: 'Turnaround: 3 business days',
    },
    {
      n: '03',
      title: 'Submit. Recover. Done.',
      body: 'You get a defensible PDF report including a cover letter, methodology, AutoCheck report, location specific sales comparables, and a demand calculation. Send it to the at-fault driver\'s insurance for recovery.',
      detail: 'Format: 18-page PDF signed by a licensed appraiser',
    },
  ];

  return (
    <SectionShell id="how-it-works" screenLabel="03 How It Works" padY={96}>
      <div style={{ marginBottom: 80, maxWidth: 720 }}>
        <Eyebrow>The process</Eyebrow>
        <SerifH size={56} style={{ marginTop: 20 }}>
          How Deevy works.
        </SerifH>
      </div>

      <div ref={stepsRef} style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, position: 'relative' }}>
        {/* Horizontal connector line through the centers of boxes 01, 02, 03.
            Box centers are at 28px from each cell's left edge. Cells are 33.33% each.
            Line spans from box-01 center to box-03 center. */}
        {/* L-shaped connector: horizontal across box centers, then turns down through box 03
            to land at the text title underneath box 03. */}
        <style>{`
          @keyframes process-h-fill {
            from { transform: scaleX(0); }
            to   { transform: scaleX(1); }
          }
          @keyframes car-travel {
            0%   { left: 0%; opacity: 0; }
            5%   { opacity: 1; }
            100% { left: 100%; opacity: 1; }
          }
          .process-h-fill {
            transform-origin: left center;
            transform: scaleX(0);
          }
          .process-h-fill.is-visible {
            animation: process-h-fill 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s 1 forwards;
          }
          .process-car-h {
            opacity: 0;
            left: 0%;
          }
          .process-car-h.is-visible {
            animation: car-travel 2.6s cubic-bezier(0.65, 0, 0.35, 1) 0.2s 1 forwards;
          }
        `}</style>

        {/* Horizontal segment - from box 01 center to box 03 center */}
        <div style={{
          position: 'absolute',
          top: 14 + 28,
          left: 'calc(0% + 28px)',
          width: '66.6667%',
          height: 0,
          zIndex: 0,
          pointerEvents: 'none',
        }}>
          <div style={{
            position: 'absolute',
            top: -1, left: 0, right: 0, height: 2,
            backgroundImage: 'linear-gradient(to right, #DBE9FF 50%, transparent 50%)',
            backgroundSize: '8px 2px',
            backgroundRepeat: 'repeat-x',
          }} />
          <div className={`process-h-fill ${stepsVisible ? 'is-visible' : ''}`} style={{
            position: 'absolute',
            top: -1, left: 0, right: 0, height: 2,
            background: '#185FA5',
          }} />
        </div>

        {/* Traveling car - straight horizontal across all three box centers */}
        <div style={{
          position: 'absolute',
          top: 14 + 28 - 7,
          left: 'calc(28px - 14px)',
          width: '66.6667%',
          height: 14,
          zIndex: 1,
          pointerEvents: 'none',
        }}>
          <div className={`process-car-h ${stepsVisible ? 'is-visible' : ''}`} style={{
            position: 'absolute',
            top: 0,
            width: 28, height: 14,
          }}>
            <svg width="28" height="14" viewBox="0 0 28 14" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 9 L4 5 L9 3 L19 3 L23 5 L26 7 L26 10 L24 11 L22 10 L7 10 L5 11 L2 10 Z" fill="#185FA5" />
              <path d="M7 5 L10 3 L18 3 L21 5 Z" fill="#0D1420" opacity="0.55" />
              <circle cx="7" cy="11" r="2" fill="#0D1420" />
              <circle cx="7" cy="11" r="0.9" fill="#85B7EB" />
              <circle cx="21" cy="11" r="2" fill="#0D1420" />
              <circle cx="21" cy="11" r="0.9" fill="#85B7EB" />
              <rect x="25" y="7" width="1.2" height="1.6" fill="#FFD66B" />
            </svg>
          </div>
        </div>

        {steps.map((s, i) => (
          <div key={s.n} style={{
            position: 'relative',
            padding: i === 0 ? '0 36px 0 0' : i === 2 ? '0 0 0 36px' : '0 36px',
            borderLeft: i > 0 ? '1px solid #DBE9FF' : 'none',
          }}>
            <div style={{
              width: 56, height: 56,
              background: '#0D1420',
              color: '#F0F4FA',
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              fontFamily: '"IBM Plex Mono", monospace',
              fontSize: 18, fontWeight: 500,
              letterSpacing: '-0.5px',
              position: 'relative', zIndex: 1,
            }}>
              {s.n}
            </div>
            <SerifH size={26} style={{ marginTop: 32, marginBottom: 16 }}>{s.title}</SerifH>
            <Body size={15}>{s.body}</Body>
            <div style={{
              marginTop: 24, paddingTop: 16,
              borderTop: '1px solid #DBE9FF',
            }}>
              <Mono style={{
                fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
                color: '#185FA5',
              }}>
                {s.detail}
              </Mono>
            </div>
          </div>
        ))}
      </div>
    </SectionShell>
  );
};

const FormulaBreakdown = () => {
  const [barRef, barVisible] = useReveal({ threshold: 0.3 });
  const cls = (extra = '') => `bar-fill ${extra} ${barVisible ? 'is-visible' : ''}`;
  return (
    <SectionShell dark id="formula" screenLabel="04 The 17c Problem" padY={96}>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 96, alignItems: 'center' }}>
        <div>
          <Eyebrow color="#378ADD">The hidden loss</Eyebrow>
          <SerifH size={56} color="#F0F4FA" style={{ marginTop: 20 }}>
            <span style={{ color: '#85B7EB' }}>What is</span> <em style={{ fontStyle: 'italic' }}>diminished value</em><span style={{ color: '#85B7EB' }}>?</span>
          </SerifH>
          <Body color="#85B7EB" size={17} style={{ marginTop: 28 }}>
            Diminished value is the measurable reduction in a vehicle's market value that remains after a collision repair, compared to an identical vehicle that was never damaged. It is recognized as a loss separate from, and in addition to, the cost of repairs. <span style={{ color: '#F0F4FA' }}>Repairing a vehicle restores its function, but not the market value the accident permanently removed.</span> This report measures inherent diminished value, the loss that remains after a proper repair.
          </Body>
          <Body color="#85B7EB" size={17} style={{ marginTop: 18 }}>
            <span style={{ color: '#F0F4FA' }}>Deevy replaces opinion-based multiplier formulas with real market data.</span> Our valuation engine pinpoints the subject vehicle's exact year, make, model, trim, and color, then measures it against hundreds of millions of real market listings. We anchor each case to the vehicle's pre-loss market value and scale that value by the documented damage, using loss ranges drawn from peer-reviewed depreciation research. An ASCAA-certified appraiser develops and signs off on each report, ensuring the accuracy of the diminished value figure.
          </Body>

        </div>

          {/* Visual: value comparison */}
        <div ref={barRef} style={{
          background: 'rgba(255,255,255,0.03)',
          border: '1px solid rgba(133,183,235,0.18)',
          padding: 40,
        }}>
          <div style={{
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
            paddingBottom: 20, borderBottom: '1px solid rgba(133,183,235,0.18)',
          }}>
            <Mono style={{
              fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
              color: '#85B7EB',
            }}>Case Study · 2022 Toyota Camry SE</Mono>
            <Mono style={{ fontSize: 11, color: '#85B7EB' }}>VIN ···7438</Mono>
          </div>

          {/* Pre-loss value */}
          <div style={{ marginTop: 32 }}>
            <div style={{
              display: 'flex', justifyContent: 'space-between',
              fontFamily: '"IBM Plex Mono", monospace', fontSize: 11,
              letterSpacing: '0.14em', textTransform: 'uppercase',
              color: '#85B7EB', marginBottom: 10,
            }}>
              <span>Pre-loss market value</span>
              <span style={{ color: '#F0F4FA' }}>$28,400</span>
            </div>
            <div style={{ height: 18, background: 'rgba(133,183,235,0.18)' }}>
              <div className={cls()} style={{ width: '100%', height: '100%', background: '#85B7EB', transitionDelay: '100ms' }} />
            </div>
            <div style={{
              fontFamily: '"IBM Plex Mono", monospace', fontSize: 10,
              letterSpacing: '0.14em', color: '#85B7EB', marginTop: 8,
            }}>Clean-title comparable · before the wreck</div>
          </div>

          {/* Deevy report */}
          <div style={{ marginTop: 32 }}>
            <div style={{
              display: 'flex', justifyContent: 'space-between',
              fontFamily: '"IBM Plex Mono", monospace', fontSize: 11,
              letterSpacing: '0.14em', textTransform: 'uppercase',
              color: '#378ADD', marginBottom: 10,
            }}>
              <span>Post-accident after repairs · market-based</span>
              <span style={{ color: '#F0F4FA' }}>$23,240</span>
            </div>
            <div style={{ height: 18, background: 'rgba(133,183,235,0.18)', position: 'relative' }}>
              <div className={cls()} style={{
                width: '82%', height: '100%',
                background: 'linear-gradient(90deg, #185FA5 0%, #378ADD 100%)',
                transitionDelay: '900ms',
              }} />
            </div>
            <div style={{
              fontFamily: '"IBM Plex Mono", monospace', fontSize: 10,
              letterSpacing: '0.14em', color: '#85B7EB', marginTop: 8,
            }}>Wrecked-history comparable · after repairs
            </div>
          </div>

          {/* Delta */}
          <div style={{
            marginTop: 36, paddingTop: 24,
            borderTop: '1px solid rgba(133,183,235,0.18)',
            display: 'flex', justifyContent: 'space-between', alignItems: 'baseline',
          }}>
            <div>
              <Mono style={{
                fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
                color: '#85B7EB',
              }}>Diminished value</Mono>
            </div>
            <div style={{ display: 'flex', alignItems: 'baseline', gap: 12 }}>
              <Mono style={{ fontSize: 36, color: '#F0F4FA', fontWeight: 500, letterSpacing: '-1px' }}>
                $5,160
              </Mono>
              <Mono style={{ fontSize: 13, color: '#378ADD' }}>18.2%</Mono>
            </div>
          </div>
        </div>
      </div>
    </SectionShell>
  );
};

Object.assign(window, { HowItWorks, FormulaBreakdown });