// sections.jsx — Nav, Hero (3 variants), Features
// Loaded after icons.jsx so all Icon* globals are available.

// ────────────────────────────────────────────────────────────────
// PhoneMockup — iPhone-like frame around the app screenshot
// ────────────────────────────────────────────────────────────────
const PhoneMockup = ({ tilt = 0, glow = true, src = "assets/app-home.png", style = {} }) =>
<div
  className="phone-frame"
  style={{
    transform: `perspective(1800px) rotateY(${tilt}deg) rotateX(${tilt * 0.3}deg)`,
    ...style
  }}>
  
    <div className="phone-bezel">
      <div className="phone-screen">
        <img src={src} alt="تطبيق أبطال الصكّة" draggable="false" />
        <div className="phone-notch" aria-hidden="true">
          <div className="phone-notch-speaker"></div>
          <div className="phone-notch-camera"></div>
        </div>
      </div>
      <div className="phone-button phone-button-power"></div>
      <div className="phone-button phone-button-vol1"></div>
      <div className="phone-button phone-button-vol2"></div>
    </div>
    {glow && <div className="phone-glow" aria-hidden="true"></div>}
    <style>{`
      .phone-frame {
        position: relative;
        width: 340px;
        height: 700px;
        transform-style: preserve-3d;
        transition: transform 1.2s var(--ease-out);
      }
      .phone-bezel {
        position: relative;
        width: 100%;
        height: 100%;
        background: #000;
        border-radius: 52px;
        padding: 10px;
        box-shadow:
          0 0 0 2px #1a1a1c inset,
          0 0 0 3px rgba(255, 255, 255, 0.06),
          0 50px 90px -30px rgba(0, 0, 0, 0.7),
          0 30px 60px -15px rgba(229, 168, 44, 0.18);
      }
      .phone-screen {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 44px;
        overflow: hidden;
        background: var(--bg);
      }
      .phone-screen img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top center;
        display: block;
      }
      .phone-notch {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 120px;
        height: 24px;
        background: #000;
        border-radius: 0 0 16px 16px;
        z-index: 3;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 38px;
      }
      .phone-notch-speaker {
        width: 36px; height: 4px;
        background: #1a1a1c;
        border-radius: 2px;
      }
      .phone-notch-camera {
        width: 6px; height: 6px;
        border-radius: 50%;
        background: #0a0a0a;
        box-shadow: 0 0 0 1px #2a2a2a inset;
        position: relative;
      }
      .phone-notch-camera::after {
        content: "";
        position: absolute; inset: 1.5px;
        border-radius: 50%;
        background: radial-gradient(circle at 30% 30%, #1a1f2e, #050810 70%);
      }
      .phone-button {
        position: absolute;
        background: #1a1a1c;
        border-radius: 2px;
      }
      .phone-button-power { right: -2px; top: 200px; width: 4px; height: 80px; border-radius: 0 2px 2px 0; }
      .phone-button-vol1 { left: -2px; top: 160px; width: 4px; height: 50px; border-radius: 2px 0 0 2px; }
      .phone-button-vol2 { left: -2px; top: 230px; width: 4px; height: 80px; border-radius: 2px 0 0 2px; }
      .phone-glow {
        position: absolute;
        inset: -40px;
        background: radial-gradient(closest-side, rgba(229, 168, 44, 0.22), transparent 70%);
        z-index: -1;
        animation: pulse-glow 6s ease-in-out infinite;
        filter: blur(20px);
      }
      @keyframes pulse-glow {
        0%, 100% { opacity: 0.6; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.08); }
      }
      @media (max-width: 880px) {
        .phone-frame { width: 260px; height: 540px; }
      }
    `}</style>
  </div>;


