const Marquee = () => {
  const items = [
    'AI nutrition engine',
    'Habit coaching',
    'Wearable sync',
    'Diagnostics-ready',
    'Indian dietary patterns',
    'Hydration & sleep',
    'Behavioural analytics',
    'Preventive screening',
  ];
  const list = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {list.map((x, i) => <div key={i} className="marquee-item">{x}</div>)}
      </div>
    </div>
  );
};

const Features = () => {
  const cards = [
    { icon: 'sparkle', accent: 'accent-o', title: 'AI nutrition engine',
      desc: 'Personalised meal intelligence using Indian dietary patterns, macros, and your real eating habits.' },
    { icon: 'target', accent: 'accent-b', title: 'Habit coaching',
      desc: 'Gentle daily nudges for hydration, sleep, movement and routine consistency that actually stick.' },
    { icon: 'bowl', accent: 'accent-g', title: 'Smart meal tracking',
      desc: 'Log food in seconds. Behaviour-aware estimates that learn from your kitchen, not a US database.' },
    { icon: 'flask', accent: 'accent-b', title: 'Diagnostics-ready',
      desc: 'Built to integrate with pathology labs and biomarker tests, so your numbers tell a continuous story.' },
    { icon: 'watch', accent: 'accent-o', title: 'Wearable ecosystem',
      desc: 'Pulls heart rate, sleep, steps and recovery from Apple Health, Google Fit, and major smartwatches.' },
    { icon: 'shield', accent: 'accent-g', title: 'Preventive intelligence',
      desc: 'Spot trends early. Early intervention, not late diagnosis — long-term health, decided today.' },
  ];

  return (
    <>
      <Marquee />
      <section id="features">
        <div className="container">
          <div className="section-head reveal">
            <span className="eyebrow">Platform · what you get</span>
            <h2 className="display">A whole health stack — without the bloat.</h2>
            <p className="lede">Six core capabilities, working together. Each one solves a real, daily friction in living well.</p>
          </div>

          <div className="features-grid">
            {cards.map((c, i) => (
              <div key={i} className={`feature-card ${c.accent} reveal`}>
                <div className="icon"><Icon name={c.icon} size={22} /></div>
                <h3>{c.title}</h3>
                <p>{c.desc}</p>
                <div className="arrow">LEARN MORE →</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </>
  );
};

Object.assign(window, { Features });