// SecureSystems landing — section components
// Globals: React, ReactDOM, window.__SS_I18N

const { useState, useEffect, useRef, useMemo } = React;

// ─── Icons (inline SVGs, lightweight) ────────────────────────────────────────
const Icon = {
  ArrowUR: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" className="ss-arrow">
      <path d="M7 17 17 7" /><path d="M7 7h10v10" />
    </svg>
  ),
  Play: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor"><path d="M8 5v14l11-7z" /></svg>
  ),
  Phone: ({ size = 16 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round">
      <path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z" />
    </svg>
  ),
  Bolt: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"><path d="M13 2 3 14h7l-1 8 10-12h-7l1-8z"/></svg>
  ),
  Sparkles: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><path d="m12 3 2 5 5 2-5 2-2 5-2-5-5-2 5-2z"/><path d="M19 14v3M19 17h3M5 4v2M5 5h2"/></svg>
  ),
  Chart: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><path d="M3 3v18h18"/><path d="M7 14l4-4 4 3 5-7"/></svg>
  ),
  Shield: ({ size = 18 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3 4 6v6c0 4.5 3 8.5 8 9 5-.5 8-4.5 8-9V6z"/><path d="m9 12 2 2 4-4"/></svg>
  ),
  Mail: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 7 9 6 9-6"/></svg>
  ),
  Pin: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 22s7-7.5 7-13a7 7 0 1 0-14 0c0 5.5 7 13 7 13z"/><circle cx="12" cy="9" r="2.5"/></svg>
  ),
  Insta: ({ size = 14 }) => (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.8" fill="currentColor"/></svg>
  ),
};

// ─── Cinematic placeholder (CSS skyline + monospace label) ───────────────────
function CinematicPlaceholder({ label, variant = "skyline", className = "", showLabel = false, slot, prompt }) {
  return (
    <div className={`cinematic ${className}`}>
      {variant === "skyline" && (
        <>
          <div className="horizon" />
          <div className="skyline">
            <svg viewBox="0 0 1200 400" preserveAspectRatio="none">
              <defs>
                <linearGradient id="sky-grad" x1="0" x2="0" y1="0" y2="1">
                  <stop offset="0%" stopColor="rgba(8,24,52,0)" />
                  <stop offset="100%" stopColor="rgba(5,15,36,0.95)" />
                </linearGradient>
              </defs>
              {/* far skyline */}
              <g fill="rgba(13,32,66,0.85)">
                <rect x="0" y="220" width="80" height="180"/>
                <rect x="90" y="180" width="40" height="220"/>
                <polygon points="140,210 170,160 200,210 200,400 140,400"/>
                <rect x="210" y="195" width="60" height="205"/>
                <rect x="280" y="240" width="120" height="160"/>
                <polygon points="410,170 450,120 490,170 490,400 410,400"/>
                <rect x="500" y="200" width="55" height="200"/>
                <rect x="565" y="160" width="90" height="240"/>
                <polygon points="665,140 720,80 775,140 775,400 665,400"/>
                <rect x="785" y="210" width="70" height="190"/>
                <rect x="865" y="180" width="50" height="220"/>
                <rect x="925" y="225" width="100" height="175"/>
                <polygon points="1035,190 1080,140 1125,190 1125,400 1035,400"/>
                <rect x="1135" y="220" width="65" height="180"/>
              </g>
              {/* window lights */}
              <g fill="rgba(201,169,106,0.55)">
                {Array.from({ length: 60 }).map((_, i) => {
                  const x = (i * 67) % 1190 + 8;
                  const y = 200 + ((i * 31) % 180);
                  return <rect key={i} x={x} y={y} width="2" height="2" />;
                })}
              </g>
              <rect x="0" y="0" width="1200" height="400" fill="url(#sky-grad)"/>
            </svg>
          </div>
        </>
      )}
      {variant === "interior" && (
        <div style={{
          position: "absolute", inset: 0,
          background: `
            radial-gradient(60% 50% at 30% 40%, rgba(201,169,106,0.18), transparent 70%),
            radial-gradient(50% 60% at 80% 70%, rgba(29,56,104,0.6), transparent 70%),
            linear-gradient(135deg, #0a1d3e 0%, #081834 50%, #0a1d3e 100%)
          `,
        }}>
          <div style={{
            position: "absolute", inset: "20% 10% 20% 50%",
            backgroundImage: "linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px)",
            backgroundSize: "44px 44px",
            mixBlendMode: "overlay",
          }} />
        </div>
      )}
      {variant === "abstract" && (
        <div style={{
          position: "absolute", inset: 0,
          background: `
            radial-gradient(circle at 20% 30%, rgba(201,169,106,0.22), transparent 50%),
            radial-gradient(circle at 80% 70%, rgba(29,56,104,0.7), transparent 55%),
            linear-gradient(135deg, #081834, #0d2042 70%)
          `,
        }} />
      )}
      {showLabel && label && (
        <div className="placeholder-note" style={{ left: 20, bottom: 20 }}>
          <span className="dot pulse-dot" />{label}
        </div>
      )}
      {slot && (
        <div className="slot-badge">
          <div className="slot-badge-num">{slot}</div>
          <div className="slot-badge-prompt">{prompt}</div>
        </div>
      )}
    </div>
  );
}

