// Formats.jsx — three service formats + custom CTA
const FormatCard = ({ idx, title, body, hero }) => (
  <div className="dd-fmt__card">
    <div className="dd-fmt__hero" style={{background: hero}}>
      <span className="dd-fmt__num">0{idx}</span>
    </div>
    <div className="dd-fmt__body">
      <h3 className="dd-fmt__title">{title}</h3>
      <p className="p-sm">{body}</p>
    </div>
  </div>
);

const Formats = () => {
  return (
    <section className="dd-section dd-section--alt" id="formats">
      <div className="container-x">
        <h2 className="dd-section__title">
          <span className="h-editorial">Формати, з якими&nbsp;</span>
          <span className="h-editorial gold">працюю.</span>
        </h2>
        <div className="dd-fmt__grid">
          <FormatCard idx={1} title="Заміна кадрів — від 1$ за секунду" body="У вас вже є фото або відео, але не вистачає ракурсів і деталей. Доповнюю в тому самому стилі, без повторної зйомки." hero="linear-gradient(135deg, #4D1020 0%, #3D0818 100%)" />
          <FormatCard idx={2} title="AI-відео під ключ — від 1,8$ за секунду" body="Повноцінний ролик процесу приготування або готової страви. Для реклами, рілсів, сайту, сторіс." hero="linear-gradient(135deg, #6B2035 0%, #4D1020 100%)" />
          <FormatCard idx={3} title="Фото для меню і книг — від 1$ за фото" body="Студійні кадри з нуля за рецептом. Без локації, фотографа і витрачених продуктів." hero="linear-gradient(135deg, #8B3045 0%, #4D1020 100%)" />
        </div>
        <div className="dd-fmt__custom">
          <div>
            <h4 className="dd-fmt__custom-title">Індивідуальний формат</h4>
            <p className="p-sm">Є нестандартне завдання? Не вписується в жоден із форматів вище? Розкажіть — обговоримо і знайдемо рішення під ваш бренд.</p>
          </div>
          <a href="#contact" className="btn btn-ghost">Обговоримо →</a>
        </div>
      </div>
    </section>
  );
};
window.Formats = Formats;