// ────────────────────────────────────────────────────────────────
// FloatingCard — UI snippet floating around the phone
// ────────────────────────────────────────────────────────────────
const FloatingCard = ({ children, style, delay = 0, float = true }) =>
<div
  className={float ? "float-anim" : ""}
  style={{
    position: "absolute",
    background: "linear-gradient(145deg, rgba(36, 51, 41, 0.92), rgba(22, 35, 28, 0.92))",
    border: "1px solid rgba(245, 239, 224, 0.1)",
    borderRadius: "16px",
    padding: "14px 18px",
    backdropFilter: "blur(20px)",
    WebkitBackdropFilter: "blur(20px)",
    boxShadow: "0 20px 50px -15px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04) inset",
    animation: float ? `float 5s ease-in-out infinite` : undefined,
    animationDelay: `${delay}s`,
    zIndex: 5,
    ...style
  }}>
  
    {children}
  </div>;


// ────────────────────────────────────────────────────────────────
// Nav
// ────────────────────────────────────────────────────────────────
const Nav = ({ links = {} }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [open, setOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const navItems = [
  { href: "#features", label: "المميزات" },
  { href: "#showcase", label: "بث البطولات" },
  { href: "#faq", label: "الأسئلة الشائعة" }];


  return (
    <nav className={`navbar ${scrolled ? "scrolled" : ""}`}>
      <div className="container nav-inner">
        <a href="#top" className="brand">
          <img src="assets/logo.png" alt="أبطال الصكّة" className="brand-mark" style={{ height: "45px", width: "52px", objectFit: "fill" }} />
          <span className="brand-name">أبطال الصكّة</span>
        </a>
        <ul className="nav-links" style={{ fontSize: "18px" }}>
          {navItems.map((l) =>
          <li key={l.href}><a href={l.href}>{l.label}</a></li>
          )}
        </ul>
        <div className="nav-cta">
          <a href="#download" className="btn btn-primary nav-btn">
            <IconArrowDown size={16} />
            <span>حمّل التطبيق</span>
          </a>
          <button className="nav-burger" onClick={() => setOpen(!open)} aria-label="القائمة">
            {open ? <IconX size={22} /> : <IconMenu size={22} />}
          </button>
        </div>
      </div>
      {open &&
      <div className="nav-mobile">
          {navItems.map((l) =>
        <a key={l.href} href={l.href} onClick={() => setOpen(false)}>{l.label}</a>
        )}
        </div>
      }
      <style>{`
        .navbar {
          position: fixed; top: 0; left: 0; right: 0; z-index: 100;
          padding: 18px 0;
          transition: all .35s var(--ease-out);
          background: transparent;
        }
        .navbar.scrolled {
          padding: 12px 0;
          background: rgba(13, 22, 17, 0.78);
          backdrop-filter: blur(24px) saturate(160%);
          -webkit-backdrop-filter: blur(24px) saturate(160%);
          border-bottom: 1px solid var(--hairline);
        }
        .nav-inner {
          display: flex; align-items: center; justify-content: space-between; gap: 24px;
        }
        .brand {
          display: flex; align-items: center; gap: 12px;
          font-family: var(--display);
          font-weight: 700;
          font-size: 20px;
          color: var(--cream);
        }
        .brand-mark {
          width: 38px; height: 38px;
          object-fit: contain;
          display: block;
          filter: drop-shadow(0 4px 12px rgba(229, 168, 44, 0.35));
        }
        .nav-links {
          display: flex; gap: 36px;
          list-style: none; margin: 0; padding: 0;
          font-family: var(--display); font-weight: 500; font-size: 15px;
        }
        .nav-links a {
          color: var(--muted);
          transition: color .2s;
          position: relative;
        }
        .nav-links a::after {
          content: ""; position: absolute;
          bottom: -6px; right: 0; left: 0;
          height: 2px; background: var(--gold);
          transform: scaleX(0); transform-origin: right;
          transition: transform .3s var(--ease-out);
        }
        .nav-links a:hover { color: var(--cream); }
        .nav-links a:hover::after { transform: scaleX(1); }
        .nav-cta { display: flex; align-items: center; gap: 12px; }
        .nav-btn { padding: 10px 18px; font-size: 14px; }
        .nav-burger {
          display: none;
          width: 40px; height: 40px;
          border-radius: 10px;
          background: rgba(245,239,224,.04);
          border: 1px solid var(--hairline);
          align-items: center; justify-content: center;
          color: var(--cream);
        }
        .nav-mobile {
          display: none;
          background: var(--bg-2);
          padding: 16px 20px;
          border-top: 1px solid var(--hairline);
        }
        .nav-mobile a {
          display: block; padding: 14px 0;
          font-family: var(--display); font-size: 17px;
          border-bottom: 1px solid var(--hairline);
        }
        @media (max-width: 880px) {
          .nav-links { display: none; }
          .nav-burger { display: flex; }
          .navbar.has-open .nav-mobile, .nav-mobile { display: block; }
          .nav-btn span { display: none; }
        }
      `}</style>
    </nav>);

};

// ────────────────────────────────────────────────────────────────
// Hero (variants: device / bracket / type)
// ────────────────────────────────────────────────────────────────
const HeroDevice = ({ links = {} }) =>
<div className="hero-grid">
    <div className="hero-copy reveal">
      <span className="eyebrow" style={{ fontWeight: "900", letterSpacing: "0.2px", fontSize: "22px" }}>منصة بطولات البلوت الأولى</span>
      <h1 className="hero-title">
        <span>نظّم بطولتك</span>
        <span className="hero-title-accent">باحترافية</span>
      </h1>
      <p className="hero-sub" style={{ fontFamily: "\"IBM Plex Sans Arabic\"" }}>من إنشاء البطولة إلى البث المباشر وتسجيل النتائج، كل ما يحتاجه عشّاق البلوت في تطبيق واحد. أُنشئت بحبٍّ في السعودية .


    </p>
      <div className="hero-ctas">
        <a href={links.ios || "#download"} className="btn btn-primary" target="_blank" rel="noopener">
          <IconApple size={20} />
          <span>للأيفون</span>
        </a>
        <a href={links.android || "#download"} className="btn btn-ghost" target="_blank" rel="noopener">
          <IconGoogle size={20} />
          <span>للأندرويد</span>
        </a>
      </div>
    </div>
    <div className="hero-visual reveal" style={{ transitionDelay: "0.2s" }}>
      <PhoneMockup tilt={-6} />
      <FloatingCard
      delay={0}
      style={{ top: "8%", right: "-40px", padding: "12px 16px" }}>
      
        <div style={{
        fontFamily: "var(--display)",
        fontSize: 10.5,


        textTransform: "uppercase",
        color: "var(--gold)",
        marginBottom: 8,
        paddingBottom: 8,
        borderBottom: "1px solid rgba(245, 239, 224, 0.08)", fontWeight: "800", letterSpacing: "0.3px"
      }}>أضف مشرفين</div>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{
          width: 38, height: 38, borderRadius: 10,
          background: "var(--gold)", display: "grid", placeItems: "center"
        }}>
            <IconUserShield size={22} stroke="#1a1208" strokeWidth={2} />
          </div>
          <div>
            <div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 14 }}>كأس المحترفين</div>
            <div style={{ fontSize: 12, color: "var(--muted)", fontFamily: "\"IBM Plex Sans Arabic\"" }}>دُعيت كمشرف</div>
          </div>
        </div>
      </FloatingCard>
      <FloatingCard
      delay={1.5}
      style={{ bottom: "18%", left: "-40px", padding: "12px 16px" }}>
      
        <div style={{
        fontFamily: "var(--display)",
        fontSize: 10.5,
        textTransform: "uppercase",
        color: "var(--gold)",
        marginBottom: 8,
        paddingBottom: 8,
        borderBottom: "1px solid rgba(245, 239, 224, 0.08)",
        fontWeight: "800",
        letterSpacing: "0.3px"
      }}>شاهد البطولة</div>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <span className="live-dot" aria-hidden="true"></span>
          <div>
            <div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 14 }}>بث مباشر</div>
            <div style={{ fontSize: 12, color: "var(--muted)", fontFamily: "\"IBM Plex Sans Arabic\"" }}>بطولة الحارة · 16 فريق</div>
          </div>
        </div>
      </FloatingCard>
      <FloatingCard
      delay={2.8}
      style={{ top: "46%", left: "-70px", padding: "12px 16px" }}>
      
        <div style={{
        fontFamily: "var(--display)",
        fontSize: 10.5,
        textTransform: "uppercase",
        color: "var(--gold)",
        marginBottom: 8,
        paddingBottom: 8,
        borderBottom: "1px solid rgba(245, 239, 224, 0.08)",
        fontWeight: "800",
        letterSpacing: "0.3px"
      }}>إشعارات فورية</div>
        <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
          <div style={{
          width: 36, height: 36, borderRadius: 10,
          background: "rgba(58, 112, 80, 0.18)",
          border: "1px solid rgba(78, 145, 104, 0.35)",
          display: "grid", placeItems: "center",
          color: "var(--emerald-2)",
          flexShrink: 0
        }}>
            <IconBell size={18} strokeWidth={2} />
          </div>
          <div>
            <div style={{ fontFamily: "var(--display)", fontWeight: 600, fontSize: 13, lineHeight: 1.2 }}>
              انتهت المباراة
            </div>
            <div style={{ fontSize: 11.5, color: "var(--muted)", marginTop: 2, fontFamily: "\"IBM Plex Sans Arabic\"" }}>
              الأبطال <span style={{ color: "var(--gold)", fontWeight: 700 }}>162</span> · الصقور 158
            </div>
          </div>
        </div>
      </FloatingCard>
      <style>{`
        .live-dot {
          width: 10px; height: 10px; border-radius: 50%;
          background: var(--red); position: relative; flex-shrink: 0;
        }
        .live-dot::before {
          content: ""; position: absolute; inset: 0; border-radius: 50%;
          background: var(--red);
          animation: pulse-ring 1.8s ease-out infinite;
        }
      `}</style>
    </div>
  </div>;