// ─── Navbar ─────────────────────────────────────────────────────────────────
function Navbar({ t, lang, onToggleLang, onContact }) {
  return (
    <nav style={{
      position: "fixed", top: 18, left: 0, right: 0, zIndex: 50,
      padding: "0 clamp(20px,4vw,64px)",
      display: "flex", alignItems: "center", justifyContent: "space-between",
      gap: 16,
    }}>
      {/* Logo */}
      <div style={{ display: "flex", alignItems: "center", gap: 14 }}>
        <img src="assets/logo.png" alt="SecureSystems" style={{ width: 56, height: 56, objectFit: "contain", filter: "brightness(0) invert(1)", flexShrink: 0 }} />
        <span style={{ fontFamily: "var(--font-heading)", fontStyle: lang === "ar" ? "normal" : "italic", fontSize: 26, letterSpacing: "-0.02em" }}>
          SecureSystems
        </span>
      </div>

      {/* Spacer (links pill removed) */}
      <div style={{ flex: 1 }}></div>

      {/* Right cluster: Contact + Lang toggle */}
      <div style={{ display: "flex", alignItems: "center", gap: 10, flexShrink: 0 }}>
        <button
          onClick={onContact}
          className="btn-primary"
          style={{
            padding: "10px 18px", borderRadius: 9999, border: 0,
            fontSize: 13, fontWeight: 600, display: "inline-flex", alignItems: "center", gap: 6,
            whiteSpace: "nowrap",
          }}>
          {t.nav.contact}
          <span className="mirror-x"><Icon.ArrowUR size={13} /></span>
        </button>
        <button
          onClick={onToggleLang}
          className="glass"
          style={{
            borderRadius: 9999, padding: "10px 16px", color: "var(--ink)",
            fontSize: 13, fontWeight: 500, background: "var(--glass-bg)",
            fontFamily: lang === "ar" ? "var(--font-body)" : "var(--font-arabic)",
            whiteSpace: "nowrap",
          }}>
          {t.nav.langSwitch}
        </button>
      </div>
    </nav>
  );
}

