// Recovery ticker banner
// Full-bleed horizontal marquee that sits between <Hero /> and <ThreeThings />.
// Shows real historical DV recoveries from Deevy's case corpus (state, vehicle,
// damage category, settlement amount) scrolling right-to-left at 300s per full
// loop. Hover pauses. Respects prefers-reduced-motion.
//
// DATA source: Deevy_Claude/data/case_database/cases.jsonl (109 total historical
// cases; 79 with complete state+year+make+model+DV data). Sample below picked
// for geographic variety and amount spread; sequence interleaved so state
// pattern varies onscreen.
//
// AMOUNT NOTE: displayed values are actual settled amounts (~80% of the appraisal
// figure). Insurers rarely pay 100% of the assessed DV, and Spencer's historical
// cases have averaged ~80% recovery. Showing settled figures (not appraised
// figures) sets realistic customer expectations.

const RECOVERY_CASES = [
  { state: 'MD', car: '2014 Honda Odyssey',           damage: 'Multi-panel structural', amount: '$7,550'  },
  { state: 'VA', car: '2015 Hyundai Santa Fe',        damage: 'Frame-pull repair',      amount: '$3,500'  },
  { state: 'MD', car: '2015 Honda Accord',            damage: 'Structural repair',      amount: '$2,150'  },
  { state: 'MD', car: '2015 Mercedes-Benz GLK-350',   damage: 'Multi-panel structural', amount: '$5,850'  },
  { state: 'MD', car: '2015 Chevy Corvette Z51',      damage: 'Multi-panel structural', amount: '$8,250'  },
  { state: 'MD', car: '2015 Kia Soul',                damage: 'Structural repair',      amount: '$2,450'  },
  { state: 'MD', car: '2017 Toyota Camry',            damage: 'Structural repair',      amount: '$5,250'  },
  { state: 'DC', car: '2015 Toyota Sienna',           damage: 'Frame-pull repair',      amount: '$2,800'  },
  { state: 'MD', car: '2015 Lexus ES',                damage: 'Multi-panel structural', amount: '$3,925'  },
  { state: 'CA', car: '2012 BMW 750xi',               damage: 'Panel replacement',      amount: '$2,100'  },
  { state: 'MD', car: '2014 Nissan Rogue',            damage: 'Structural repair',      amount: '$2,650'  },
];