const HeroBracket = ({ links = {} }) =>
<div className="hero-bracket-wrap">
    <div className="hero-copy hero-copy-centered reveal">
      <span className="eyebrow">منصة بطولات البلوت الأولى</span>
      <h1 className="hero-title hero-title-xl">
        <span>كل صكّة</span>
        <span className="hero-title-accent">تستحق بطولة</span>
      </h1>
      <p className="hero-sub hero-sub-centered">
        من فريقين إلى ستة عشر، أنشئ شجرة البطولة في ثوانٍ وتابع كل صكّة بدقّةٍ
        حتى الكأس.
      </p>
    </div>
    <BracketViz live={true} />
    <div className="hero-ctas hero-ctas-centered reveal" style={{ transitionDelay: "0.4s" }}>
      <a href={links.ios || "#download"} className="btn btn-primary" target="_blank" rel="noopener">
        <IconApple size={20} />
        <span>للأيفون</span>
      </a>
      <a href={links.android || "#download"} className="btn btn-ghost" target="_blank" rel="noopener">
        <IconGoogle size={20} />
        <span>للأندرويد</span>
      </a>
    </div>
  </div>;


const HeroType = ({ links = {} }) =>
<div className="hero-type">
    <div className="hero-type-deco">
      <SuitSpade size={140} fill="rgba(229, 168, 44, 0.06)" style={{ position: "absolute", top: "10%", left: "8%" }} />
      <SuitHeart size={120} fill="rgba(229, 168, 44, 0.05)" style={{ position: "absolute", top: "55%", right: "12%" }} />
      <SuitDiamond size={90} fill="rgba(229, 168, 44, 0.06)" style={{ position: "absolute", top: "70%", left: "20%" }} />
      <SuitClub size={110} fill="rgba(229, 168, 44, 0.05)" style={{ position: "absolute", top: "20%", right: "20%" }} />
    </div>
    <div className="reveal" style={{ position: "relative", zIndex: 2 }}>
      <span className="eyebrow">أبطال الصكّة</span>
      <h1 className="hero-mega">
        <span className="hero-mega-line">حنّا</span>
        <span className="hero-mega-line hero-mega-accent">أبطال</span>
        <span className="hero-mega-line">الصكّة</span>
      </h1>
      <p className="hero-sub hero-sub-centered" style={{ maxWidth: 560, margin: "32px auto 40px" }}>
        تطبيق متكامل لإدارة بطولات البلوت، من البيت إلى الديوانية إلى البطولة الكبرى.
      </p>
      <div className="hero-ctas hero-ctas-centered">
        <a href="#download" className="btn btn-primary">
          <IconArrowDown size={18} />
          <span>حمّل الآن</span>
        </a>
        <a href="#features" className="btn btn-ghost">
          <span>اكتشف المميزات</span>
        </a>
      </div>
    </div>
  </div>;


