/* Product demonstration — the full diagnostic card for one issue (P0301).
   Summary, severity, confidence, driving guidance, likely causes, repair range,
   next action, with a "mechanic confirms" disclaimer. */
function ProductDemo() {
  const { Badge } = window.RevvoDesignSystem_a89086;
  const { Reveal, Ic } = window;

  const causes = [
    { label: 'Worn ignition coil', pct: 68 },
    { label: 'Faulty spark plug', pct: 22 },
    { label: 'Fuel injector', pct: 10 },
  ];

  return (
    <section id="demo" style={{ position: 'relative', padding: 'var(--space-section) clamp(20px, 5vw, 48px)' }}>
      <div style={{ maxWidth: 'var(--container)', margin: '0 auto' }}>
        <Reveal style={{ textAlign: 'center', marginBottom: 52 }}>
          <Badge variant="neutral" style={{ marginBottom: 20 }}>What you actually see</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)',
          }}>
            One issue. Everything you need.
          </h2>
          <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)', maxWidth: 560, margin: '0 auto' }}>
            Here&rsquo;s a real diagnostic card &mdash; the full picture before you talk to a single shop.
          </p>
        </Reveal>

        <Reveal dir="scale">
          <div style={{
            maxWidth: 760, margin: '0 auto', background: 'var(--surface)',
            border: '1px solid var(--border)', borderRadius: 'var(--radius-lg)', overflow: 'hidden',
            boxShadow: '0 40px 90px rgba(0,0,0,0.5)',
          }}>
            {/* header */}
            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 16,
              padding: 'clamp(22px, 3vw, 30px)', borderBottom: '1px solid var(--line-100)', background: 'rgba(255,46,63,0.05)' }}>
              <div style={{ display: 'flex', gap: 15, minWidth: 0 }}>
                <div style={{ width: 48, height: 48, flexShrink: 0, borderRadius: 'var(--radius-md)',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  background: 'var(--red-tint)', border: '1px solid rgba(255,46,63,0.4)', color: 'var(--accent)' }}>
                  <Ic name="TriangleAlert" size={22} />
                </div>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.08em', color: 'var(--text-muted)', marginBottom: 5 }}>P0301 · 2018 Honda Civic</div>
                  <h3 style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 'clamp(20px, 2.6vw, 26px)', color: 'var(--text-strong)', margin: 0, letterSpacing: '-0.01em' }}>Cylinder 1 misfire</h3>
                </div>
              </div>
              <span style={{ flexShrink: 0, display: 'inline-flex', alignItems: 'center', gap: 7, padding: '6px 12px',
                borderRadius: 'var(--radius-pill)', background: 'var(--red-tint)', border: '1px solid rgba(255,46,63,0.4)',
                color: 'var(--red-300)', fontFamily: 'var(--font-mono)', fontSize: 11, fontWeight: 600, letterSpacing: '0.08em', textTransform: 'uppercase', whiteSpace: 'nowrap' }}>
                Medium severity
              </span>
            </div>

            {/* body */}
            <div style={{ padding: 'clamp(22px, 3vw, 30px)' }}>
              <p style={{ fontSize: 16, lineHeight: 1.6, color: 'var(--text-body)', margin: '0 0 24px', textWrap: 'pretty' }}>
                Your engine&rsquo;s first cylinder isn&rsquo;t firing cleanly. The car may feel rough at idle or hesitate
                on acceleration. It&rsquo;s safe to drive short distances, but worth fixing soon to protect the catalytic converter.
              </p>

              {/* meta row */}
              <div className="demo-meta" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 12, marginBottom: 26 }}>
                {[
                  { icon: 'Gauge', k: 'Confidence', v: '92%', c: 'var(--positive-bright)' },
                  { icon: 'CarFront', k: 'Drive', v: 'Short trips OK', c: 'var(--silver-200)' },
                  { icon: 'Clock', k: 'Fix within', v: '~2 weeks', c: 'var(--silver-200)' },
                ].map((m) => (
                  <div key={m.k} style={{ padding: '14px 15px', borderRadius: 'var(--radius-md)', background: 'var(--inset)', border: '1px solid var(--line-100)' }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 7, fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 8 }}>
                      <Ic name={m.icon} size={13} color="var(--text-muted)" /> {m.k}
                    </div>
                    <div style={{ fontFamily: 'var(--font-display)', fontWeight: 600, fontSize: 18, color: m.c }}>{m.v}</div>
                  </div>
                ))}
              </div>

              {/* likely causes */}
              <div style={{ fontFamily: 'var(--font-mono)', fontSize: 12, letterSpacing: '0.1em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 14 }}>Likely causes</div>
              <div style={{ display: 'grid', gap: 10, marginBottom: 26 }}>
                {causes.map((c) => (
                  <div key={c.label} style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
                    <span style={{ flex: '0 0 160px', fontSize: 14, color: 'var(--text-body)' }}>{c.label}</span>
                    <span style={{ flex: 1, height: 7, borderRadius: 4, background: 'var(--black-400)', overflow: 'hidden' }}>
                      <span style={{ display: 'block', height: '100%', width: `${c.pct}%`,
                        background: 'linear-gradient(90deg, var(--accent), var(--red-300))', borderRadius: 4 }} />
                    </span>
                    <span style={{ flex: '0 0 42px', textAlign: 'right', fontFamily: 'var(--font-mono)', fontSize: 13, color: 'var(--text-muted)' }}>{c.pct}%</span>
                  </div>
                ))}
              </div>

              {/* repair range + action */}
              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16, alignItems: 'center', justifyContent: 'space-between',
                padding: '20px 22px', borderRadius: 'var(--radius-md)', background: 'var(--green-tint)', border: '1px solid rgba(22,214,128,0.35)' }}>
                <div>
                  <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--text-muted)', marginBottom: 6 }}>Fair-market repair range</div>
                  <div style={{ fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 28, color: 'var(--text-strong)' }}>$180&ndash;$320</div>
                </div>
                <button onClick={() => window.aleroqScrollTo('compare')} style={{
                  display: 'inline-flex', alignItems: 'center', gap: 9, padding: '13px 20px', cursor: 'pointer',
                  borderRadius: 'var(--radius-md)', border: '1px solid var(--positive)', background: 'var(--positive)',
                  color: '#04130c', fontFamily: 'var(--font-body)', fontWeight: 600, fontSize: 15 }}>
                  Request offers <Ic name="ArrowRight" size={16} color="#04130c" />
                </button>
              </div>

              <p style={{ display: 'flex', alignItems: 'flex-start', gap: 8, margin: '20px 0 0', fontSize: 13, lineHeight: 1.5, color: 'var(--text-faint)' }}>
                <Ic name="Info" size={14} color="var(--text-faint)" />
                ALEROQ provides guidance to help you prepare. A qualified mechanic confirms the diagnosis and performs the repair.
              </p>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}
window.ProductDemo = ProductDemo;