/* Features — staggered reveal, 3D tilt on hover, red glow. */
function Tilt({ children, style = {} }) {
  const ref = React.useRef(null);
  const onMove = (e) => {
    const el = ref.current; if (!el) return;
    const r = el.getBoundingClientRect();
    const px = (e.clientX - r.left) / r.width - 0.5;
    const py = (e.clientY - r.top) / r.height - 0.5;
    el.style.transform = `perspective(760px) rotateY(${px * 13}deg) rotateX(${-py * 13}deg) translateY(-5px) scale(1.02)`;
  };
  const reset = () => { const el = ref.current; if (el) el.style.transform = 'perspective(760px) rotateY(0) rotateX(0)'; };
  return (
    <div ref={ref} onMouseMove={onMove} onMouseLeave={reset}
      style={{ height: '100%', transition: 'transform 0.25s var(--ease-out)', transformStyle: 'preserve-3d', ...style }}>
      {children}
    </div>
  );
}

function Features() {
  const { FeatureCard, Badge } = window.RevvoDesignSystem_a89086;
  const { Reveal, Ic, Parallax } = window;
  const items = [
    { icon: 'Languages', title: 'AI diagnostic translation', description: 'Every cryptic fault code rewritten in plain, honest English.', detail: '“P0301” → “cylinder 1 misfire, likely a worn coil.”' },
    { icon: 'Gavel', title: 'Live mechanic bidding', description: 'Local shops compete for your job in an open marketplace.', detail: 'Most jobs get 3+ offers within an hour.' },
    { icon: 'BadgeDollarSign', title: 'Transparent pricing', description: 'See fair-market cost for parts and labor before you commit.', detail: 'Backed by regional parts & labor data.' },
    { icon: 'Activity', title: 'Predictive maintenance alerts', description: 'Catch failures early with warnings tuned to your exact car.', detail: 'Flags issues weeks before they strand you.' },
    { icon: 'Users', title: 'Community knowledge', description: 'Real fixes from real owners of the same make and model.', detail: 'Learn what actually worked for your model.' },
    { icon: 'ShieldCheck', title: 'No hidden fees', description: 'What you see is what you pay. No markups, no surprises.', detail: 'ALEROQ never takes a cut of your repair.' },
  ];
  return (
    <section id="features" style={{
      position: 'relative', overflow: 'hidden',
      padding: 'var(--space-section) clamp(20px, 5vw, 48px)',
    }}>
      {/* deep parallax imagery accent for depth */}
      <Parallax speed={0.3} style={{ position: 'absolute', inset: 0, zIndex: 0, pointerEvents: 'none' }}>
        <div style={{
          position: 'absolute', top: '-10%', right: '-8%', width: '70%', height: '120%',
          backgroundImage: 'url("hero-car.png")', backgroundSize: 'cover', backgroundPosition: 'center left',
          transform: 'scaleX(-1)', opacity: 0.14, filter: 'grayscale(0.4)',
          maskImage: 'linear-gradient(90deg, transparent, #000 70%)',
          WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 70%)',
        }} />
      </Parallax>
      <div style={{ position: 'relative', zIndex: 1, maxWidth: 'var(--container)', margin: '0 auto' }}>
        <Reveal style={{ marginBottom: 52, maxWidth: 620 }}>
          <Badge variant="neutral" style={{ marginBottom: 20 }}>Features</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)',
          }}>
            Everything the shop won&rsquo;t tell you.
          </h2>
          <p style={{ fontSize: 'var(--fs-lead)', color: 'var(--text-body)' }}>
            One app between you and every repair decision &mdash; built to keep you informed and in control.
          </p>
        </Reveal>
        <div className="features-grid" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
          {items.map((f, i) => (
            <Reveal key={f.title} delay={(i % 3) * 90} dir={i % 3 === 0 ? 'left' : i % 3 === 2 ? 'right' : 'up'} style={{ height: '100%' }}>
              <Tilt>
                <FeatureCard accent="red" icon={<Ic name={f.icon} size={22} />} title={f.title} description={f.description}
                  detail={<React.Fragment><Ic name="ArrowRight" size={14} /> {f.detail}</React.Fragment>} />
              </Tilt>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

window.Features = Features;