const HeroStats = () =>
<div className="hero-stats" style={{ fontFamily: "\"IBM Plex Sans Arabic\"" }}>
    {[
  { v: "+12K", l: "بطولة منظّمة" },
  { v: "+95K", l: "صكّة محسوبة" },
  { v: "4.8", l: "تقييم المستخدمين", icon: <IconStar size={14} fill="var(--gold)" stroke="var(--gold)" /> }].
  map((s, i) =>
  <div key={i} className="hero-stat">
        <div className="hero-stat-v">
          {s.icon}
          <span>{s.v}</span>
        </div>
        <div className="hero-stat-l">{s.l}</div>
      </div>
  )}
    <style>{`
      .hero-stats {
        display: flex; gap: 36px; margin-top: 40px;
        padding-top: 32px; border-top: 1px solid var(--hairline);
      }
      .hero-stat-v {
        font-family: var(--display);
        font-size: 28px; font-weight: 700;
        color: var(--cream);
        display: flex; align-items: center; gap: 6px;
      }
      .hero-stat-l {
        font-size: 13px; color: var(--muted); margin-top: 4px;
      }
      @media (max-width: 880px) {
        .hero-stats { gap: 24px; }
        .hero-stat-v { font-size: 22px; }
      }
    `}</style>
  </div>;


