const Ecosystem = () => {
  const cards = [
    { icon: 'brain', title: 'AI coaching', desc: 'Behaviour models tuned to long-term adherence, not vanity metrics.' },
    { icon: 'flask', title: 'Diagnostics integration', desc: 'Connect pathology and biomarker tests for continuous health context.' },
    { icon: 'watch', title: 'Wearables', desc: 'Apple Health, Google Fit, smartwatches and rings — one unified view.' },
    { icon: 'bowl', title: 'Indian nutrition', desc: 'A food database that understands thalis, tiffin, and regional staples.' },
    { icon: 'chart', title: 'Health analytics', desc: 'Weekly intelligence reports across nutrition, sleep, recovery and stress.' },
    { icon: 'shield', title: 'Privacy-first', desc: 'Your health data is yours. Encrypted, exportable, never sold.' },
  ];

  return (
    <section id="ecosystem">
      <div style={{ maxWidth: 'calc(var(--maxw) + 48px)', margin: '0 auto' }}>
        <div className="eco reveal">
          <div className="eco-bg"></div>
          <div className="eco-inner">
            <span className="eyebrow">Long-term vision</span>
            <h2>From a health app to a complete wellness infrastructure.</h2>
            <p className="lede">
              Arogya Bite is designed to evolve beyond tracking into a scalable preventive
              healthcare ecosystem — AI coaching, diagnostics, behavioural science and
              connected devices, all in one place.
            </p>

            <div className="eco-grid">
              {cards.map((c, i) => (
                <div key={i} className="eco-card">
                  <div className="icon"><Icon name={c.icon} size={18}/></div>
                  <h4>{c.title}</h4>
                  <p>{c.desc}</p>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Ecosystem });