const RecoveryTicker = () => {
  // Duplicate the list so the CSS translateX(-50%) loops seamlessly on desktop.
  const track = [...RECOVERY_CASES, ...RECOVERY_CASES];

  // Ref to the scrollable strip so the arrow buttons can call scrollBy on it.
  const scrollRef = React.useRef(null);

  const scrollByCard = (direction) => {
    const el = scrollRef.current;
    if (!el) return;
    // Advance by one full card width. On mobile every card is 100vw so the
    // container's clientWidth is exactly one card. Measuring the actual first
    // card gives an accurate width even if the layout changes.
    const firstItem = el.querySelector('.deevy-ticker-item');
    const cardWidth = firstItem ? firstItem.offsetWidth : el.clientWidth;
    el.scrollBy({ left: direction * cardWidth, behavior: 'smooth' });
  };

  return (
    <div className="deevy-ticker-wrapper" style={{
      position: 'relative',
      background: '#0D1420',
    }}>
      <style>{`
        /* Left-justified section label sits ABOVE the ticker box in the
           dark-navy zone (matches hero above). Container uses same
           max-width + inline padding as SectionShell so the label aligns
           with the hero's "3 days · Turnaround" and all other section
           eyebrows on the page. Compact vertical padding keeps added
           height minimal (~26px total). */
        .deevy-ticker-label-strip {
          max-width: 1240px;
          margin: 0 auto;
          padding: 12px 48px 8px;
        }
        .deevy-ticker-label {
          font-family: "IBM Plex Mono", monospace;
          font-size: 11px;
          font-weight: 500;
          letter-spacing: 0.22em;
          text-transform: uppercase;
          color: #85B7EB;
        }
        @media (max-width: 780px) {
          .deevy-ticker-label-strip { padding: 10px 24px 6px; }
          .deevy-ticker-label { font-size: 10px; }
        }

        @keyframes deevy-ticker-scroll {
          0%   { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }
        .deevy-ticker-outer {
          background: #185FA5;
          background-image: radial-gradient(circle at 14px 14px, rgba(255,255,255,0.05) 1px, transparent 1.5px);
          background-size: 28px 28px;
          border-top: 1px solid rgba(255,255,255,0.08);
          border-bottom: 1px solid rgba(0,0,0,0.2);
          overflow: hidden;
          position: relative;
        }
        .deevy-ticker-track {
          display: flex;
          gap: 0;
          padding: 20px 0;
          width: max-content;
          animation: deevy-ticker-scroll 300s linear infinite;
        }
        .deevy-ticker-track:hover { animation-play-state: paused; }
        @media (prefers-reduced-motion: reduce) {
          .deevy-ticker-track { animation-play-state: paused; }
        }
        .deevy-ticker-fade-left,
        .deevy-ticker-fade-right {
          position: absolute; top: 0; bottom: 0; width: 96px; z-index: 2;
          pointer-events: none;
        }
        .deevy-ticker-fade-left  { left: 0;  background: linear-gradient(90deg,  #185FA5 0%, rgba(24,95,165,0) 100%); }
        .deevy-ticker-fade-right { right: 0; background: linear-gradient(-90deg, #185FA5 0%, rgba(24,95,165,0) 100%); }

        /* Mobile: swap auto-scroll for user-controlled touch swipe.
           Native horizontal scroll + scroll-snap. Also live under this
           breakpoint: the arrow buttons defined below become visible and
           functional as tap-to-advance controls. */
        @media (max-width: 780px) {
          .deevy-ticker-outer {
            overflow-x: auto !important;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
          }
          .deevy-ticker-outer::-webkit-scrollbar { display: none; }
          /* Simple approach: each card is exactly viewport-width (100vw), no
             gap, no track padding. So card N occupies scroll position N*100vw
             to (N+1)*100vw. Every scroll position is aligned to a card
             boundary - no drift, no cumulative math error. Card content lives
             inside 46px inline padding = the arrow-zone width, so arrows
             overlay empty card gutters, never card content. */
          .deevy-ticker-track {
            animation: none !important;
            width: max-content;
            padding: 20px 0 !important;
            gap: 0 !important;
          }
          .deevy-ticker-item {
            scroll-snap-align: center !important;
            scroll-snap-stop: always !important;
            width: 100vw !important;
            min-width: 100vw !important;
            padding: 0 46px !important;
            /* Content group (Vehicle+Damage and Recovered+$Amount) centers
               together in the middle of the card with a reasonable gap
               between them, instead of spreading to the far edges. */
            gap: 36px !important;
            border-right: none !important;
            justify-content: center !important;
            box-sizing: border-box !important;
          }
          .deevy-ticker-fade-left,
          .deevy-ticker-fade-right { display: none; }
        }

        /* Arrow buttons - live in the outer wrapper (NOT inside the scrollable
           container) so they stay pinned as the user swipes. Clickable on
           mobile to advance by one card. Hidden on desktop where auto-scroll
           self-signals. */
        .deevy-arrow-btn {
          display: none;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          z-index: 5;
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background: rgba(0,0,0,0.35);
          border: 1px solid rgba(255,255,255,0.25);
          color: #F0F4FA;
          font-family: -apple-system, BlinkMacSystemFont, sans-serif;
          font-size: 22px;
          font-weight: 300;
          line-height: 1;
          padding: 0 0 2px 0;
          cursor: pointer;
          align-items: center;
          justify-content: center;
          transition: background 150ms ease, transform 100ms ease;
          -webkit-tap-highlight-color: transparent;
        }
        .deevy-arrow-btn:active { transform: translateY(-50%) scale(0.9); background: rgba(0,0,0,0.55); }
        .deevy-arrow-left  { left: 6px; }
        .deevy-arrow-right { right: 6px; }
        @keyframes deevy-arrow-pulse-l {
          0%, 100% { opacity: 0.75; }
          50%      { opacity: 1; box-shadow: 0 0 0 4px rgba(255,255,255,0.10); }
        }
        @keyframes deevy-arrow-pulse-r {
          0%, 100% { opacity: 0.75; }
          50%      { opacity: 1; box-shadow: 0 0 0 4px rgba(255,255,255,0.10); }
        }
        @media (max-width: 780px) {
          .deevy-arrow-btn { display: inline-flex; }
          .deevy-arrow-left  { animation: deevy-arrow-pulse-l 2.2s ease-in-out infinite; }
          .deevy-arrow-right { animation: deevy-arrow-pulse-r 2.2s ease-in-out infinite; }
        }
        @media (prefers-reduced-motion: reduce) {
          .deevy-arrow-left, .deevy-arrow-right { animation: none; opacity: 0.85; }
        }
      `}</style>

      {/* Left-justified section label ABOVE the ticker box, aligned to the
         hero's SectionShell container so it lines up with "3 days ·
         Turnaround" and other section eyebrows. */}
      <div className="deevy-ticker-label-strip">
        <span className="deevy-ticker-label">Recent recoveries across the country</span>
      </div>

      {/* Slider shell (position: relative) so arrow buttons pin to the
         ticker's vertical center, not the wrapper's (which now includes
         the label strip). */}
      <div className="deevy-ticker-slider-shell" style={{ position: 'relative' }}>

      {/* Scrollable strip - on mobile the user swipes this; on desktop it auto-scrolls. */}
      <div ref={scrollRef} className="deevy-ticker-outer">
        <div className="deevy-ticker-fade-left" />
        <div className="deevy-ticker-fade-right" />

        <div className="deevy-ticker-track" role="marquee" aria-label="Historical diminished value recovery examples">
          {track.map((c, i) => (
            <div key={i} className="deevy-ticker-item" style={{
              display: 'flex', alignItems: 'center', gap: 14,
              padding: '0 32px',
              borderRight: '1px solid rgba(255,255,255,0.15)',
              whiteSpace: 'nowrap',
            }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
                <span style={{
                  fontFamily: '"Source Serif 4", Georgia, serif',
                  fontStyle: 'italic',
                  fontSize: 15,
                  color: '#F0F4FA',
                  letterSpacing: '-0.1px',
                  lineHeight: 1.15,
                }}>{c.car}</span>
                <span style={{
                  fontFamily: '"IBM Plex Mono", monospace',
                  fontSize: 10,
                  letterSpacing: '0.14em',
                  textTransform: 'uppercase',
                  color: '#F0F4FA',
                }}>{c.damage}</span>
              </div>

              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 2, marginLeft: 4 }}>
                <span style={{
                  fontFamily: '"IBM Plex Mono", monospace',
                  fontSize: 9,
                  letterSpacing: '0.18em',
                  textTransform: 'uppercase',
                  color: 'rgba(240,244,250,0.55)',
                }}>Recovered</span>
                <span style={{
                  fontFamily: '"Source Serif 4", Georgia, serif',
                  fontSize: 18,
                  color: '#F0F4FA',
                  fontWeight: 500,
                  letterSpacing: '-0.3px',
                  lineHeight: 1,
                }}>{c.amount}</span>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Arrow buttons - siblings of the scroll container so they stay pinned
         regardless of scroll position. Tap-to-advance on mobile. */}
      <button
        type="button"
        className="deevy-arrow-btn deevy-arrow-left"
        aria-label="Show previous recovery example"
        onClick={() => scrollByCard(-1)}
      >‹</button>
      <button
        type="button"
        className="deevy-arrow-btn deevy-arrow-right"
        aria-label="Show next recovery example"
        onClick={() => scrollByCard(1)}
      >›</button>

      </div>
    </div>
  );
};

Object.assign(window, { RecoveryTicker });