const Hero = ({ variant = "device", links = {} }) => {
  return (
    <section id="top" className="hero grain">
      <div className="hero-bg" aria-hidden="true">
        <div className="hero-orb hero-orb-1"></div>
        <div className="hero-orb hero-orb-2"></div>
      </div>
      <div className="container">
        {variant === "device" && <HeroDevice links={links} />}
        {variant === "bracket" && <HeroBracket links={links} />}
        {variant === "type" && <HeroType links={links} />}
      </div>
      <style>{`
        .hero {
          padding: 180px 0 120px;
          overflow: hidden;
          background: radial-gradient(ellipse at top, var(--bg-2), var(--bg) 60%);
        }
        .hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
        .hero-orb {
          position: absolute; border-radius: 50%;
          filter: blur(80px);
          opacity: 0.5;
        }
        .hero-orb-1 {
          width: 500px; height: 500px;
          background: radial-gradient(circle, var(--gold-glow), transparent 70%);
          top: -100px; right: -100px;
          animation: float 12s ease-in-out infinite;
        }
        .hero-orb-2 {
          width: 400px; height: 400px;
          background: radial-gradient(circle, var(--emerald-glow), transparent 70%);
          bottom: -50px; left: -50px;
          animation: float 14s ease-in-out infinite reverse;
        }

        .hero-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 80px;
          align-items: center;
          position: relative;
          z-index: 2;
        }
        .hero-copy { padding-block: 20px; }
        .hero-copy-centered { text-align: center; }
        .hero-title {
          font-size: clamp(48px, 6vw, 84px);
          font-weight: 700;
          margin: 24px 0 24px;
          letter-spacing: -0.02em;
        }
        .hero-title span { display: block; }
        .hero-title-accent {
          background: linear-gradient(135deg, var(--gold-2), var(--gold) 60%, var(--gold-deep));
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
          color: transparent;
        }
        .hero-title-xl { font-size: clamp(56px, 8vw, 110px); }
        .hero-sub {
          font-size: 18px;
          color: var(--muted);
          line-height: 1.8;
          max-width: 480px;
          font-weight: 300;
        }
        .hero-sub-centered { text-align: center; margin-inline: auto; max-width: 600px; }
        .hero-ctas {
          display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap;
        }
        .hero-ctas-centered { justify-content: center; }
        .hero-visual {
          position: relative;
          display: grid;
          place-items: center;
          min-height: 700px;
        }
        .hero-bracket-wrap { position: relative; z-index: 2; }

        /* Mega type variant */
        .hero-type {
          position: relative;
          text-align: center;
          padding: 40px 0 20px;
          z-index: 2;
        }
        .hero-type-deco { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
        .hero-mega {
          font-family: var(--accent-font);
          font-size: clamp(80px, 16vw, 220px);
          font-weight: 400;
          line-height: 0.88;
          letter-spacing: -0.02em;
          margin: 30px 0;
        }
        .hero-mega-line { display: block; }
        .hero-mega-accent {
          background: linear-gradient(180deg, var(--gold-2) 0%, var(--gold) 50%, var(--gold-deep) 100%);
          -webkit-background-clip: text; background-clip: text;
          -webkit-text-fill-color: transparent; color: transparent;
        }

        @media (max-width: 880px) {
          .hero { padding: 140px 0 80px; }
          .hero-grid {
            grid-template-columns: 1fr; gap: 60px;
          }
          .hero-visual { min-height: 560px; }
          .hero-sub { font-size: 16px; }
        }
      `}</style>
    </section>);

};

