/* Hero — full bleed photo skyline + sticky-friendly top spacing + kinetic type */

const Hero = ({ dubaiTime, weather, lang, overrideHour, overrideWeather, onCTA }) => {
  const isAR = lang === "ar";
  const hr = overrideHour != null ? overrideHour : getDubaiHour(dubaiTime);
  const greeting = (() => {
    if (hr < 5) return isAR ? "ليلة هانئة" : "Late night";
    if (hr < 12) return isAR ? "صباح الخير" : "Good morning";
    if (hr < 17) return isAR ? "ظهيرة سعيدة" : "Good afternoon";
    if (hr < 20) return isAR ? "مساء الخير" : "Good evening";
    return isAR ? "ليلة هانئة" : "Good night";
  })();

  const timeStr = dubaiTime.toLocaleTimeString("en-GB", { timeZone: "Asia/Dubai", hour: "2-digit", minute: "2-digit", hour12: false });

  const headlines = isAR ? [
  { main: "أنت", italic: "الرئيس.", main2: "" },
  { main: "نحن", italic: "العمليات.", main2: "" }] :
  [
  { main: "You're the", italic: "CEO.", main2: "" },
  { main: "We're the", italic: "COO.", main2: "" }];


  return (
    <section className="hero" data-screen-label="01 Hero">
      <div className="hero-skyline">
        <PhotoSkyline dubaiTime={dubaiTime} weather={weather} overrideHour={overrideHour} overrideWeather={overrideWeather} />
        <div className="hero-grain" />
      </div>

      <div className="hero-content shell">
        <div className="hero-eyebrow eyebrow">
          <span className="dot-live"></span>
          {isAR ? `${greeting} · دبي ${timeStr}` : `${greeting} · Dubai ${timeStr}`}
          <span className="weather-pill">
            <WeatherIcon condition={weather?.condition} /> {weather?.tempC ?? "—"}°C
          </span>
        </div>

        <h1 className="display hero-display">
          {headlines.map((line, i) =>
          <div className="hero-line" key={i}>
              <SplitText text={line.main} delay={i * 0.4} />
              {line.italic && <span className="it"> {line.italic} </span>}
              {line.main2 && <SplitText text={line.main2} delay={i * 0.4 + 0.2} />}
            </div>
          )}
        </h1>

        <div className="hero-foot">
          <p className="hero-sub-text">
            {isAR ?
            "أنظمة الذكاء الاصطناعي من وستفي توفّر ٢٠٪ من وقت أفضل وكلاء دبي — ثمّ تملأ ذلك الـ ٢٠٪ بفرص جديدة، صفقات إضافية، ومحادثات تستحق وقتك. وستفي تجلب أفضل من وكالة، أفضل من فريق ISA — كل ذلك من واتسابك." :
            "Wastafy's AI systems give Dubai's top agents 20% of their time back — then refill it with new opportunities and conversations worth your time. Better than an agency. Better than an ISA team."}
          </p>
          <div className="hero-cta">
            <button className="btn accent" onClick={onCTA}>
              <span className="dot"></span>
              {isAR ? "احجز مكالمة استراتيجية" : "Book a strategy call"}
            </button>
            <a href="#what" className="btn ghost">
              {isAR ? "كيف يعمل" : "See how it works"} →
            </a>
          </div>
        </div>

        <div className="hero-stats mono">
          {[
          ["20%", isAR ? "فرص إضافية" : "more opportunities"],
          ["20%", isAR ? "وقت موفّر" : "time saved"],
          ["40%", isAR ? "عائد" : "ROI"],
          ["24/7", isAR ? "دائمًا" : "always on"]].
          map(([n, l]) =>
          <div className="hero-stat" key={l}>
              <div className="hero-stat-num">{n}</div>
              <div className="hero-stat-lbl">{l}</div>
            </div>
          )}
        </div>
      </div>

      <style>{`
        .hero {
          min-height: 100vh;
          position: relative;
          overflow: hidden;
          isolation: isolate;
          padding-top: calc(var(--nav-h) + 24px);
        }
        .hero-skyline { position: absolute; inset: 0; z-index: -1; }
        .skyline-wrap, .skyline-svg, .photo-skyline {
          position: absolute; inset: 0; width: 100%; height: 100%;
        }
        .hero-grain {
          position: absolute; inset: 0;
          background:
            linear-gradient(to bottom, transparent 0%, transparent 35%, color-mix(in oklab, var(--bg) 65%, transparent) 60%, var(--bg) 95%);
          pointer-events: none;
        }
        .hero-content {
          position: relative;
          z-index: 4;
          padding-top: 72px;
          padding-bottom: 80px;
          min-height: calc(100vh - 100px);
          display: flex;
          flex-direction: column;
          justify-content: flex-end;
        }
        .hero-eyebrow {
          display: inline-flex;
          align-items: center;
          gap: 12px;
          margin-bottom: 32px;
          padding: 6px 14px;
          background: color-mix(in oklab, var(--bg) 70%, transparent);
          border: 1px solid var(--rule);
          border-radius: 999px;
          backdrop-filter: blur(6px);
          -webkit-backdrop-filter: blur(6px);
          align-self: flex-start;
        }
        .weather-pill {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 4px 10px;
          border: 1px solid var(--rule);
          border-radius: 999px;
          margin-left: 6px;
          font-size: 10px;
        }
        .hero-display { margin-bottom: 64px; position: relative; }
        .hero-line { display: block; overflow: hidden; }
        .hero-line:nth-child(2) { padding-left: 8vw; }

        /* Hero text — explicit per-theme colors so the copy always
           reads on the video background. White on dark, black on light. */
        :root[data-theme="dark"] .hero-display,
        :root[data-theme="dark"] .hero-sub-text,
        :root[data-theme="dark"] .hero-stat-num,
        :root[data-theme="dark"] .hero-stat-lbl,
        :root[data-theme="dark"] .hero-eyebrow { color: #fff; }
        :root[data-theme="light"] .hero-display,
        :root[data-theme="light"] .hero-sub-text,
        :root[data-theme="light"] .hero-stat-num,
        :root[data-theme="light"] .hero-stat-lbl,
        :root[data-theme="light"] .hero-eyebrow { color: #000; }

        :root[data-theme="dark"] .hero-display {
          text-shadow:
            0 0 12px rgba(0,0,0,0.55),
            0 2px 30px rgba(0,0,0,0.45);
        }

        .hero-foot {
          display: grid;
          grid-template-columns: 1.4fr 1fr;
          gap: 64px;
          align-items: end;
          padding: 32px 0;
          border-top: 1px solid var(--rule);
          border-bottom: 1px solid var(--rule);
        }
        .hero-sub-text {
          font-size: 18px;
          line-height: 1.5;
          color: var(--ink-2);
          max-width: 50ch;
          margin: 0;
        }
        .hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; animation: floatY 7s cubic-bezier(.4,0,.2,1) infinite; }

        .hero-stats {
          margin-top: 24px;
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 24px;
        }
        .hero-stat-num {
          font-size: 36px;
          letter-spacing: -0.04em;
          line-height: 1;
          margin-bottom: 6px;
          color: var(--ink);
        }
        .hero-stat-lbl {
          color: var(--muted);
          font-size: 10px;
          letter-spacing: 0.1em;
          text-transform: uppercase;
        }

        .split-char {
          display: inline-block;
          opacity: 0;
          transform: translateY(110%);
          animation: charIn 1s var(--ease) forwards;
        }
        @keyframes charIn { to { opacity: 1; transform: translateY(0); } }

        @media (max-width: 900px) {
          .hero-foot { grid-template-columns: 1fr; gap: 24px; }
          .hero-cta { justify-content: flex-start; }
          .hero-stats { grid-template-columns: repeat(2, 1fr); }
          .hero-line:nth-child(2) { padding-left: 0; }
        }

        @media (max-width: 760px) {
          .hero {
            min-height: 0;
            padding-top: calc(var(--nav-h) + 16px);
            display: flex;
            flex-direction: column;
          }
          /* Mobile hero strip — sized to the video's natural aspect
             ratio (~7:8). The video shows in full, no squish, no
             aggressive crop. Text content sits ON TOP of it. */
          .hero-skyline {
            position: absolute;
            inset: 0;
            top: calc(var(--nav-h) + 16px);
            height: auto;
            width: 100%;
            aspect-ratio: 1798 / 2056;
            z-index: 0;
          }
          .hero-grain {
            background: linear-gradient(to bottom, transparent 0%, transparent 70%, color-mix(in oklab, var(--bg) 75%, transparent) 88%, var(--bg) 100%);
          }
          .hero-content {
            position: relative;
            z-index: 4;
            min-height: 0;
            padding-top: calc(40vw);
            padding-bottom: 48px;
            justify-content: flex-start;
          }
          .hero-display { margin-bottom: 28px; }
        }
      `}</style>
    </section>);

};

const SplitText = ({ text, delay = 0 }) => {
  const chars = text.split("");
  return (
    <span className="split-text">
      {chars.map((c, i) =>
      <span key={i} className="split-char" style={{ animationDelay: `${delay + i * 0.03}s` }}>
          {c === " " ? "\u00A0" : c}
        </span>
      )}
    </span>);

};

const WeatherIcon = ({ condition }) => {
  const map = { clear: "☀", cloudy: "☁", rain: "☂", fog: "≋", sandstorm: "⌇", night: "☾" };
  return <span style={{ fontSize: 12 }}>{map[condition] || "☀"}</span>;
};

window.Hero = Hero;
window.SplitText = SplitText;
window.WeatherIcon = WeatherIcon;