// Comparison.jsx — pain (classical) vs gain (AI) two-column section
const ComparisonItem = ({ kind, children }) => (
  <div className={`dd-cmp__item dd-cmp__item--${kind}`}>
    <div className={`dd-cmp__dot dd-cmp__dot--${kind}`}>{kind === "good" ? "✓" : "✗"}</div>
    <div className="dd-cmp__row">{children}</div>
  </div>
);

const Comparison = () => {
  return (
    <section className="dd-section">
      <div className="container-x">
        <span className="eyebrow">ЯК Я ДОПОМАГАЮ</span>
        <h2 className="dd-section__title">
          <span className="h-display">Класична зйомка вимагає часу.</span>
          <span className="h-editorial gold">AI-генерація економить його.</span>
        </h2>
        <div className="dd-cmp__grid">
          <div className="card">
            <h4 className="dd-cmp__head mute">Класична зйомка</h4>
            <ComparisonItem kind="bad">Підбір локації, реквізиту та моделей</ComparisonItem>
            <ComparisonItem kind="bad">Фотограф + команда на весь день</ComparisonItem>
            <ComparisonItem kind="bad">Час підготовки: 1–2 тижні</ComparisonItem>
            <ComparisonItem kind="bad">Готування страв спеціально для зйомки</ComparisonItem>
            <ComparisonItem kind="bad">Треба ще 30 кадрів? Цикл починається заново</ComparisonItem>
          </div>
          <div className="card card-gold-edge">
            <h4 className="dd-cmp__head gold">AI-генерація</h4>
            <ComparisonItem kind="good">Ваші страви залишаються вашими</ComparisonItem>
            <ComparisonItem kind="good">Той самий обʼєм за 24–48 годин</ComparisonItem>
            <ComparisonItem kind="good">Різні стилі, освітлення, формати</ComparisonItem>
            <ComparisonItem kind="good">Кадрів стає в рази більше без витрат</ComparisonItem>
            <ComparisonItem kind="good">Будь-яка кількість нових кадрів — без зйомки</ComparisonItem>
          </div>
        </div>
        <div className="pullquote" style={{marginTop: "48px", maxWidth: "820px"}}>
          AI розвивається щодня. Потрібна людина, яка слідкує за цим постійно і застосовує найновіші інструменти у вашому бізнесі — <em>це роблю я.</em>
        </div>
      </div>
    </section>
  );
};
window.Comparison = Comparison;