// ────────────────────────────────────────────────────────────────
// Features
// ────────────────────────────────────────────────────────────────
const FEATURES = [
{
  icon: IconTrophy,
  title: "إدارة البطولات",
  body: "أنشئ بطولة من 3 إلى 32 فريقاً بنقرات قليلة، عبئ معلومات الفرق وأطلق منافستك.",
  accent: "gold"
},
{
  icon: IconBracket,
  title: "قُرعة بطولة تفاعلية",
  body: "جدول مباريات تلقائي مع تحديث مباشر للمراحل، بطريقة الإقصاء.",
  accent: "emerald"
},
{
  icon: IconCalculator,
  title: "حاسبة الصكّة الذكية",
  body: "احسب النشرة بدقة ، أو أدخل النتيجة النهائية لكل مباراة بكل بساطة.",
  accent: "gold"
},
{
  icon: IconBroadcast,
  title: "بث مباشر للجمهور",
  body: "شارك رابطاً عاماً يتابع منه الأصدقاء النتائج لحظة بلحظة، بدون تسجيل دخول.",
  accent: "emerald"
},
{
  icon: IconUsers,
  title: "مشرفون متعددون",
  body: "ادعُ مشرفين لإدارة البطولة معك. كل واحد يساهم بصلاحيات واضحة ومحدّدة.",
  accent: "gold"
},
{
  icon: IconBell,
  title: "إشعارات لحظيّة",
  body: "تنبيهات فوريّة عند بدء المباراة، تغيّر النتيجة، أو إعلان الفائز — للمتابعين والمشرفين سواء.",
  accent: "emerald"
}];


