// Kotleto · ABOUT / Story — editorial split with photo strip

function About({ accent = "#D9461E" }) {
  const { lang } = useLang();
  return (
    <section id="story" style={{ padding: "100px 0", background: "var(--ink)", color: "var(--paper)", position: "relative", overflow: "hidden" }}>
      {/* decorative big K */}
      <div aria-hidden style={{
        position: "absolute", insetInlineEnd: "-4vw", top: "-6vh", zIndex: 0,
        fontFamily: "var(--display)", fontSize: "clamp(200px, 32vw, 520px)",
        color: "rgba(217,70,30,0.12)", lineHeight: 1, pointerEvents: "none",
      }}>K</div>

      <Wrap className="wrap-pad" style={{ position: "relative", zIndex: 1 }}>
        <div className="grid grid-2" style={{ gap: 60, alignItems: "center" }}>
          <div>
            <span className="chip" style={{ background: "rgba(255,244,226,0.1)", color: "var(--paper)", border: "1px solid rgba(255,244,226,0.2)" }}>
              <Ico.Dot style={{ color: accent }} /> {lang === "fa" ? "داستان ما" : "Our story"}
            </span>
            <h2 className="display display-h2" style={{
              margin: "20px 0 24px", fontSize: "clamp(44px, 6.5vw, 92px)", lineHeight: 0.92,
              color: "var(--paper)",
            }}>
              {lang === "fa" ? <>سه دهه،<br />یه دستور،<br /><span style={{ color: accent }}>یه ایمان.</span></>
                              : <>Three decades,<br />one recipe,<br /><span style={{ color: accent }}>one belief.</span></>}
            </h2>
            <div style={{ display: "flex", flexDirection: "column", gap: 18, color: "rgba(255,244,226,0.85)", fontSize: 16, lineHeight: 1.7 }}>
              <p style={{ margin: 0 }}>
                {lang === "fa"
                  ? "همه چی از یه دکهٔ کوچیک کنار خیابون قصرالدشت شروع شد. مادربزرگ هر صبح کتلت می‌زد، پدر می‌برد سرِ کار، مشتری‌ها جمع شدن، یکی شد ده تا، ده تا شد صد تا."
                  : "It started at a tiny stall on Qasr-od-Dasht street. Grandma fried cutlets every morning, dad delivered them; word spread."}
              </p>
              <p style={{ margin: 0 }}>
                {lang === "fa"
                  ? "امروز کتلتُ یه فست‌فود مدرنه، با همون دستور قدیمی. گوشت گوسفندی محلی، سیب‌زمینی دست‌ساب، تخم‌مرغ روستایی. بدون پودر، بدون نگه‌دارنده، بدون عجله."
                  : "Today, Kotleto is a modern joint with the original recipe. Local lamb, hand-grated potato, village eggs. No powder, no preservatives, no rush."}
              </p>
              <p style={{
                margin: 0,
                fontStyle: lang === "fa" ? "normal" : "italic",
                color: accent,
                fontFamily: lang === "fa" ? "'Markazi Text', var(--fa)" : "var(--serif)",
                fontWeight: lang === "fa" ? 600 : 400,
                fontSize: lang === "fa" ? 28 : 22,
                lineHeight: 1.7,
              }}>
                {lang === "fa" ? "«وقتی غذا با عشق درست بشه، طعمش لو میده.»" : "«When food is made with love, the taste tells.»"}
              </p>
              <p style={{ margin: 0, fontSize: 13, opacity: 0.6 }}>
                {lang === "fa" ? "— خانم گلپر، بنیان‌گذار کتلتُ" : "— Mrs. Golpar, founder of Kotleto"}
              </p>
            </div>

            {/* numbers */}
            <div style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24, marginTop: 40 }}>
              {[
                { num: lang === "fa" ? "۳۴" : "34",   sub: lang === "fa" ? "سال سابقه" : "years strong" },
                { num: lang === "fa" ? "۱.۲م" : "1.2M", sub: lang === "fa" ? "کتلت سرو شده" : "cutlets served" },
                { num: lang === "fa" ? "۴.۹★" : "4.9★", sub: lang === "fa" ? "از ۲٬۱۰۰ نفر" : "from 2,100 reviews" },
              ].map((s, i) => (
                <div key={i}>
                  <div className="display" style={{ fontSize: 44, color: accent, lineHeight: 1 }}>{s.num}</div>
                  <div style={{ fontSize: 12, opacity: 0.7, marginTop: 4, textTransform: "uppercase", letterSpacing: "0.1em" }}>{s.sub}</div>
                </div>
              ))}
            </div>
          </div>

          {/* photo collage */}
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gridTemplateRows: "180px 180px 180px", gap: 14 }}>
            <img alt="" src={KotletoImages.url("story-food")}
              style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 24, gridRow: "1 / span 2", transform: "rotate(-2deg)", border: "3px solid var(--paper)" }} />
            <img alt="" src={KotletoImages.url("story-restaurant")}
              style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 24, transform: "rotate(2deg)", border: "3px solid var(--paper)" }} />
            <img alt="" src={KotletoImages.url("story-sandwich")}
              style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 24, transform: "rotate(-1deg)", border: "3px solid var(--paper)" }} />
            <div style={{
              borderRadius: 24, padding: 22,
              background: accent, color: "#fff", border: "3px solid var(--paper)",
              display: "flex", flexDirection: "column", justifyContent: "space-between",
              transform: "rotate(2deg)",
            }}>
              <Ico.Sparkle />
              <div className="display" style={{ fontSize: 22, lineHeight: 1.1 }}>
                {lang === "fa" ? "دست‌ساز، هر روز، از ساعت ۶ صبح" : "Hand-pressed, daily, from 6am"}
              </div>
            </div>
            <img alt="" src={KotletoImages.url("story-kitchen")}
              style={{ width: "100%", height: "100%", objectFit: "cover", borderRadius: 24, gridColumn: "1 / span 2", transform: "rotate(-1deg)", border: "3px solid var(--paper)", height: 180 }} />
          </div>
        </div>
      </Wrap>
    </section>
  );
}

window.About = About;