/* Predictive vehicle care — health bar, next service, early watch, history.
   With a data-limitation disclaimer. */
function PredictiveCare() {
  const { Badge } = window.RevvoDesignSystem_a89086;
  const { Reveal, Ic, useCountUp } = window;
  const ref = React.useRef(null);
  const [inView, setInView] = React.useState(false);
  React.useEffect(() => {
    const node = ref.current; if (!node) return;
    let done = false;
    const check = () => { const r = node.getBoundingClientRect(); if (r.top < (window.innerHeight || 800) * 0.8 && r.bottom > 0) { done = true; setInView(true); } };
    check();
    window.addEventListener('scroll', check, { passive: true });
    const poll = setInterval(() => { if (done) { clearInterval(poll); return; } check(); }, 500);
    return () => { window.removeEventListener('scroll', check); clearInterval(poll); };
  }, []);
  const health = useCountUp(86, inView, 1400);

  const watch = [
    { icon: 'BatteryWarning', label: 'Battery health', note: 'Trending down · check in ~2 months', tone: 'warn' },
    { icon: 'Disc3', label: 'Front brake pads', note: '18% remaining · plan ahead', tone: 'warn' },
    { icon: 'Droplets', label: 'Oil life', note: '42% · next change ~1,200 mi', tone: 'ok' },
  ];
  const history = [
    { date: 'May 2026', label: 'Spark plugs replaced', shop: 'Camelback Auto Works' },
    { date: 'Feb 2026', label: 'Cabin air filter', shop: 'DIY · logged' },
    { date: 'Nov 2025', label: 'Brake fluid flush', shop: 'Roosevelt Auto Collective' },
  ];
  const toneCol = { ok: 'var(--positive-bright)', warn: '#f5a623' };

  return (
    <section style={{ position: 'relative', padding: 'var(--space-section) clamp(20px, 5vw, 48px)',
      background: 'var(--surface-section)', borderTop: '1px solid var(--line-100)', borderBottom: '1px solid var(--line-100)' }}>
      <div ref={ref} style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <Reveal style={{ textAlign: 'center', marginBottom: 52 }}>
          <Badge variant="neutral" style={{ marginBottom: 20 }}>Predictive care</Badge>
          <h2 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'var(--fs-display-2)',
            letterSpacing: 'var(--ls-snug)', color: 'var(--text-strong)', margin: '0 0 14px', lineHeight: 'var(--lh-snug)' }}>
            Catch the next problem before it starts.
          </h2>
          <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)', maxWidth: 560, margin: '0 auto' }}>
            ALEROQ watches the patterns in your car&rsquo;s data and gives you a head start &mdash; not a surprise on the shoulder of the road.
          </p>
        </Reveal>

        <div className="care-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          {/* health + next service */}
          <Reveal dir="left" style={{ height: '100%' }}>
            <div style={{ height: '100%', boxSizing: 'border-box', background: 'var(--surface)', border: '1px solid var(--border)',
              borderRadius: 'var(--radius-lg)', padding: 'clamp(26px, 3vw, 34px)' }}>
              <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 18 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Vehicle health</span>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'var(--positive-bright)' }}>
                  <Ic name="HeartPulse" size={14} color="var(--positive-bright)" /> Good
                </span>
              </div>
              <div style={{ display: 'flex', alignItems: 'baseline', gap: 8, marginBottom: 16 }}>
                <span style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 60, color: 'var(--text-strong)', lineHeight: 1 }}>{health}</span>
                <span style={{ fontSize: 20, color: 'var(--text-muted)' }}>/ 100</span>
              </div>
              <div style={{ height: 10, borderRadius: 6, background: 'var(--black-400)', overflow: 'hidden', marginBottom: 26 }}>
                <div style={{ height: '100%', width: `${health}%`, borderRadius: 6,
                  background: 'linear-gradient(90deg, var(--positive), var(--green-300))', transition: 'width 0.2s linear' }} />
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '16px 18px', borderRadius: 'var(--radius-md)',
                background: 'var(--green-tint)', border: '1px solid rgba(22,214,128,0.35)' }}>
                <Ic name="Wrench" size={20} color="var(--positive-bright)" />
                <div>
                  <div style={{ fontSize: 15, fontWeight: 600, color: 'var(--text-strong)' }}>Next service in ~1,200 mi</div>
                  <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>Oil change &middot; estimated mid-July</div>
                </div>
              </div>
            </div>
          </Reveal>

          {/* early watch */}
          <Reveal dir="right" style={{ height: '100%' }}>
            <div style={{ height: '100%', boxSizing: 'border-box', background: 'var(--surface)', border: '1px solid var(--border)',
              borderRadius: 'var(--radius-lg)', padding: 'clamp(26px, 3vw, 34px)' }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)' }}>Early watch</span>
              <div style={{ display: 'grid', gap: 12, marginTop: 18 }}>
                {watch.map((w) => (
                  <div key={w.label} style={{ display: 'flex', alignItems: 'center', gap: 13, padding: '14px 15px',
                    borderRadius: 'var(--radius-md)', background: 'var(--inset)', border: '1px solid var(--line-100)' }}>
                    <Ic name={w.icon} size={19} color={toneCol[w.tone]} />
                    <div style={{ minWidth: 0 }}>
                      <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--text-strong)' }}>{w.label}</div>
                      <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>{w.note}</div>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </Reveal>
        </div>

        {/* history strip */}
        <Reveal delay={120}>
          <div style={{ marginTop: 16, background: 'var(--surface)', border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', padding: 'clamp(22px, 3vw, 30px)' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 9, fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 18 }}>
              <Ic name="History" size={14} color="var(--text-muted)" /> Service history
            </div>
            <div className="hist-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
              {history.map((h) => (
                <div key={h.label} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <span style={{ width: 9, height: 9, borderRadius: '50%', background: 'var(--silver-400)', marginTop: 5, flexShrink: 0 }} />
                  <div>
                    <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--text-faint)', marginBottom: 3 }}>{h.date}</div>
                    <div style={{ fontSize: 14.5, fontWeight: 600, color: 'var(--text-strong)' }}>{h.label}</div>
                    <div style={{ fontSize: 13, color: 'var(--text-muted)' }}>{h.shop}</div>
                  </div>
                </div>
              ))}
            </div>
          </div>
        </Reveal>

        <Reveal delay={160}>
          <p style={{ display: 'flex', alignItems: 'flex-start', gap: 8, justifyContent: 'center', margin: '26px auto 0', maxWidth: 620, fontSize: 13, lineHeight: 1.5, color: 'var(--text-faint)', textAlign: 'left' }}>
            <Ic name="Info" size={14} color="var(--text-faint)" />
            Predictions are estimates based on available vehicle data and typical wear patterns. They don&rsquo;t replace a physical inspection by a qualified mechanic.
          </p>
        </Reveal>
      </div>
    </section>
  );
}
window.PredictiveCare = PredictiveCare;