const FeatureCard = ({ icon: IconCmp, title, body, accent, index }) => {
  const color = accent === "emerald" ? "var(--emerald)" : "var(--gold)";
  const glow = accent === "emerald" ? "var(--emerald-glow)" : "var(--gold-glow)";
  return (
    <div className="feature-card reveal" style={{ transitionDelay: `${index * 0.08}s` }}>
      <div className="feature-icon" style={{ "--c": color, "--g": glow }}>
        <IconCmp size={26} stroke={color} strokeWidth={1.75} />
      </div>
      <h3 className="feature-title">{title}</h3>
      <p className="feature-body" style={{ fontFamily: "\"IBM Plex Sans Arabic\"" }}>{body}</p>
      <div className="feature-corner" aria-hidden="true">
        <IconArrowLeft size={14} />
      </div>
      <style>{`
        .feature-card {
          position: relative;
          padding: 32px;
          border-radius: var(--r-lg);
          background: linear-gradient(160deg, var(--surface), var(--bg-2));
          border: 1px solid var(--hairline);
          overflow: hidden;
          transition: transform .4s var(--ease-out), border-color .3s, background .3s;
        }
        .feature-card::before {
          content: ""; position: absolute; inset: 0;
          background: radial-gradient(circle at top right, var(--g), transparent 60%);
          opacity: 0; transition: opacity .4s;
          pointer-events: none;
        }
        .feature-card:hover {
          transform: translateY(-4px);
          border-color: rgba(245, 239, 224, 0.18);
        }
        .feature-card:hover::before { opacity: 0.4; }
        .feature-card:hover .feature-corner {
          opacity: 1; transform: translate(-4px, -4px);
          background: var(--c); color: #1a1208;
        }
        .feature-icon {
          width: 56px; height: 56px;
          border-radius: 14px;
          background: rgba(245, 239, 224, 0.04);
          border: 1px solid var(--hairline-strong);
          display: grid; place-items: center;
          margin-bottom: 20px;
          color: var(--c);
          box-shadow: 0 0 0 1px var(--c) inset, 0 0 30px -10px var(--g);
        }
        .feature-title {
          font-size: 22px;
          margin: 0 0 10px;
        }
        .feature-body {
          font-size: 15px;
          color: var(--muted);
          line-height: 1.7;
        }
        .feature-corner {
          position: absolute; top: 24px; left: 24px;
          width: 32px; height: 32px;
          border-radius: 50%;
          background: rgba(245, 239, 224, 0.06);
          border: 1px solid var(--hairline);
          display: grid; place-items: center;
          color: var(--muted);
          opacity: 0;
          transition: all .3s var(--ease-out);
        }
      `}</style>
    </div>);

};

const Features = () =>
<section id="features" className="features">
    <div className="container">
      <div className="features-head reveal">
        <span className="eyebrow" style={{ fontSize: "22px", letterSpacing: "0px", fontWeight: "900" }}>المميزات</span>
        <h2 className="features-title">كل ما تحتاجه لبطولة لا تُنسى</h2>
        <p className="features-sub" style={{ fontFamily: "\"IBM Plex Sans Arabic\"" }}>من الصكّة الأولى إلى رفع الكأس — أدوات مصمَّمة خصيصاً لإنشاء وإدارة بطولات للعبة الأولى شعبيةً في الخليج.


      </p>
      </div>
      <div className="features-grid">
        {FEATURES.map((f, i) => <FeatureCard key={i} {...f} index={i} />)}
      </div>
    </div>
    <style>{`
      .features-head {
        text-align: center;
        max-width: 720px;
        margin: 0 auto 64px;
      }
      .features-title {
        font-size: clamp(36px, 5vw, 56px);
        margin: 20px 0 16px;
        letter-spacing: -0.015em;
      }
      .features-sub {
        font-size: 17px; color: var(--muted);
        line-height: 1.75;
      }
      .features-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 24px;
      }
      @media (max-width: 1080px) {
        .features-grid { grid-template-columns: repeat(2, 1fr); }
      }
      @media (max-width: 640px) {
        .features-grid { grid-template-columns: 1fr; }
      }
    `}</style>
  </section>;


// Export to window
Object.assign(window, {
  Nav, Hero, HeroDevice, HeroBracket, HeroType, HeroStats,
  PhoneMockup, FloatingCard, Features, FeatureCard, FEATURES
});