// 05 Why Stoodio
const WhyStoodio = () => {
  const points = [
    {
      title: 'Built exclusively for fashion',
      body: 'Garment accuracy, fabric rendering, fashion workflows — not a generic image generator.',
    },
    {
      title: 'Legally safe from day one',
      body: 'Official partner of ModelManagement.com — 10k+ consented digital twins, secured commercial rights, no grey zones.',
    },
    {
      title: 'Guided onboarding, not trial-and-error',
      body: 'Our team helps you integrate AI into your real production from the first session.',
    },
    {
      title: 'Integrated end-to-end',
      body: 'From image to video to asset management — in one platform, not five tools.',
    },
    {
      title: 'AI production, without building an AI department',
      body: 'Your creative team stays in control. No engineers needed.',
    },
  ];

  return (
    <section className="why" data-screen-label="05 Why Stoodio">
      <div className="why__grid">
        <div className="why__left">
          <div className="why__media">
            <img src={(window.__r||(p=>p))('images/why-partner.jpg')} alt="Editorial — AI production partner" />
            <div className="why__media-tag">
              <span className="why__media-tag-dot" />
              BEHIND THE LENS — STOODIO SET 07
            </div>
          </div>
        </div>
        <div className="why__mid">
          <div className="section__eyebrow">— WHY STOODIO</div>
          <h2 className="section__title">
            More than a tool. <br />
            Your <em className="serif">AI production partner.</em>
          </h2>
          <p className="why__intro">
            Most brands get stuck experimenting with tools that weren't built for production. Stoodio is different:
          </p>
        </div>
        <div className="why__right">
          {points.map((p, i) => (
            <div key={i} className="why-row">
              <div className="why-row__arrow">
                <Glyph name="arrow" size={18} color="var(--primary)" />
              </div>
              <div className="why-row__num">0{i + 1}</div>
              <div className="why-row__body">
                <h3 className="why-row__title">{p.title}</h3>
                <p className="why-row__text">{p.body}</p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

window.WhyStoodio = WhyStoodio;