// ─────────────────────────────────────────────────────────
// ChefVerse · About UFS — platform-level "who we are / how it works".
// Lives at programme level so the UFS intro isn't repeated inside every
// brief (per client feedback). Briefs link here via a light recap card.
// ─────────────────────────────────────────────────────────
const { useState: useStateAbout } = React;

const ABOUT_STRINGS = {
  en: {
    eyebrow: "ABOUT",
    title: "Who is Unilever Food Solutions?",
    lead: "We're the foodservice company of Unilever, and the expert partner for chefs — here to help you stay prepared and inspired for what's next.",
    chefsLine: "We don't just cater for chefs. We are chefs.",
    facts: [{ n: "76", l: "Countries" }, { n: "250", l: "Chefs" }, { n: "4,200", l: "People" }, { n: "2", l: "Powerbrands" }],
    purposeH: "Our purpose",
    purpose: "We free chefs to love what they do. We're about solutions — and solutions free you.",
    dnaH: "Made for today, prepped for tomorrow",
    dna: "We help you tackle today's realities — cost, time, busy teams — while getting ready for where food is heading next, with on-trend menus and inspiring dishes.",
    howH: "How briefs work",
    how: [
      "Briefs come from UFS brand teams like Knorr Professional and Hellmann's.",
      "Each brief gives you a clear mission, the campaign focus, and the freedom to interpret it for your audience and your market.",
      "Read the brief, note the key messages and the do's and don'ts, pick the channel you're most comfortable on, and create something that feels authentic to you.",
      "Submit before the deadline. Approved work earns the brief's eligible award — cash or points.",
    ],
    brandsH: "Our Powerbrands",
    brands: "Knorr Professional and Hellmann's — trusted in kitchens around the world.",
    back: "Back",
  },
  de: {
    eyebrow: "ÜBER UNS",
    title: "Wer ist Unilever Food Solutions?",
    lead: "Wir sind das Foodservice-Unternehmen von Unilever und der Expertenpartner für Köche — damit du auf das Kommende vorbereitet und inspiriert bleibst.",
    chefsLine: "Wir kochen nicht nur für Köche. Wir sind Köche.",
    facts: [{ n: "76", l: "Länder" }, { n: "250", l: "Köche" }, { n: "4.200", l: "Menschen" }, { n: "2", l: "Powerbrands" }],
    purposeH: "Unser Anspruch",
    purpose: "Wir geben Köchen die Freiheit, das zu lieben, was sie tun. Es geht um Lösungen — und Lösungen befreien dich.",
    dnaH: "Für heute gemacht, für morgen gerüstet",
    dna: "Wir helfen dir bei den Realitäten von heute — Kosten, Zeit, ausgelastete Teams — und bereiten dich auf die Zukunft des Essens vor, mit trendigen Menüs und inspirierenden Gerichten.",
    howH: "So funktionieren Briefings",
    how: [
      "Briefings kommen von UFS-Markenteams wie Knorr Professional und Hellmann's.",
      "Jedes Briefing gibt dir eine klare Mission, den Kampagnenfokus und die Freiheit, es für dein Publikum und deinen Markt zu interpretieren.",
      "Lies das Briefing, notiere die Kernbotschaften und die Do's und Don'ts, wähle deinen Lieblingskanal und erschaffe etwas, das authentisch zu dir passt.",
      "Reiche vor der Frist ein. Angenommene Arbeit verdient die verfügbare Prämie des Briefings — Geld oder Punkte.",
    ],
    brandsH: "Unsere Powerbrands",
    brands: "Knorr Professional und Hellmann's — weltweit in Küchen vertraut.",
    back: "Zurück",
  },
  id: {
    eyebrow: "TENTANG",
    title: "Siapa Unilever Food Solutions?",
    lead: "Kami adalah perusahaan foodservice dari Unilever, dan mitra ahli untuk chef — membantumu siap dan terinspirasi menghadapi masa depan.",
    chefsLine: "Kami bukan sekadar melayani chef. Kami adalah chef.",
    facts: [{ n: "76", l: "Negara" }, { n: "250", l: "Chef" }, { n: "4.200", l: "Orang" }, { n: "2", l: "Powerbrand" }],
    purposeH: "Tujuan kami",
    purpose: "Kami membebaskan chef untuk mencintai pekerjaannya. Kami soal solusi — dan solusi membebaskanmu.",
    dnaH: "Dibuat untuk hari ini, disiapkan untuk esok",
    dna: "Kami membantumu menghadapi realita hari ini — biaya, waktu, tim yang sibuk — sambil bersiap ke mana arah makanan berikutnya, dengan menu kekinian dan hidangan inspiratif.",
    howH: "Cara kerja brief",
    how: [
      "Brief datang dari tim brand UFS seperti Knorr Professional dan Hellmann's.",
      "Tiap brief memberimu misi yang jelas, fokus kampanye, dan kebebasan menafsirkannya untuk audiens dan pasarmu.",
      "Baca brief, catat pesan utama serta do's dan don'ts, pilih channel yang paling nyaman buatmu, dan buat sesuatu yang autentik untukmu.",
      "Kirim sebelum tenggat. Karya yang disetujui mendapat hadiah yang tersedia dari brief — tunai atau poin.",
    ],
    brandsH: "Powerbrand kami",
    brands: "Knorr Professional dan Hellmann's — dipercaya di dapur seluruh dunia.",
    back: "Kembali",
  },
};

function AboutUFS({ locale, onBack }) {
  const s = ABOUT_STRINGS[locale] || ABOUT_STRINGS.en;
  return (
    <div className="page about-page">
      {onBack && (
        <div className="player-crumbs">
          <button className="link-btn" onClick={onBack}><Icon name="chevron-left" size={12} /> {s.back}</button>
        </div>
      )}

      {/* Hero */}
      <div className="about-hero">
        <img className="about-hero-img" src="https://images.unsplash.com/photo-1577219491135-ce391730fb2c?auto=format&fit=crop&w=1400&h=700&q=70&crop=entropy" alt="" loading="lazy" />
        <div className="about-hero-dim" />
        <div className="about-hero-content">
          <span className="about-eyebrow">{s.eyebrow}</span>
          <h1 className="about-title">{s.title}</h1>
          <p className="about-lead">{s.lead}</p>
          <p className="about-chefs">{s.chefsLine}</p>
        </div>
      </div>

      {/* Facts */}
      <div className="about-facts">
        {s.facts.map((f, i) => (
          <div key={i} className="about-fact">
            <div className="about-fact-n">{f.n}</div>
            <div className="about-fact-l">{f.l}</div>
          </div>
        ))}
      </div>

      {/* Purpose */}
      <section className="about-section">
        <h2 className="about-h2">{s.purposeH}</h2>
        <p className="about-body about-purpose">{s.purpose}</p>
      </section>

      {/* DNA */}
      <section className="about-section">
        <h2 className="about-h2">{s.dnaH}</h2>
        <p className="about-body">{s.dna}</p>
      </section>

      {/* How briefs work */}
      <section className="about-section">
        <h2 className="about-h2">{s.howH}</h2>
        <ul className="about-steps">
          {s.how.map((h, i) => (
            <li key={i} className="about-step">
              <div className="about-step-n">{i + 1}</div>
              <div>{h}</div>
            </li>
          ))}
        </ul>
      </section>

      {/* Brands */}
      <section className="about-section">
        <h2 className="about-h2">{s.brandsH}</h2>
        <p className="about-body">{s.brands}</p>
      </section>
    </div>
  );
}

window.AboutUFS = AboutUFS;
window.ABOUT_STRINGS = ABOUT_STRINGS;