// 04 Platform overview
const Platform = () => {
  const [active, setActive] = React.useState(0);
  const items = [
    { icon: 'image', title: 'Image Generation', sub: 'Flux + Magnific', desc: 'Photoreal product and campaign imagery at any scale.', meta: '01' },
    { icon: 'video', title: 'Video Generation', sub: 'Kling', desc: 'Looping campaign video and social content from stills.', meta: '02' },
    { icon: 'workflow', title: 'Workflows', sub: 'Automate pipelines', desc: 'Chain prompts, models, edits and exports into repeatable pipelines.', meta: '03' },
    { icon: 'model', title: 'Model Database', sub: '10k+ digital twins', desc: 'Official partner of ModelManagement.com — cleared, rights-secured digital twins.', meta: '04' },
    { icon: 'folder', title: 'Asset Management', sub: 'Digital studio', desc: 'Organize, review and ship every asset from one place.', meta: '05' },
  ];

  return (
    <section className="platform" id="platform" data-screen-label="04 Platform">
      <div className="section__header section__header--center">
        <div className="section__eyebrow">THE PLATFORM</div>
        <h2 className="section__title section__title--center">
          Everything you need. <br />
          <em className="serif">Nothing</em> you don't.
        </h2>
        <p className="section__sub">
          5 integrated capabilities — no stitching tools together.
        </p>
      </div>

      <div className="platform__grid">
        {items.map((it, i) => (
          <button
            key={i}
            className={`pl-card ${active === i ? 'pl-card--active' : ''}`}
            onMouseEnter={() => setActive(i)}
            onFocus={() => setActive(i)}
          >
            <div className="pl-card__head">
              <div className="pl-card__icon">
                <Glyph name={it.icon} size={26} />
              </div>
              <div className="pl-card__meta">{it.meta}</div>
            </div>
            <div className="pl-card__body">
              <h3 className="pl-card__title">{it.title}</h3>
              <div className="pl-card__sub">{it.sub}</div>
              <p className="pl-card__desc">{it.desc}</p>
            </div>
          </button>
        ))}
      </div>

    </section>
  );
};

window.Platform = Platform;