// ─── Hero ───────────────────────────────────────────────────────────────────
function Hero({ t, lang }) {
  const titleFontStyle = { fontFamily: "var(--font-heading)", fontStyle: lang === "ar" ? "normal" : "italic" };
  return (
    <section style={{ position: "relative", minHeight: 880, paddingTop: 180, paddingBottom: 80, overflow: "hidden" }}>
      <CinematicPlaceholder
        variant="skyline"
        slot="01"
        prompt="doha skyline · golden hour · slow drone push-in"
      />
      <div style={{ position: "absolute", inset: 0, background: "rgba(8,24,52,0.35)", zIndex: 1 }} />
      <div className="fade-bottom" />

      <div className="container" style={{ position: "relative", zIndex: 3 }}>
        {/* Tag pill removed per request */}

        {/* Title */}
        <h1 className="h-display" style={{
          ...titleFontStyle,
          fontSize: "clamp(3.2rem, 9vw, 7.5rem)",
          margin: "0",
          maxWidth: 1100,
        }}>
          {t.hero.title.map((word, i) => (
            <span key={i} className="blur-in" style={{
              display: "block", animationDelay: `${0.15 + i * 0.18}s`,
            }}>{word}</span>
          ))}
        </h1>

        {/* Sub */}
        <p className="body-text blur-in" style={{
          maxWidth: 540, marginTop: 36, fontSize: 15.5,
          animationDelay: "0.85s",
        }}>
          {t.hero.sub}
        </p>

        {/* CTAs */}
        <div className="blur-in" style={{
          display: "flex", flexWrap: "wrap", gap: 14, marginTop: 32, animationDelay: "1.05s",
        }}>
          <button className="btn btn-ghost" style={{ display: "none" }}>
            <span style={{
              width: 28, height: 28, borderRadius: 999, background: "rgba(255,255,255,0.92)",
              color: "var(--bg-2)", display: "inline-grid", placeItems: "center",
              paddingInlineStart: 2,
            }}>
              <Icon.Play />
            </span>
            {t.hero.ctaSecondary}
          </button>
        </div>

        {/* Partners / sectors — closer to subtext */}
        <div style={{ marginTop: 56, paddingBottom: 20, position: "relative", zIndex: 4 }}>
          <div style={{ display: "flex", alignItems: "center", gap: 32, flexWrap: "wrap" }}>
            <span className="glass pill" style={{ flexShrink: 0 }}>
              <span style={{ width: 6, height: 6, borderRadius: 999, background: "var(--accent)" }} className="pulse-dot" />
              {t.hero.partnersLabel}
            </span>
            <div style={{ display: "flex", alignItems: "center", gap: 48, flexWrap: "wrap" }}>
              {t.hero.partners.map((p, i) => (
                <span key={i} className="h-section" style={{
                  ...titleFontStyle, fontSize: "clamp(1.2rem, 1.8vw, 1.7rem)",
                  color: "var(--ink)", opacity: 0.9,
                }}>{p}</span>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Start (How It Works) ───────────────────────────────────────────────────
function StartSection({ t, lang }) {
  const titleFontStyle = { fontFamily: "var(--font-heading)", fontStyle: lang === "ar" ? "normal" : "italic" };
  return (
    <section className="section" style={{ position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
        <CinematicPlaceholder variant="interior" slot="02" prompt="modern qatari office interior · soft ambient light · slow dolly" />
      </div>
      <div className="fade-top" />
      <div className="fade-bottom" />

      <div className="container" style={{ position: "relative", zIndex: 3 }}>
        <div style={{ maxWidth: 880 }}>
          <span className="glass pill" style={{ marginBottom: 28 }}>
            <span className="eyebrow">{t.start.eyebrow}</span>
          </span>
          <h2 className="h-section" style={{ ...titleFontStyle, fontSize: "clamp(2.2rem, 5.4vw, 4.2rem)" }}>
            {t.start.title.map((line, i) => <span key={i} style={{ display: "block" }}>{line}</span>)}
          </h2>
          <p className="body-text" style={{ marginTop: 24, fontSize: 16, maxWidth: 620 }}>
            {t.start.sub}
          </p>
        </div>

        {/* Step rail */}
        <div data-mobile-stack="1" style={{
          marginTop: 96,
          display: "grid",
          gridTemplateColumns: "repeat(3, 1fr)",
          gap: 24,
        }}>
          {t.start.steps.map((s, i) => (
            <div key={i} className="glass" style={{ borderRadius: 24, padding: 32 }}>
              <div className="eyebrow" style={{ color: "var(--accent)" }}>{s.n}</div>
              <h3 style={{ ...titleFontStyle, fontSize: 26, margin: "16px 0 16px", letterSpacing: "-0.02em", lineHeight: 1.15 }}>
                {s.t}
              </h3>
              <p className="body-text" style={{ fontSize: 14, margin: 0 }}>{s.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── Features chess ─────────────────────────────────────────────────────────
function ChessRow({ row, reverse, t, lang, slot, prompt }) {
  const titleFontStyle = { fontFamily: "var(--font-heading)", fontStyle: lang === "ar" ? "normal" : "italic" };
  return (
    <div data-mobile-stack="chess" style={{
      display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "center",
      direction: reverse ? (lang === "ar" ? "ltr" : "rtl") : "inherit",
    }}>
      <div style={{ direction: lang === "ar" ? "rtl" : "ltr" }}>
        <h3 className="h-section" style={{ ...titleFontStyle, fontSize: "clamp(1.8rem, 3.2vw, 2.8rem)", margin: 0 }}>
          {row.title}
        </h3>
        <p className="body-text" style={{ marginTop: 22, fontSize: 16, maxWidth: 480 }}>{row.body}</p>
        <button className="glass-strong btn" style={{ marginTop: 28 }}>
          {row.cta}
          <span className="mirror-x"><Icon.ArrowUR /></span>
        </button>
      </div>
      <div className="glass" style={{
        borderRadius: 28, height: 480, position: "relative", overflow: "hidden",
        direction: lang === "ar" ? "rtl" : "ltr",
      }}>
        <CinematicPlaceholder variant="abstract" slot={slot} prompt={prompt} />
        {!reverse ? <CallerMock /> : <DashboardMock />}
      </div>
    </div>
  );
}

function CallerMock() {
  return (
    <div style={{
      position: "absolute", inset: "auto 32px 60px 32px",
      display: "grid", gap: 12, direction: "ltr",
    }}>
      {[
        { who: "Caller", text: "I'd like to book a table for four tonight.", ts: "00:04" },
        { who: "Voice", text: "Of course. Inside or terrace? We have 8:15 or 9:00.", ts: "00:07" },
        { who: "Caller", text: "Terrace at 9 please.", ts: "00:11" },
      ].map((m, i) => (
        <div key={i} className="glass" style={{
          borderRadius: 14, padding: "10px 14px", maxWidth: m.who === "Voice" ? "75%" : "65%",
          marginInlineStart: m.who === "Voice" ? 0 : "auto",
          fontSize: 13,
        }}>
          <div className="eyebrow" style={{ fontSize: 9, letterSpacing: "0.16em", marginBottom: 4, color: m.who === "Voice" ? "var(--accent)" : "var(--ink-mute)" }}>
            {m.who} · {m.ts}
          </div>
          {m.text}
        </div>
      ))}
    </div>
  );
}

function DashboardMock() {
  return (
    <div style={{ position: "absolute", inset: "32px 32px 32px 32px", display: "grid", gridTemplateColumns: "1fr 1fr", gridTemplateRows: "1fr 1fr", gap: 14, direction: "ltr" }}>
      {[
        { label: "Calls handled", val: "1,284", trend: "+12%" },
        { label: "Avg response", val: "1.6s", trend: "−0.3s" },
        { label: "Bookings made", val: "317", trend: "+24%" },
        { label: "Languages used", val: "AR · EN", trend: "" },
      ].map((s, i) => (
        <div key={i} className="glass" style={{ borderRadius: 16, padding: 16, display: "flex", flexDirection: "column", justifyContent: "space-between", overflow: "hidden" }}>
          <div className="eyebrow" style={{ fontSize: 9 }}>{s.label}</div>
          <div style={{ fontFamily: "var(--font-heading)", fontStyle: "italic", fontSize: 28, letterSpacing: "-0.03em", lineHeight: 1, whiteSpace: "nowrap" }}>
            {s.val}
          </div>
          {s.trend && <div style={{ fontSize: 11, color: "var(--accent)", fontFamily: "var(--font-mono)" }}>{s.trend}</div>}
        </div>
      ))}
    </div>
  );
}

function FeaturesChess({ t, lang }) {
  const titleFontStyle = { fontFamily: "var(--font-heading)", fontStyle: lang === "ar" ? "normal" : "italic" };
  return (
    <section className="section">
      <div className="container">
        <div style={{ display: "flex", alignItems: "end", justifyContent: "space-between", flexWrap: "wrap", gap: 24, marginBottom: 64 }}>
          <div>
            <span className="glass pill" style={{ marginBottom: 20 }}>
              <span className="eyebrow">{t.chess.eyebrow}</span>
            </span>
            <h2 className="h-section" style={{ ...titleFontStyle, fontSize: "clamp(2.2rem, 5vw, 4rem)", margin: 0, maxWidth: 800 }}>
              {t.chess.title.map((l, i) => <span key={i} style={{ display: "block" }}>{l}</span>)}
            </h2>
          </div>
        </div>

        <div style={{ display: "grid", gap: 96 }}>
          <ChessRow row={t.chess.row1} reverse={false} t={t} lang={lang} slot="03" prompt="ai voice assistant call · headset glow · soft transcript overlay" />
          <ChessRow row={t.chess.row2} reverse={true} t={t} lang={lang} slot="04" prompt="dashboard ui · counters animating · auto-improving graph · navy backdrop" />
        </div>
      </div>
    </section>
  );
}

// ─── Why Us grid ────────────────────────────────────────────────────────────
function WhyUs({ t, lang }) {
  const titleFontStyle = { fontFamily: "var(--font-heading)", fontStyle: lang === "ar" ? "normal" : "italic" };
  const icons = [Icon.Bolt, Icon.Sparkles, Icon.Chart, Icon.Shield];
  return (
    <section className="section">
      <div className="container">
        <div style={{ marginBottom: 56 }}>
          <span className="glass pill" style={{ marginBottom: 20 }}>
            <span className="eyebrow">{t.why.eyebrow}</span>
          </span>
          <h2 className="h-section" style={{ ...titleFontStyle, fontSize: "clamp(2.2rem, 5vw, 4rem)", margin: 0 }}>
            {t.why.title.map((l, i) => <span key={i} style={{ display: "block" }}>{l}</span>)}
          </h2>
        </div>
        <div data-mobile-stack="2" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 20 }}>
          {t.why.cards.map((c, i) => {
            const I = icons[i];
            return (
              <div key={i} className="glass" style={{ borderRadius: 24, padding: 28, minHeight: 240, display: "flex", flexDirection: "column" }}>
                <div className="glass-strong" style={{
                  width: 44, height: 44, borderRadius: 9999, display: "grid", placeItems: "center",
                  marginBottom: 20, color: "var(--accent)",
                }}>
                  <I />
                </div>
                <h3 style={{ ...titleFontStyle, fontSize: 24, margin: "0 0 10px", letterSpacing: "-0.02em", lineHeight: 1 }}>
                  {c.t}
                </h3>
                <p className="body-text" style={{ fontSize: 13.5, margin: 0 }}>{c.d}</p>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// ─── Stats ──────────────────────────────────────────────────────────────────
function Stats({ t, lang }) {
  const titleFontStyle = { fontFamily: "var(--font-heading)", fontStyle: lang === "ar" ? "normal" : "italic" };
  return (
    <section className="section" style={{ position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, zIndex: 0, filter: "saturate(0.2)" }}>
        <CinematicPlaceholder variant="abstract" slot="05" prompt="abstract data textures · light leaks · slow turning dial · desaturated" />
      </div>
      <div className="fade-top" />
      <div className="fade-bottom" />
      <div className="container" style={{ position: "relative", zIndex: 3 }}>
        <div className="glass" style={{ borderRadius: 32, padding: "56px 48px" }}>
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 40, gap: 16, flexWrap: "wrap" }}>
            <span className="glass pill">
              <span className="eyebrow">{t.stats.eyebrow}</span>
            </span>
            <span className="eyebrow" style={{ color: "var(--ink-mute)" }}>2026 / Q2</span>
          </div>
          <div data-mobile-stack="2" style={{ display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 24 }}>
            {t.stats.items.map((s, i) => (
              <div key={i} style={{
                paddingInlineStart: i === 0 ? 0 : 24,
                borderInlineStart: i === 0 ? "none" : "1px solid var(--line)",
              }}>
                <div className="h-display stat-value" style={{
                  ...titleFontStyle, fontSize: "clamp(2rem, 3.4vw, 3.4rem)", lineHeight: 1,
                }}>{s.v}</div>
                <div className="body-text" style={{ marginTop: 18, fontSize: 13, opacity: 0.7 }}>{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

// ─── Voices / Testimonials ──────────────────────────────────────────────────
function Voices({ t, lang }) {
  const titleFontStyle = { fontFamily: "var(--font-heading)", fontStyle: lang === "ar" ? "normal" : "italic" };
  return (
    <section className="section">
      <div className="container">
        <div style={{ marginBottom: 56 }}>
          <span className="glass pill" style={{ marginBottom: 20 }}>
            <span className="eyebrow">{t.voices.eyebrow}</span>
          </span>
          <h2 className="h-section" style={{ ...titleFontStyle, fontSize: "clamp(2.2rem, 5vw, 4rem)", margin: 0 }}>
            {t.voices.title.map((l, i) => <span key={i} style={{ display: "block" }}>{l}</span>)}
          </h2>
        </div>
        <div data-mobile-stack="1" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 24 }}>
          {t.voices.items.map((v, i) => (
            <div key={i} className="glass" style={{ borderRadius: 24, padding: 32, display: "flex", flexDirection: "column" }}>
              <div style={{ fontFamily: "var(--font-heading)", fontStyle: "italic", fontSize: 64, lineHeight: 0.6, color: "var(--accent)", opacity: 0.8 }}>
                "
              </div>
              <p style={{ fontFamily: "var(--font-heading)", fontStyle: lang === "ar" ? "normal" : "italic", fontSize: 22, lineHeight: 1.32, margin: "16px 0 28px", letterSpacing: "-0.01em", color: "var(--ink)" }}>
                {v.q}
              </p>
              <div style={{ marginTop: "auto" }}>
                <hr className="divider" style={{ marginBottom: 16 }} />
                <div style={{ fontWeight: 500, fontSize: 14 }}>{v.n}</div>
                <div style={{ fontSize: 12, color: "var(--ink-mute)", marginTop: 4, fontFamily: "var(--font-mono)" }}>{v.r}</div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── CTA + Footer ───────────────────────────────────────────────────────────
function CtaFooter({ t, lang }) {
  const titleFontStyle = { fontFamily: "var(--font-heading)", fontStyle: lang === "ar" ? "normal" : "italic" };
  return (
    <section id="contact-section" style={{ position: "relative", overflow: "hidden" }}>
      <div style={{ position: "absolute", inset: 0, zIndex: 0 }}>
        <CinematicPlaceholder variant="skyline" slot="06" prompt="doha skyline at night · west bay towers · soft motion · neon reflections" />
      </div>
      <div className="fade-top" />
      <div className="container" style={{ position: "relative", zIndex: 3, padding: "160px 0 64px" }}>
        <div style={{ maxWidth: 980 }}>
          <span className="glass pill" style={{ marginBottom: 28 }}>
            <span className="eyebrow">{t.cta.eyebrow}</span>
          </span>
          <h2 className="h-display" style={{ ...titleFontStyle, fontSize: "clamp(2.5rem, 7vw, 5.6rem)", margin: 0 }}>
            {t.cta.title.map((l, i) => <span key={i} style={{ display: "block" }}>{l}</span>)}
          </h2>
          <p className="body-text" style={{ marginTop: 32, fontSize: 17, maxWidth: 620 }}>{t.cta.sub}</p>
          <div style={{ display: "flex", gap: 14, flexWrap: "wrap", marginTop: 36 }}>
            <a href="tel:+97433809997" className="glass-strong btn">
              <Icon.Phone />
              {t.cta.call}
              <span className="ltr-inline" style={{ marginInlineStart: 4 }}>{t.cta.phone}</span>
            </a>
            <button className="btn btn-primary">
              {t.cta.pricing}
              <span className="mirror-x"><Icon.ArrowUR /></span>
            </button>
          </div>
        </div>

        {/* Footer bar */}
        <footer style={{ marginTop: 140, paddingTop: 32, borderTop: "1px solid var(--line)" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1fr", gap: 32, paddingBottom: 32 }}>
            <div>
              <div style={{ display: "flex", alignItems: "center", gap: 14, marginBottom: 16 }}>
                <img src="assets/logo.png" alt="" style={{ width: 48, height: 48, objectFit: "contain", filter: "brightness(0) invert(1)" }} />
                <span style={{ fontFamily: "var(--font-heading)", fontStyle: lang === "ar" ? "normal" : "italic", fontSize: 22 }}>SecureSystems</span>
              </div>
              <p className="body-text" style={{ fontSize: 12.5, opacity: 0.55, margin: 0, maxWidth: 240 }}>
                {lang === "ar"
                  ? "بنية تحتية للذكاء الاصطناعي، مبنيّة في الدوحة لأعمال قطر والخليج."
                  : "AI infrastructure, built in Doha for businesses across Qatar and the GCC."}
              </p>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>{lang === "ar" ? "تواصل" : "Contact"}</div>
              <div style={{ display: "grid", gap: 10, fontSize: 13, color: "var(--ink-soft)" }}>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}><Icon.Phone /><span className="ltr-inline">{t.cta.phone}</span></div>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}><Icon.Mail /><span className="ltr-inline">{t.footer.email}</span></div>
                <div style={{ display: "flex", alignItems: "center", gap: 8 }}><Icon.Pin />{t.footer.address}</div>
                <a href="https://www.instagram.com/securesystemsai/" target="_blank" rel="noopener noreferrer" style={{ display: "flex", alignItems: "center", gap: 8, color: "inherit", textDecoration: "none" }}><Icon.Insta /><span className="ltr-inline">{t.footer.social}</span></a>
              </div>
            </div>
            <div>
              <div className="eyebrow" style={{ marginBottom: 14 }}>{lang === "ar" ? "قانوني" : "Legal"}</div>
              <div style={{ display: "grid", gap: 10, fontSize: 13, color: "var(--ink-soft)" }}>
                {t.footer.links.map((l, i) => <a key={i} href="#">{l}</a>)}
              </div>
            </div>
          </div>
          <hr className="divider" />
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", paddingTop: 24, fontSize: 11.5, color: "var(--ink-faint)", fontFamily: "var(--font-mono)" }}>
            <span>{t.footer.copy}</span>
          </div>
        </footer>
      </div>
    </section>
  );
}

Object.assign(window, {
  Navbar, Hero, StartSection, FeaturesChess, WhyUs, Stats, Voices, CtaFooter,
  CinematicPlaceholder, Icon,
});