// Kotleto · HERO — full-bleed editorial with layered illustration

function Hero({ accent = "#D9461E", onOrder }) {
  const { lang } = useLang();
  const cart = useCart();
  const [hover, setHover] = useState(false);

  return (
    <section style={{ position: "relative", overflow: "hidden", paddingTop: 20, paddingBottom: 60 }}>
      {/* Layered backdrop */}
      <div className="hero-sun" aria-hidden style={{
        position: "absolute", inset: 0, zIndex: 0,
        background: `
          radial-gradient(60% 50% at 80% 20%, rgba(232,177,74,0.25), transparent 70%),
          radial-gradient(50% 50% at 10% 80%, rgba(217,70,30,0.18), transparent 70%)
        `,
      }} />
      {/* Sun/Plate disc */}
      <div aria-hidden style={{
        position: "absolute", insetInlineEnd: "-12vw", top: 80, zIndex: 0,
        width: "min(58vw, 720px)", height: "min(58vw, 720px)",
        borderRadius: "50%",
        background: `radial-gradient(circle at 35% 35%, #FCDDA8, ${accent} 60%, ${accent} 70%)`,
        boxShadow: `inset -30px -30px 0 rgba(0,0,0,0.08), 0 30px 80px -30px rgba(217,70,30,0.5)`,
      }} />

      <Wrap className="wrap-pad" style={{ position: "relative", zIndex: 1, paddingTop: 40 }}>
        <div className="grid grid-hero" style={{
          gap: 30,
          alignItems: "center",
          minHeight: "min(78vh, 720px)",
        }}>
          {/* LEFT */}
          <div className="hero-copy" style={{ display: "flex", flexDirection: "column", gap: 26, minWidth: 0 }}>
            <div style={{ display: "flex", gap: 8, flexWrap: "wrap" }}>
              <span className="chip dark"><Ico.Dot />&nbsp;<L {...COPY.hero.eyebrow} /></span>
              <span className="chip outline"><L {...COPY.city} /></span>
            </div>

            {/* Headline — editorial split lines */}
            <h1 className="display display-hero" style={{
              margin: 0,
              fontSize: "clamp(56px, 9vw, 140px)",
              lineHeight: 0.88,
              letterSpacing: "var(--display-tracking)",
              color: "var(--ink)",
            }}>
              <span style={{ display: "block" }}><L {...COPY.hero.line1} /></span>
              <span className="hero-accent" style={{
                display: "inline-block",
                background: accent,
                color: "#fff",
                padding: "0 22px 10px",
                borderRadius: 18,
                transform: "rotate(-1.5deg)",
                boxShadow: "0 10px 0 var(--brand-deep), 0 24px 50px -16px rgba(217,70,30,0.5)",
                marginTop: 10,
              }}><L {...COPY.hero.line2} /></span>
              <span className="hero-hand" style={{
                display: "inline-block",
                marginInlineStart: 14,
                fontFamily: lang === "fa" ? "'Markazi Text', var(--fa)" : "var(--serif)",
                fontStyle: lang === "fa" ? "normal" : "italic",
                fontWeight: lang === "fa" ? 700 : 400,
                fontSize: "0.5em",
                color: "var(--ink-3)",
                letterSpacing: 0,
              }}>{lang === "fa" ? "" : "* served homestyle"}</span>
            </h1>

            <p style={{
              margin: 0, maxWidth: 520, fontSize: 19, lineHeight: 1.65,
              color: "var(--ink-2)",
            }}><L {...COPY.hero.sub} /></p>

            <div style={{ display: "flex", gap: 12, flexWrap: "wrap", marginTop: 4 }}>
              <button className="btn btn-primary btn-lg" onClick={onOrder}
                onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}
              >
                <Ico.Bag /><L {...COPY.hero.cta1} />
                <span style={{
                  width: 26, height: 26, borderRadius: 999, background: "#fff", color: accent,
                  display: "grid", placeItems: "center", transform: hover ? "translateX(-4px) rotate(-30deg)" : "none",
                  transition: "transform .25s ease",
                }}><Ico.Arrow /></span>
              </button>
              <button className="btn btn-ghost btn-lg" onClick={() => document.querySelector("#menu")?.scrollIntoView({ behavior: "smooth" })}>
                <L {...COPY.hero.cta2} />
              </button>
            </div>

            {/* Trust strip */}
            <div className="hero-trust" style={{
              display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 14, marginTop: 16,
              padding: "18px 22px", background: "rgba(255,244,226,0.7)",
              border: "1px solid var(--line)", borderRadius: 20,
              backdropFilter: "blur(10px)",
            }}>
              {[
                { ic: <Ico.Clock />,  ...COPY.hero.badge1 },
                { ic: <Ico.Truck />,  ...COPY.hero.badge2 },
                { ic: <Ico.Star />,   ...COPY.hero.badge3 },
              ].map((b, i) => (
                <div key={i} style={{ display: "flex", alignItems: "center", gap: 10 }}>
                  <span style={{ color: accent }}>{b.ic}</span>
                  <span style={{ fontSize: 13, fontWeight: 600, color: "var(--ink-2)" }}><L fa={b.fa} en={b.en} /></span>
                </div>
              ))}
            </div>
          </div>

          {/* RIGHT — layered sandwich + decorations */}
          <div className="hero-right" style={{ position: "relative", minHeight: 520, display: "flex", justifyContent: "center", alignItems: "center" }}>
            {/* Spinning seal */}
            <div style={{
              position: "absolute", top: -10, insetInlineStart: -10, zIndex: 4,
              width: 130, height: 130,
              animation: "spin 18s linear infinite",
            }}>
              <svg viewBox="0 0 130 130" width="130" height="130">
                <defs>
                  <path id="circle-text" d="M65,65 m-50,0 a50,50 0 1,1 100,0 a50,50 0 1,1 -100,0" />
                </defs>
                <circle cx="65" cy="65" r="55" fill="var(--ink)" />
                <text fontFamily="var(--display)" fontSize="11" fill="var(--paper)" letterSpacing="2.5">
                  <textPath href="#circle-text" startOffset="0">
                    {lang === "fa" ? "★ کتلت تازه ★ کتلتُ شیراز ★ از ۱۳۹۰ ★ " : "★ FRESH CUTLETS ★ KOTLETO SHIRAZ ★ EST 2011 ★ "}
                  </textPath>
                </text>
                <circle cx="65" cy="65" r="22" fill={accent} />
                <text x="65" y="71" textAnchor="middle" fontFamily="var(--display)" fontSize="18" fill="#fff">K</text>
              </svg>
            </div>

            {/* Steam wiggle */}
            <svg width="120" height="120" viewBox="0 0 120 120" style={{ position: "absolute", top: 30, zIndex: 1 }}>
              <path d="M40 100 q-10 -30 0 -50 q10 -30 0 -50" stroke="rgba(26,20,16,0.25)" strokeWidth="3" strokeLinecap="round" fill="none">
                <animate attributeName="d" dur="3s" repeatCount="indefinite"
                  values="M40 100 q-10 -30 0 -50 q10 -30 0 -50;M40 100 q10 -30 0 -50 q-10 -30 0 -50;M40 100 q-10 -30 0 -50 q10 -30 0 -50"/>
              </path>
              <path d="M70 100 q10 -30 0 -50 q-10 -30 0 -50" stroke="rgba(26,20,16,0.18)" strokeWidth="3" strokeLinecap="round" fill="none">
                <animate attributeName="d" dur="3.6s" repeatCount="indefinite"
                  values="M70 100 q10 -30 0 -50 q-10 -30 0 -50;M70 100 q-10 -30 0 -50 q10 -30 0 -50;M70 100 q10 -30 0 -50 q-10 -30 0 -50"/>
              </path>
            </svg>

            {/* The plate + sandwich (photo-realistic stock) */}
            <div style={{
              position: "relative", width: "100%", maxWidth: 520, aspectRatio: "1/1",
              borderRadius: "50%",
              background: "#fff",
              boxShadow: "inset 0 0 0 6px var(--paper), 0 30px 80px -30px rgba(26,20,16,0.5)",
              overflow: "hidden",
              transform: "rotate(-4deg)",
            }}>
              <img alt="Kotleto signature cutlet"
                src={KotletoImages.url("hero")}
                style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>

            {/* Floating price tag */}
            <div style={{
              position: "absolute", insetInlineEnd: 4, bottom: 60, zIndex: 5,
              background: "var(--ink)", color: "var(--paper)",
              padding: "14px 18px", borderRadius: 18,
              transform: "rotate(6deg)", boxShadow: "0 14px 30px -10px rgba(0,0,0,0.5)",
              fontFamily: "var(--display)",
            }}>
              <div style={{ fontSize: 11, opacity: 0.6, letterSpacing: "0.2em" }}>{lang === "fa" ? "از" : "FROM"}</div>
              <div style={{ fontSize: 28, lineHeight: 1, marginTop: 2 }}>
                <Price value={245000} suffix={lang === "fa" ? " ت" : "T"} />
              </div>
            </div>

            {/* small chip - delivery */}
            <div style={{
              position: "absolute", bottom: 18, insetInlineStart: 18, zIndex: 5,
              background: "var(--paper)", border: "1px solid var(--line)", borderRadius: 999,
              padding: "10px 14px", display: "flex", alignItems: "center", gap: 8,
              fontWeight: 700, fontSize: 13, boxShadow: "0 14px 30px -14px rgba(0,0,0,0.3)",
            }}>
              <span style={{ width: 8, height: 8, borderRadius: 999, background: "#5B6B3A" }} />
              {lang === "fa" ? "الان باز هستیم · ۱۸ پیک آماده" : "Open now · 18 riders ready"}
            </div>
          </div>
        </div>
      </Wrap>

      <style>{`
        @keyframes spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
        @media (max-width: 880px) {
          .hero-right { min-height: 360px !important; margin-top: 30px; }
        }
        @media (max-width: 560px) {
          .hero-right { min-height: 300px !important; }
        }
      `}</style>
    </section>
  );
}

window.Hero = Hero;