// showcase.jsx — BracketViz, Showcase section, Download, FAQ, Footer

// ────────────────────────────────────────────────────────────────
// BracketViz — animated 8-team tournament bracket
// ────────────────────────────────────────────────────────────────
// Team data + emblems
// ────────────────────────────────────────────────────────────────
const TEAMS = {
  knights: { name: "الفرسان", tone: "#c89d4a" },
  champions: { name: "الأبطال", tone: "#a87d3a" },
  tigers: { name: "النمور", tone: "#c08550" },
  legends: { name: "الأساطير", tone: "#9b7d52" },
  stars: { name: "النجوم", tone: "#c4a960" },
  challenge: { name: "التحدي", tone: "#a78050" },
  elite: { name: "النخبة", tone: "#b88543" },
  falcons: { name: "الصقور", tone: "#c89d4a" }
};

const EMBLEMS = {
  knights: <g fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round">
    <path d="M6 19c0-4 2-7 5-9 1-1 1-2 0-3-1-1 0-3 2-3 3 0 6 2 6 6 0 5-3 8-7 9z" />
    <circle cx="14" cy="6.5" r=".7" fill="currentColor" stroke="none" />
  </g>,
  champions: <g fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round">
    <path d="M12 3l7 3v5c0 5-3 8.5-7 10-4-1.5-7-5-7-10V6l7-3z" />
    <path d="M8.5 11.5 11 14l4.5-4.5" />
  </g>,
  tigers: <g fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round">
    <path d="M5 6l2 4 1-3 1 2h6l1-2 1 3 2-4-1 9c-.5 3-3 5-6 5s-5.5-2-6-5L5 6z" />
    <circle cx="10" cy="13" r=".8" fill="currentColor" stroke="none" />
    <circle cx="14" cy="13" r=".8" fill="currentColor" stroke="none" />
    <path d="M11 17h2" />
  </g>,
  legends: <g fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round">
    <path d="M3 19 5 9l4 5 3-10 3 10 4-5 2 10v2H3v-2z" />
    <circle cx="12" cy="14" r="1" fill="currentColor" stroke="none" />
  </g>,
  stars: <path d="M12 3l2.7 6.3 6.8.6-5.2 4.5 1.6 6.7L12 17.7l-5.9 3.4 1.6-6.7L2.5 9.9l6.8-.6L12 3z"
  fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" />,
  challenge: <path d="M14 3 5 14h5l-2 7 10-13h-5l1-5z"
  fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round" />,
  elite: <g fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round">
    <path d="M12 3l9 8-9 11-9-11 9-8z" />
    <path d="M3 11h18M8 11l4-8M16 11l-4-8" />
  </g>,
  falcons: <g fill="none" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round">
    <path d="M3 8c3 1 6 3 9 7 3-4 6-6 9-7l-2 8c-1 3-4 5-7 5s-6-2-7-5L3 8z" />
    <path d="M9 13c2-1 4-1 6 0" />
  </g>
};

// ────────────────────────────────────────────────────────────────
// MatchCard — single match (RTL): meta row + 2 team rows
// ────────────────────────────────────────────────────────────────
const TeamEmblem = ({ kind, empty }) => {
  if (empty) {
    return (
      <div className="team-emblem team-emblem-empty" aria-hidden="true">
        <span>؟</span>
      </div>);

  }
  return (
    <div className="team-emblem" aria-hidden="true">
      <svg viewBox="0 0 24 24" width="22" height="22">{EMBLEMS[kind]}</svg>
    </div>);

};

const TeamRow = ({ teamKey, score, winner }) => {
  const team = TEAMS[teamKey];
  const empty = !team;
  return (
    <div className={`team-row ${winner ? "team-row-win" : ""} ${empty ? "team-row-empty" : ""}`}>
      <TeamEmblem kind={teamKey} empty={empty} />
      <span className="team-name">{team ? team.name : "في الانتظار"}</span>
      <span className="team-score">{score != null ? score : "—"}</span>
    </div>);

};

const MatchCard = ({
  num, t1, s1, t2, s2, winner, status = "pending",
  isFinal = false, live = false, label, style, cardRef
}) => {
  const cls = [
  "match-card",
  `match-${status}`,
  isFinal ? "match-final" : "",
  live ? "match-live" : ""].
  filter(Boolean).join(" ");
  return (
    <div className={cls} style={style} ref={cardRef}>
      <div className="match-meta">
        <span className="match-num">
          {isFinal ? <><IconTrophy size={11} strokeWidth={2} /><span>النهائي</span></> : <span>م {num}</span>}
        </span>
        <span className={`match-dot ${live ? "match-dot-live" : ""}`}></span>
      </div>
      <TeamRow teamKey={t1} score={s1} winner={winner === 1} />
      <div className="match-sep"></div>
      <TeamRow teamKey={t2} score={s2} winner={winner === 2} />
    </div>);

};

// Kept for backward compat
const BracketMatch = MatchCard;

// ────────────────────────────────────────────────────────────────
// BracketViz — animated 8→4→2→1 knockout
// ────────────────────────────────────────────────────────────────
const QF_MATCHES = [
{ num: 1, t1: "knights", s1: 156, t2: "champions", s2: 122, winner: 1, status: "done" },
{ num: 2, t1: "tigers", s1: 162, t2: "legends", s2: 110, winner: 1, status: "done" },
{ num: 3, t1: "stars", t2: "challenge", status: "pending" },
{ num: 4, t1: "elite", t2: "falcons", status: "pending" }];


const clamp01 = (v) => Math.max(0, Math.min(1, v));

const BracketViz = ({ live = false }) => {
  const [progress, setProgress] = React.useState(0);
  const [geom, setGeom] = React.useState(null);
  const wrapRef = React.useRef(null);
  const bodyRef = React.useRef(null);
  const qfRefs = React.useRef([null, null, null, null]);
  const sfRefs = React.useRef([null, null]);
  const finalRef = React.useRef(null);

  React.useEffect(() => {
    let raf;
    let start;
    let triggered = false;
    const dur = 2800;
    const step = (t) => {
      if (!start) start = t;
      const p = Math.min(1, (t - start) / dur);
      setProgress(p);
      if (p < 1) raf = requestAnimationFrame(step);
    };
    const check = () => {
      if (triggered || !wrapRef.current) return;
      const r = wrapRef.current.getBoundingClientRect();
      const vh = window.innerHeight;
      if (r.top < vh * 0.85 && r.bottom > 0) {
        triggered = true;
        start = null;
        raf = requestAnimationFrame(step);
      }
    };
    const onScroll = () => requestAnimationFrame(check);
    check();
    const t1 = setTimeout(check, 100);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => {
      cancelAnimationFrame(raf);
      clearTimeout(t1);
      window.removeEventListener("scroll", onScroll);
    };
  }, []);

  // Measure card positions for line drawing
  React.useEffect(() => {
    const measure = () => {
      const body = bodyRef.current;
      if (!body) return;
      // Use offset* (NOT getBoundingClientRect) so transforms applied by the
      // entrance animation don't affect measured positions. Climb the
      // offsetParent chain up to bodyRef (which is position:relative).
      const local = (el) => {
        if (!el) return null;
        let left = 0,top = 0,node = el;
        while (node && node !== body) {
          left += node.offsetLeft;
          top += node.offsetTop;
          node = node.offsetParent;
        }
        const w = el.offsetWidth;
        const h = el.offsetHeight;
        return {
          left, top,
          right: left + w,
          bottom: top + h,
          cx: left + w / 2,
          cy: top + h / 2
        };
      };
      setGeom({
        w: body.offsetWidth,
        h: body.offsetHeight,
        qf: qfRefs.current.map(local),
        sf: sfRefs.current.map(local),
        final: local(finalRef.current)
      });
    };
    measure();
    const id1 = setTimeout(measure, 100);
    const id2 = setTimeout(measure, 400);
    const id3 = setTimeout(measure, 1000);
    // Re-measure once webfonts finish loading — Arabic display fonts shift
    // layout substantially after their swap.
    let fontsListener;
    if (document.fonts && document.fonts.ready) {
      fontsListener = () => measure();
      document.fonts.ready.then(fontsListener);
    }
    const ro = new ResizeObserver(measure);
    if (bodyRef.current) ro.observe(bodyRef.current);
    window.addEventListener("resize", measure);
    return () => {
      clearTimeout(id1);clearTimeout(id2);clearTimeout(id3);
      ro.disconnect();
      window.removeEventListener("resize", measure);
    };
  }, []);

  // Phase progress (each 0..1)
  const qfLines = clamp01((progress - 0.30) / 0.20);
  const sfFade = clamp01((progress - 0.45) / 0.20);
  const sfLines = clamp01((progress - 0.65) / 0.15);
  const finFade = clamp01((progress - 0.80) / 0.20);

  const cardStyle = (delay) => {
    const o = clamp01((progress - delay) / 0.18);
    return {
      opacity: o,
      transform: `translateX(${(1 - o) * 18}px) scale(${0.94 + o * 0.06})`
    };
  };

  const lineProps = (lp, status = "done") => {
    const done = status === "done";
    return {
      stroke: done ? "var(--gold)" : "var(--bracket-line-pending, #6b6b6b)",
      strokeWidth: done ? 2 : 1.75,
      strokeOpacity: done ? 0.85 * lp + 0.05 : 0.7 * lp + 0.04,
      fill: "none",
      pathLength: 1,
      strokeDasharray: 1,
      strokeDashoffset: 1 - lp,
      vectorEffect: "non-scaling-stroke",
      strokeLinecap: "round"
    };
  };

  // Build line paths from measured card positions.
  // Layout (LTR): Final (left) | SF (middle) | QF (right)
  // Lines flow: QF.left → SF.right (horizontal-vertical-horizontal)
  //             SF.left → Final.right
  const linesQF = [];
  const linesSF = [];
  // SF status mapping (matches the SF MatchCards rendered below)
  const SF_STATUS = ["done", "pending"];
  if (geom && geom.final && geom.sf[0] && geom.sf[1] && geom.qf.every(Boolean)) {
    // QF → SF: pairs 0+1 → SF[0],  pairs 2+3 → SF[1]
    const pairToSF = [0, 0, 1, 1];
    geom.qf.forEach((qf, i) => {
      const sf = geom.sf[pairToSF[i]];
      const sx = qf.left; // start at QF left edge
      const sy = qf.cy; // start at QF vertical center
      const ex = sf.right; // end at SF right edge
      const ey = sf.cy; // end at SF vertical center
      const mid = (sx + ex) / 2; // midpoint x for the bend
      linesQF.push({
        d: `M ${sx} ${sy} L ${mid} ${sy} L ${mid} ${ey} L ${ex} ${ey}`,
        status: QF_MATCHES[i].status
      });
    });
    // SF → Final
    geom.sf.forEach((sf, i) => {
      const sx = sf.left;
      const sy = sf.cy;
      const ex = geom.final.right;
      const ey = geom.final.cy;
      const mid = (sx + ex) / 2;
      linesSF.push({
        d: `M ${sx} ${sy} L ${mid} ${sy} L ${mid} ${ey} L ${ex} ${ey}`,
        status: SF_STATUS[i]
      });
    });
  }

  return (
    <div ref={wrapRef} className="bracket-viz" dir="ltr">
      {/* Column headers */}
      <div className="bracket-headers" style={{ textAlign: "center", margin: "0px 0px 27px" }}>
        <div className="bracket-header" style={{ textAlign: "left" }}>
          <span className="bracket-header-mark"></span>
          <span>النهائي</span>
        </div>
        <div className="bracket-header" style={{ textAlign: "left" }}>
          <span className="bracket-header-mark"></span>
          <span>نصف النهائي</span>
        </div>
        <div className="bracket-header">
          <span className="bracket-header-mark"></span>
          <span>ربع النهائي</span>
        </div>
      </div>

      {/* Bracket body */}
      <div className="bracket-body" ref={bodyRef}>
        {/* Single absolute SVG overlay drawing measured connector lines */}
        {geom &&
        <svg
          className="bracket-lines"
          width={geom.w}
          height={geom.h}
          viewBox={`0 0 ${geom.w} ${geom.h}`}
          style={{ position: "absolute", inset: 0, pointerEvents: "none", zIndex: 1, overflow: "visible" }}>
          
            {linesQF.map((line, i) => <path key={`qf${i}`} d={line.d} {...lineProps(qfLines, line.status)} />)}
            {linesSF.map((line, i) => <path key={`sf${i}`} d={line.d} {...lineProps(sfLines, line.status)} />)}
          </svg>
        }

        {/* Final col */}
        <div className="bracket-col bracket-col-final">
          <MatchCard
            cardRef={finalRef}
            isFinal
            t1="knights"
            t2={null}
            status="pending"
            style={{
              opacity: finFade,
              transform: `translateX(${(1 - finFade) * -18}px) scale(${0.92 + finFade * 0.08})`
            }} />
          
        </div>

        {/* SF col */}
        <div className="bracket-col bracket-col-sf">
          <MatchCard
            cardRef={(el) => sfRefs.current[0] = el}
            num={1}
            t1="knights" s1={169}
            t2="tigers" s2={36}
            winner={1} status="done"
            style={cardStyle(0.5)} />
          
          <MatchCard
            cardRef={(el) => sfRefs.current[1] = el}
            num={2}
            t1={null} t2={null}
            status="pending"
            style={cardStyle(0.58)} />
          
        </div>

        {/* QF col */}
        <div className="bracket-col bracket-col-qf">
          {QF_MATCHES.map((m, i) =>
          <MatchCard
            key={m.num}
            {...m}
            cardRef={(el) => qfRefs.current[i] = el}
            style={cardStyle(0.05 + i * 0.06)} />
          )}
        </div>
      </div>

      <style>{`
        .bracket-viz {
          --match-bg: linear-gradient(160deg, #15211b 0%, #101a14 100%);
          --match-border: rgba(78, 145, 104, 0.16);
          --match-border-done: rgba(78, 145, 104, 0.42);
          --row-win-bg: linear-gradient(90deg, rgba(229,168,44,0.18) 0%, rgba(229,168,44,0.05) 100%);
          --score-win: var(--gold-2);
          position: relative;
          padding: 8px 0 16px;
        }
        .bracket-headers {
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          column-gap: 80px;
          margin-bottom: 22px;
        }
        .bracket-header {
          display: flex; align-items: center; justify-content: center; gap: 8px;
          font-family: var(--display);
          font-size: 13px;
          font-weight: 500;
          color: var(--gold);
          letter-spacing: 0.04em;
        }
        .bracket-header-mark {
          width: 2px; height: 14px;
          background: var(--gold);
          border-radius: 1px;
        }
        .bracket-spacer { display: block; }

        .bracket-body {
          position: relative;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          column-gap: 80px;
          min-height: 540px;
        }
        .bracket-col {
          display: flex;
          flex-direction: column;
          justify-content: space-around;
          gap: 14px;
        }
        .bracket-col-final {
          justify-content: center;
          align-items: stretch;
        }
        .bracket-col-sf  { justify-content: space-around; }
        .bracket-col-qf  { justify-content: space-around; }

        .bracket-connect {
          position: relative;
          overflow: visible;
          z-index: 5;
        }
        .bracket-connect svg { display: block; overflow: visible; }

        /* ── Match card ─────────────────────────────────────── */
        .match-card {
          position: relative;
          background: var(--match-bg);
          border: 1px solid var(--match-border);
          border-radius: 14px;
          padding: 8px 12px 10px;
          transition: transform .6s var(--ease-out), opacity .5s;
          overflow: hidden;
        }
        .match-done {
          border-color: var(--match-border-done);
          box-shadow: 0 0 28px -10px rgba(78, 145, 104, 0.45);
        }
        .match-final {
          border-color: rgba(229, 168, 44, 0.55);
          box-shadow:
            0 0 0 1px rgba(229, 168, 44, 0.18) inset,
            0 0 60px -15px rgba(229, 168, 44, 0.45);
          padding-top: 10px;
        }

        .match-meta {
          display: flex; align-items: center; justify-content: space-between;
          margin: 0 2px 4px;
          font-family: var(--display);
          font-size: 11px;
          font-weight: 500;
          color: rgba(245, 239, 224, 0.45);
          letter-spacing: 0.04em;
        }
        .match-num {
          display: inline-flex; align-items: center; gap: 6px;
        }
        .match-final .match-num {
          color: var(--gold);
          font-size: 11.5px;
          letter-spacing: 0.06em;
        }
        .match-dot {
          width: 8px; height: 8px;
          border-radius: 50%;
          background: rgba(245, 239, 224, 0.18);
          flex-shrink: 0;
        }
        .match-done .match-dot {
          background: var(--emerald-2, #4e9168);
          box-shadow: 0 0 8px var(--emerald-glow);
        }
        .match-final .match-dot {
          background: var(--gold);
          box-shadow: 0 0 8px var(--gold-glow);
        }
        .match-dot-live {
          background: var(--red) !important;
          box-shadow: 0 0 0 3px rgba(224, 114, 102, 0.22) !important;
          animation: pulse-glow 1.2s ease-in-out infinite;
        }

        /* ── Team row ───────────────────────────────────────── */
        .team-row {
          display: flex; align-items: center;
          gap: 10px;
          padding: 7px 6px;
          margin: 0 -6px;
          border-radius: 8px;
          font-family: var(--display);
          font-size: 14.5px;
          color: rgba(245, 239, 224, 0.72);
          transition: color .25s;
        }
        .team-row-empty { color: rgba(245, 239, 224, 0.32); font-style: italic; }
        .team-row-win {
          background: var(--row-win-bg);
          color: var(--cream);
        }
        .team-row-win .team-score {
          color: var(--score-win);
          font-weight: 700;
        }

        .team-emblem {
          width: 28px; height: 28px;
          border-radius: 7px;
          background: #0a1410;
          border: 1px solid rgba(255, 255, 255, 0.06);
          display: grid; place-items: center;
          color: #d8c89a;
          flex-shrink: 0;
        }
        .team-row-win .team-emblem { color: #f0d99a; border-color: rgba(229, 168, 44, 0.25); }
        .team-emblem-empty {
          color: rgba(245, 239, 224, 0.3);
          font-family: var(--display);
          font-size: 14px;
          font-weight: 700;
          border-style: dashed;
        }

        .team-name {
          flex: 1;
          text-align: right;
          font-weight: 600;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        .team-score {
          font-family: var(--display);
          font-variant-numeric: tabular-nums;
          font-weight: 600;
          font-size: 16px;
          color: rgba(245, 239, 224, 0.55);
          min-width: 32px;
          text-align: left;
        }

        .match-sep {
          height: 1px;
          background: rgba(245, 239, 224, 0.05);
          margin: 0 2px;
        }

        /* ── Responsive ─────────────────────────────────────── */
        @media (max-width: 980px) {
          .bracket-headers,
          .bracket-body {
            grid-template-columns: 1fr 1fr 1fr;
            column-gap: 36px;
          }
          .match-card { padding: 6px 8px 8px; border-radius: 11px; }
          .team-row { padding: 5px 4px; margin: 0 -4px; font-size: 12px; gap: 7px; }
          .team-emblem { width: 22px; height: 22px; border-radius: 6px; }
          .team-emblem svg { width: 16px; height: 16px; }
          .team-score { font-size: 13px; min-width: 24px; }
          .match-meta { font-size: 9.5px; margin-bottom: 2px; }
          .match-dot { width: 6px; height: 6px; }
          .bracket-header { font-size: 11px; }
          .bracket-body { min-height: 400px; }
        }
      `}</style>
    </div>);

};

// ────────────────────────────────────────────────────────────────
// LiveMatchView — single-match broadcast view (mirrors the in-app screen)
// ────────────────────────────────────────────────────────────────
const LIVE_MATCH = {
  stage: "ربع النهائي · م 4",
  target: 152,
  // Right (winning) team — appears on the right in RTL.
  right: { key: "elite", name: "النخبة", score: 106, winner: true, players: "عبدالله · عادل" },
  // Left team.
  left: { key: "falcons", name: "الصقور", score: 60, winner: false, players: "عبدالعزيز · معاذ" }
};

const LiveMatchView = ({ active }) => {
  const { stage, target, right, left } = LIVE_MATCH;
  // Animate progress bars in when this view becomes active.
  const [fill, setFill] = React.useState(0);
  React.useEffect(() => {
    if (!active) {setFill(0);return;}
    const id = setTimeout(() => setFill(1), 120);
    return () => clearTimeout(id);
  }, [active]);

  const pct = (s) => Math.min(100, s / target * 100) * fill;

  return (
    <div className="live-match">
      <div className="live-match-stage">
        <div className="live-match-stage-label">{stage}</div>
        <h3 className="live-match-tournament">كأس أبطال الصكّة 2026</h3>
      </div>

      <div className="live-match-board">
        {/* RIGHT TEAM (winner) — first in source = visually right in RTL */}
        <div className="live-match-team">
          <div className={`live-match-emblem ${right.winner ? "is-win" : ""}`}>
            <svg viewBox="0 0 24 24" width="56" height="56">{EMBLEMS[right.key]}</svg>
          </div>
          <div className={`live-match-name ${right.winner ? "is-win" : ""}`}>{right.name}</div>
          <div className="live-match-players">{right.players}</div>
        </div>

        <div className="live-match-score">
          <span className={`live-match-score-num ${right.winner ? "is-win" : "is-lose"}`}>{right.score}</span>
          <span className="live-match-score-sep" aria-hidden="true">—</span>
          <span className={`live-match-score-num ${left.winner ? "is-win" : "is-lose"}`}>{left.score}</span>
        </div>

        {/* LEFT TEAM */}
        <div className="live-match-team">
          <div className={`live-match-emblem ${left.winner ? "is-win" : ""}`}>
            <svg viewBox="0 0 24 24" width="56" height="56">{EMBLEMS[left.key]}</svg>
          </div>
          <div className={`live-match-name ${left.winner ? "is-win" : ""}`}>{left.name}</div>
          <div className="live-match-players">{left.players}</div>
        </div>
      </div>

      <div className="live-match-progress">
        <div className="live-match-target">
          الهدف: <strong>{target}</strong> نقطة
        </div>
        <div className="live-match-bars">
          <div className="live-match-bar">
            <span className="live-match-bar-name">{right.name}</span>
            <div className="live-match-bar-track">
              <div
                className={`live-match-bar-fill ${right.winner ? "is-win" : "is-lose"}`}
                style={{ width: `${pct(right.score)}%` }}>
              </div>
            </div>
            <span className="live-match-bar-value">{right.score}</span>
          </div>
          <div className="live-match-bar">
            <span className="live-match-bar-name">{left.name}</span>
            <div className="live-match-bar-track">
              <div
                className={`live-match-bar-fill ${left.winner ? "is-win" : "is-lose"}`}
                style={{ width: `${pct(left.score)}%` }}>
              </div>
            </div>
            <span className="live-match-bar-value">{left.score}</span>
          </div>
        </div>
      </div>

      <style>{`
        .live-match {
          padding: 32px 12px 16px;
          display: flex; flex-direction: column;
          gap: 38px;
          min-height: 480px;
        }
        .live-match-stage {
          text-align: center;
          display: flex; flex-direction: column; gap: 10px;
          align-items: center;
        }
        .live-match-stage-label {
          font-family: var(--display);
          font-size: 13px; font-weight: 600;
          letter-spacing: 0.04em;
          color: var(--gold);
          opacity: 0.9;
        }
        .live-match-tournament {
          font-family: var(--display);
          font-size: clamp(20px, 2.2vw, 28px);
          font-weight: 700;
          margin: 0;
          color: var(--cream);
          letter-spacing: -0.01em;
        }
        .live-match-board {
          display: grid;
          grid-template-columns: 1fr auto 1fr;
          align-items: center;
          gap: clamp(20px, 4vw, 60px);
          max-width: 880px;
          margin: 0 auto;
          width: 100%;
        }
        .live-match-team {
          display: flex; flex-direction: column;
          align-items: center;
          gap: 16px;
          min-width: 0;
        }
        .live-match-emblem {
          width: 96px; height: 96px;
          border-radius: 22px;
          background: linear-gradient(160deg, #15211b 0%, #0c1410 100%);
          border: 1px solid var(--hairline-strong);
          display: grid; place-items: center;
          color: var(--cream);
          transition: all .4s var(--ease-out);
        }
        .live-match-emblem.is-win {
          border-color: rgba(229, 168, 44, 0.45);
          color: var(--gold-2);
          box-shadow:
            0 0 0 1px rgba(229, 168, 44, 0.25) inset,
            0 20px 50px -20px var(--gold-glow);
        }
        .live-match-emblem svg { width: 56px; height: 56px; }
        .live-match-name {
          font-family: var(--display);
          font-size: 22px; font-weight: 700;
          color: var(--cream);
          text-align: center;
          line-height: 1.1;
        }
        .live-match-name.is-win { color: var(--gold-2); }
        .live-match-players {
          font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
          font-size: 12.5px;
          color: var(--muted);
          letter-spacing: 0.02em;
          text-align: center;
        }
        .live-match-score {
          display: flex; align-items: center;
          gap: clamp(8px, 1.6vw, 22px);
          font-family: var(--display);
          font-weight: 800;
          line-height: 1;
        }
        .live-match-score-num {
          font-size: clamp(56px, 8vw, 108px);
          letter-spacing: -0.04em;
          transition: color .4s, text-shadow .4s;
        }
        .live-match-score-num.is-win {
          color: var(--gold);
          text-shadow:
            0 0 30px var(--gold-glow),
            0 0 60px rgba(229, 168, 44, 0.25);
        }
        .live-match-score-num.is-lose {
          color: rgba(140, 175, 152, 0.55);
        }
        .live-match-score-sep {
          font-size: clamp(40px, 6vw, 72px);
          color: rgba(245, 239, 224, 0.18);
          font-weight: 400;
        }
        .live-match-progress {
          max-width: 720px;
          width: 100%;
          margin: 0 auto;
          display: flex; flex-direction: column;
          gap: 14px;
        }
        .live-match-target {
          text-align: center;
          font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
          font-size: 13px;
          color: var(--muted);
          letter-spacing: 0.02em;
        }
        .live-match-target strong {
          color: var(--gold);
          font-weight: 700;
          margin: 0 4px;
        }
        .live-match-bars {
          display: flex; flex-direction: column;
          gap: 10px;
        }
        .live-match-bar {
          display: grid;
          grid-template-columns: 64px 1fr 44px;
          align-items: center;
          gap: 14px;
        }
        .live-match-bar-name {
          font-family: var(--display);
          font-size: 13.5px;
          color: var(--cream);
          opacity: 0.85;
          text-align: start;
        }
        .live-match-bar-track {
          position: relative;
          height: 6px;
          background: rgba(245, 239, 224, 0.05);
          border-radius: 999px;
          overflow: hidden;
        }
        .live-match-bar-fill {
          position: absolute;
          top: 0; bottom: 0;
          inset-inline-start: 0;
          border-radius: 999px;
          transition: width 1.1s var(--ease-out);
        }
        .live-match-bar-fill.is-win {
          background: linear-gradient(90deg, var(--gold-deep), var(--gold) 60%, var(--gold-2));
          box-shadow: 0 0 12px var(--gold-glow);
        }
        .live-match-bar-fill.is-lose {
          background: linear-gradient(90deg, var(--emerald-deep, #2a6347), var(--emerald, #3fa572));
        }
        .live-match-bar-value {
          font-family: var(--display);
          font-size: 12px; font-weight: 700;
          color: var(--muted);
          letter-spacing: 0.04em;
          text-align: start;
        }
        @media (max-width: 880px) {
          .live-match { padding: 20px 4px 8px; gap: 28px; min-height: 420px; }
          .live-match-emblem { width: 72px; height: 72px; border-radius: 16px; }
          .live-match-emblem svg { width: 40px; height: 40px; }
          .live-match-name { font-size: 16px; }
          .live-match-players { font-size: 11px; }
          .live-match-bar { grid-template-columns: 48px 1fr 36px; gap: 10px; }
        }
      `}</style>
    </div>);

};


// ────────────────────────────────────────────────────────────────
// Showcase section — animated bracket + live match (auto-switching)
// ────────────────────────────────────────────────────────────────
const SHOWCASE_VIEWS = [
{ id: "bracket", label: "القُرعـــة" },
{ id: "match", label: "المباراة المباشرة" }];

const SHOWCASE_AUTO_MS = 4000;


const Showcase = () => {
  const [view, setView] = React.useState("bracket");
  const [paused, setPaused] = React.useState(false);
  const [userPicked, setUserPicked] = React.useState(false);
  const frameRef = React.useRef(null);

  // Auto-switch between views every SHOWCASE_AUTO_MS — stops once the user
  // manually picks a tab (they've discovered the control by then).
  React.useEffect(() => {
    if (paused || userPicked) return;
    const id = setTimeout(() => {
      setView((cur) => {
        const idx = SHOWCASE_VIEWS.findIndex((v) => v.id === cur);
        return SHOWCASE_VIEWS[(idx + 1) % SHOWCASE_VIEWS.length].id;
      });
    }, SHOWCASE_AUTO_MS);
    return () => clearTimeout(id);
  }, [view, paused, userPicked]);

  // Pause when frame is off-screen so we don't cycle in the background.
  React.useEffect(() => {
    const el = frameRef.current;
    if (!el || !("IntersectionObserver" in window)) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (!e.isIntersecting) setPaused(true);else
        setPaused(false);
      }),
      { threshold: 0.2 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);

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


      </p>
      </div>
      <div
          className="showcase-frame reveal"
          ref={frameRef}
          onMouseEnter={() => setPaused(true)}
          onMouseLeave={() => setPaused(false)}>
        <div className="showcase-frame-head">
          <div className="showcase-frame-title">
            <SuitDiamond size={14} fill="var(--gold)" />
            <span>كأس أبطال الصكّة 2026</span>
          </div>
          <div className="showcase-tabs" role="tablist" aria-label="عرض البطولة">
            {SHOWCASE_VIEWS.map((v) =>
              <button
                key={v.id}
                role="tab"
                aria-selected={view === v.id}
                className={`showcase-tab ${view === v.id ? "is-active" : ""}`}
                onClick={() => {setView(v.id);setUserPicked(true);}}>
                {v.id === "match" && <span className="live-dot-sm" aria-hidden="true"></span>}
                <span>{v.label}</span>
              </button>
              )}
          </div>
        </div>
        <div className="showcase-views">
          <div className={`showcase-view ${view === "bracket" ? "is-active" : ""}`} aria-hidden={view !== "bracket"}>
            <BracketViz live={true} />
          </div>
          <div className={`showcase-view ${view === "match" ? "is-active" : ""}`} aria-hidden={view !== "match"}>
            <LiveMatchView active={view === "match"} />
          </div>
        </div>
      </div>
    </div>
    <style>{`
      .showcase {
        background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 60%, var(--bg) 100%);
        position: relative;
      }
      .showcase-head {
        text-align: center;
        max-width: 720px;
        margin: 0 auto 56px;
      }
      .showcase-title {
        font-size: clamp(36px, 5vw, 56px);
        margin: 20px 0 16px;
      }
      .showcase-sub { color: var(--muted); font-size: 17px; line-height: 1.75; }
      .showcase-frame {
        background: linear-gradient(160deg, var(--surface), var(--bg));
        border: 1px solid var(--hairline-strong);
        border-radius: var(--r-xl);
        padding: 30px 40px;
        position: relative;
        overflow: hidden;
        box-shadow: 0 40px 100px -30px rgba(0,0,0,0.6);
      }
      .showcase-frame::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
        background: linear-gradient(to right, transparent, var(--gold), transparent);
        opacity: 0.5;
      }
      .showcase-frame-head {
        display: flex; align-items: center; justify-content: space-between;
        margin-bottom: 16px; padding-bottom: 20px;
        border-bottom: 1px solid var(--hairline);
      }
      .showcase-frame-title {
        display: flex; align-items: center; gap: 10px;
        font-family: var(--display); font-weight: 600; font-size: 20px;
      }
      .showcase-frame-meta { display: flex; gap: 10px; align-items: center; }
      .showcase-tabs {
        display: inline-flex;
        background: rgba(245, 239, 224, 0.04);
        border: 1px solid var(--hairline);
        border-radius: 999px;
        padding: 4px;
        gap: 2px;
      }
      .showcase-tab {
        display: inline-flex; align-items: center; gap: 7px;
        padding: 7px 14px;
        border-radius: 999px;
        background: transparent;
        border: 0;
        color: var(--muted);
        font-family: var(--display);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        transition: color .25s, background .35s var(--ease-out);
        white-space: nowrap;
      }
      .showcase-tab:hover { color: var(--cream); }
      .showcase-tab.is-active {
        background: var(--gold);
        color: #1a1208;
        box-shadow: 0 8px 24px -10px var(--gold-glow);
      }
      .showcase-tab.is-active .live-dot-sm {
        background: #1a1208;
      }
      .showcase-tab .live-dot-sm {
        width: 7px; height: 7px; border-radius: 50%;
        background: var(--red);
        flex-shrink: 0;
      }
      .showcase-views {
        position: relative;
      }
      .showcase-view {
        opacity: 0;
        visibility: hidden;
        position: absolute;
        inset: 0;
        transition: opacity .55s var(--ease-out);
        pointer-events: none;
      }
      .showcase-view.is-active {
        opacity: 1;
        visibility: visible;
        position: relative;
        pointer-events: auto;
      }
      .badge-live, .badge-stage {
        display: inline-flex; align-items: center; gap: 6px;
        padding: 5px 11px; border-radius: 999px;
        font-family: var(--display); font-size: 12px; font-weight: 500;
      }
      .badge-live {
        background: rgba(224, 114, 102, 0.12);
        border: 1px solid rgba(224, 114, 102, 0.3);
        color: var(--red);
      }
      .badge-stage {
        background: rgba(229, 168, 44, 0.08);
        border: 1px solid rgba(229, 168, 44, 0.2);
        color: var(--gold);
      }
      .showcase-pills {
        display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
        margin-top: 40px;
      }
      .pill {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 10px 18px; border-radius: 999px;
        background: var(--surface);
        border: 1px solid var(--hairline);
        font-family: var(--display); font-size: 14px;
        color: var(--muted);
        transition: all .2s;
      }
      .pill:hover {
        color: var(--cream);
        border-color: var(--gold);
        transform: translateY(-2px);
      }
      @media (max-width: 880px) {
        .showcase-frame { padding: 20px 14px; }
        .showcase-frame-title { font-size: 15px; }
        .showcase-frame-head { flex-direction: column; align-items: stretch; gap: 14px; }
        .showcase-tabs { align-self: center; }
        .showcase-tab { font-size: 12px; padding: 6px 12px; }
      }
    `}</style>
  </section>);

};


// ────────────────────────────────────────────────────────────────
// Download section
// ────────────────────────────────────────────────────────────────
const Download = ({ links = {} }) =>
<section id="download" className="download grain">
    <div className="container">
      <div className="download-grid">
        <div className="download-copy reveal">
          <span className="eyebrow" style={{ fontSize: "22px", fontWeight: "900", letterSpacing: "0px" }}>حمّل الآن</span>
          <h2 className="download-title">
            بطولتك القادمة <br />
            <span className="hero-title-accent">على بُعد نقرة</span>
          </h2>
          <p className="download-sub" style={{ fontFamily: "\"IBM Plex Sans Arabic\"" }}>بدون إعلانات ، متوفر على آيفون وأندرويد.

        </p>
          <div className="download-buttons">
            <a href={links.ios || "#"} className="store-btn" target="_blank" rel="noopener">
              <IconApple size={36} />
              <div>
                <div className="store-btn-sm">حمّله من</div>
                <div className="store-btn-lg">App Store</div>
              </div>
            </a>
            <a href={links.android || "#"} className="store-btn" target="_blank" rel="noopener">
              <IconGoogle size={32} />
              <div>
                <div className="store-btn-sm">احصل عليه من</div>
                <div className="store-btn-lg">Google Play</div>
              </div>
            </a>
          </div>
          <div className="download-meta">
            <div className="download-meta-item">
              <IconCheck size={16} stroke="var(--gold)" />
              <span>بدون إعلانات</span>
            </div>
            <div className="download-meta-item">
              <IconCheck size={16} stroke="var(--gold)" />
              <span>تحكّم كامل بالبطولة</span>
            </div>
            <div className="download-meta-item">
              <IconCheck size={16} stroke="var(--gold)" />
              <span>أضف مشرفين</span>
            </div>
            <div className="download-meta-item">
              <IconCheck size={16} stroke="var(--gold)" />
              <span>شارك رابط البث المباشر</span>
            </div>
          </div>
        </div>
        <div className="download-visual reveal" style={{ transitionDelay: "0.2s" }}>
          <div className="download-phone-wrap">
            <PhoneMockup tilt={8} src="assets/app-comp.png" />
          </div>
          <div className="download-deco" aria-hidden="true">
            <SuitSpade size={70} fill="var(--gold)" style={{ position: "absolute", top: "5%", left: "10%", opacity: 0.1, animation: "float 11s ease-in-out infinite" }} />
            <SuitHeart size={60} fill="var(--gold)" style={{ position: "absolute", bottom: "20%", right: "8%", opacity: 0.1, animation: "float 13s ease-in-out 1.5s infinite reverse" }} />
            <SuitDiamond size={50} fill="var(--gold)" style={{ position: "absolute", top: "55%", left: "5%", opacity: 0.08, animation: "float 9s ease-in-out 0.8s infinite" }} />
            <SuitClub size={64} fill="var(--gold)" style={{ position: "absolute", bottom: "8%", left: "18%", opacity: 0.1, animation: "float 12s ease-in-out 2.4s infinite reverse" }} />
          </div>
        </div>
      </div>
    </div>
    <style>{`
      .download {
        background:
          radial-gradient(circle at 50% 50%, rgba(229, 168, 44, 0.08), transparent 60%),
          var(--bg-2);
        overflow: hidden;
        position: relative;
      }
      .download::before {
        content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
        background: linear-gradient(to right, transparent, var(--hairline-strong), transparent);
      }
      .download-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 80px;
        align-items: center;
      }
      .download-title {
        font-size: clamp(40px, 5.5vw, 64px);
        margin: 22px 0 18px;
        line-height: 1.05;
      }
      .download-sub { color: var(--muted); font-size: 18px; max-width: 440px; line-height: 1.7; }
      .download-buttons {
        display: flex; gap: 14px; margin-top: 32px; flex-wrap: wrap;
      }
      .store-btn {
        display: flex; align-items: center; gap: 14px;
        padding: 12px 22px 12px 18px;
        background: var(--surface);
        border: 1px solid var(--hairline-strong);
        border-radius: 14px;
        color: var(--cream);
        transition: all .25s var(--ease-out);
      }
      .store-btn:hover {
        transform: translateY(-2px);
        border-color: var(--gold);
        background: var(--surface-2);
      }
      .store-btn-sm {
        font-size: 11px; color: var(--muted);
        font-family: var(--display);
      }
      .store-btn-lg {
        font-family: var(--display);
        font-weight: 600; font-size: 18px;
        margin-top: 2px;
      }
      .download-meta {
        display: flex; gap: 24px; margin-top: 32px;
        flex-wrap: wrap;
      }
      .download-meta-item {
        display: flex; align-items: center; gap: 8px;
        font-size: 14px; color: var(--muted);
        font-family: var(--display); font-weight: 500;
      }
      .download-visual {
        position: relative;
        display: grid; place-items: center;
        min-height: 700px;
      }
      .download-phone-wrap { position: relative; z-index: 2; }
      .download-deco { position: absolute; inset: 0; z-index: 1; }

      @media (max-width: 880px) {
        .download-grid { grid-template-columns: 1fr; gap: 60px; }
        .download-visual { min-height: 540px; }
      }
    `}</style>
  </section>;


// ────────────────────────────────────────────────────────────────
// FAQ accordion
// ────────────────────────────────────────────────────────────────
const FAQ_ITEMS = [
{
  q: "هل يحتوي التطبيق على إعلانات؟",
  a: "لا، التطبيق بدون إعلانات بالكامل."
},
{
  q: "كم عدد الفرق التي يمكنني تسجيلها في البطولة الواحدة؟",
  a: "من 3 فرق كحدّ أدنى إلى 32 فريقاً. نظام يتكيّف معك سواء كنت تنظّم بطولة للأصدقاء أو بطولة كبرى."
},
{
  q: "هل أحتاج إلى تسجيل دخول لمتابعة بطولة؟",
  a: "لا، يكفي أن تشارك رابط البطولة العام مع المتابعين، يشاهدون من أي متصفح بشكل مباشر قرعة البطولة والنتائج بدون أي تسجيل."
},
{
  q: "كيف يعمل البث المباشر؟",
  a: "بمجرد بدء البطولة، يصبح هناك رابط عام يحتوي على قُرعة البطولة، النتائج اللحظية ، شاركه عبر الواتساب أو إكس مع جمهورك."
},
{
  q: "هل يمكن لأكثر من شخص إدارة البطولة؟",
  a: "نعم، يمكنك دعوة مشرفين آخرين بصلاحيات مخصصة. كل مشرف يقدر يدخل النتائج، يدير القُرعة."
}];


const FAQItem = ({ q, a, isOpen, onClick, index }) =>
<div className={`faq-item ${isOpen ? "faq-open" : ""}`} style={{ "--delay": `${index * 0.05}s` }}>
    <button className="faq-q" onClick={onClick} aria-expanded={isOpen}>
      <span>{q}</span>
      <span className="faq-icon">
        {isOpen ? <IconMinus size={20} /> : <IconPlus size={20} />}
      </span>
    </button>
    <div className="faq-a-wrap">
      <div className="faq-a" style={{ fontFamily: "\"IBM Plex Sans Arabic\"" }}>{a}</div>
    </div>
    <style>{`
      .faq-item {
        border-bottom: 1px solid var(--hairline);
        transition: background .3s;
      }
      .faq-q {
        width: 100%;
        padding: 24px 4px;
        display: flex; align-items: center; justify-content: space-between;
        font-family: var(--display);
        font-size: 19px;
        font-weight: 500;
        color: var(--cream);
        text-align: right;
        transition: color .2s;
      }
      .faq-q:hover { color: var(--gold); }
      .faq-icon {
        width: 36px; height: 36px;
        border-radius: 50%;
        background: rgba(245, 239, 224, 0.04);
        border: 1px solid var(--hairline);
        display: grid; place-items: center;
        flex-shrink: 0;
        margin-right: 16px;
        color: var(--gold);
        transition: all .3s var(--ease-out);
      }
      .faq-open .faq-icon {
        background: var(--gold);
        color: #1a1208;
        border-color: var(--gold);
        transform: rotate(180deg);
      }
      .faq-a-wrap {
        display: grid;
        grid-template-rows: 0fr;
        transition: grid-template-rows .4s var(--ease-out);
      }
      .faq-open .faq-a-wrap { grid-template-rows: 1fr; }
      .faq-a {
        overflow: hidden;
        color: var(--muted);
        font-size: 16px;
        line-height: 1.8;
        max-width: 800px;
        padding-inline-start: 4px;
      }
      .faq-open .faq-a {
        padding-bottom: 24px;
      }
    `}</style>
  </div>;


const FAQ = () => {
  const [openIdx, setOpenIdx] = React.useState(0);
  return (
    <section id="faq" className="faq">
      <div className="container" style={{ fontFamily: "\"IBM Plex Sans Arabic\"" }}>
        <div className="faq-head reveal">
          <span className="eyebrow" style={{ letterSpacing: "0.2px", fontWeight: "900", fontSize: "22px" }}>الأسئلة الشائعة</span>
          <h2 className="faq-title">كل ما تود معرفته</h2>
        </div>
        <div className="faq-list reveal">
          {FAQ_ITEMS.map((it, i) =>
          <FAQItem
            key={i}
            {...it}
            index={i}
            isOpen={openIdx === i}
            onClick={() => setOpenIdx(openIdx === i ? -1 : i)} />

          )}
        </div>
      </div>
      <style>{`
        .faq-head { text-align: center; margin-bottom: 56px; }
        .faq-title {
          font-size: clamp(36px, 5vw, 56px);
          margin: 20px 0 0;
        }
        .faq-list {
          max-width: 880px;
          margin: 0 auto;
          border-top: 1px solid var(--hairline);
        }
      `}</style>
    </section>);

};

// ────────────────────────────────────────────────────────────────
// Socials — follow us section
// ────────────────────────────────────────────────────────────────
const SocialCard = ({ icon: IconCmp, name, handle, href, index }) =>
<a href={href} target="_blank" rel="noopener" className="social-card reveal" style={{ transitionDelay: `${index * 0.1}s` }}>
    <div className="social-card-icon">
      <IconCmp size={26} />
    </div>
    <div className="social-card-text">
      <div className="social-card-name">{name}</div>
      <div className="social-card-handle" style={{ textAlign: "right" }}>{handle}</div>
    </div>
    <div className="social-card-cta" aria-hidden="true">
      <span>تابعنا</span>
      <IconArrowLeft size={14} />
    </div>
    <div className="social-card-shine" aria-hidden="true"></div>
  </a>;


const Socials = ({ links = {} }) =>
<section id="socials" className="socials">
    <div className="container">
      <div className="socials-head reveal">
        <span className="eyebrow" style={{ letterSpacing: "0px", fontWeight: "900", fontSize: "22px" }}>تابعنا</span>
        <h2 className="socials-title">
          <span className="hero-title-accent">على منصّات</span> التواصل الاجتماعي
        </h2>
        <p className="socials-sub" style={{ fontFamily: "\"IBM Plex Sans Arabic\"" }}>تحديثات التطبيق، شاركونا لحظاتكم.

      </p>
      </div>
      <div className="socials-grid">
        <SocialCard icon={IconTwitter} name="X" handle={links.xHandle || "@AlSakkah"} href={links.x || "#"} index={0} />
        <SocialCard icon={IconTikTok} name="TikTok" handle={links.tiktokHandle || "@AlSakkah"} href={links.tiktok || "#"} index={1} />
      </div>
    </div>
    <style>{`
      .socials {
        padding: 120px 0;
        background: var(--bg);
        position: relative;
        overflow: hidden;
      }
      .socials::before {
        content: "";
        position: absolute;
        inset: 0;
        background:
          radial-gradient(circle at 20% 30%, rgba(229, 168, 44, 0.05), transparent 50%),
          radial-gradient(circle at 80% 70%, rgba(58, 112, 80, 0.04), transparent 50%);
        pointer-events: none;
      }
      .socials-head {
        text-align: center;
        max-width: 640px;
        margin: 0 auto 56px;
        position: relative;
      }
      .socials-title {
        font-size: clamp(34px, 4.5vw, 52px);
        margin: 20px 0 18px;
        letter-spacing: -0.015em;
      }
      .socials-sub {
        font-size: 16px;
        color: var(--muted);
        line-height: 1.75;
      }
      .socials-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        max-width: 840px;
        margin: 0 auto;
        position: relative;
      }
      .social-card {
        position: relative;
        display: grid;
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 18px;
        padding: 22px 26px;
        border-radius: var(--r-lg);
        background: linear-gradient(160deg, var(--surface), var(--bg-2));
        border: 1px solid var(--hairline);
        color: var(--cream);
        text-decoration: none;
        overflow: hidden;
        transition:
          transform .4s var(--ease-out),
          border-color .35s,
          box-shadow .4s;
      }
      .social-card:hover {
        transform: translateY(-4px);
        border-color: rgba(229, 168, 44, 0.35);
        box-shadow:
          0 24px 60px -28px rgba(0,0,0,0.7),
          0 0 0 1px rgba(229, 168, 44, 0.08) inset,
          0 20px 50px -25px var(--gold-glow);
      }
      .social-card-icon {
        width: 54px; height: 54px;
        border-radius: 14px;
        background: rgba(245, 239, 224, 0.04);
        border: 1px solid var(--hairline-strong);
        display: grid; place-items: center;
        color: var(--cream);
        transition: all .35s var(--ease-out);
        flex-shrink: 0;
      }
      .social-card:hover .social-card-icon {
        background: var(--gold);
        border-color: var(--gold);
        color: #1a1208;
        box-shadow: 0 10px 30px -10px var(--gold-glow);
      }
      .social-card-text {
        min-width: 0;
      }
      .social-card-name {
        font-family: var(--display);
        font-size: 20px;
        font-weight: 700;
        line-height: 1.1;
        margin-bottom: 4px;
        letter-spacing: -0.01em;
      }
      .social-card-handle {
        font-family: var(--display);
        font-size: 13px;
        color: var(--muted);
        letter-spacing: 0.02em;
        direction: ltr;
        text-align: start;
      }
      .social-card-cta {
        display: inline-flex; align-items: center; gap: 8px;
        padding: 8px 14px;
        border-radius: 999px;
        background: rgba(245, 239, 224, 0.05);
        border: 1px solid var(--hairline);
        font-family: var(--display);
        font-size: 13px;
        font-weight: 600;
        color: var(--muted);
        transition: all .35s var(--ease-out);
        flex-shrink: 0;
      }
      .social-card:hover .social-card-cta {
        background: rgba(229, 168, 44, 0.12);
        border-color: rgba(229, 168, 44, 0.3);
        color: var(--gold);
      }
      .social-card-shine {
        position: absolute;
        top: -50%; left: -20%;
        width: 60%; height: 200%;
        background: linear-gradient(
          to right,
          transparent 0%,
          rgba(255,255,255,0.04) 50%,
          transparent 100%
        );
        transform: translateX(-100%) skewX(-12deg);
        transition: transform .9s var(--ease-out);
        pointer-events: none;
      }
      .social-card:hover .social-card-shine {
        transform: translateX(300%) skewX(-12deg);
      }
      @media (max-width: 720px) {
        .socials { padding: 80px 0; }
        .socials-grid { grid-template-columns: 1fr; gap: 14px; }
        .social-card { padding: 18px 20px; gap: 14px; }
        .social-card-icon { width: 48px; height: 48px; }
        .social-card-name { font-size: 17px; }
        .social-card-cta span { display: none; }
      }
    `}</style>
  </section>;


// ────────────────────────────────────────────────────────────────
// Footer
// ────────────────────────────────────────────────────────────────
const Footer = ({ links = {} }) =>
<footer className="footer">
    <div className="container">
      <div className="footer-top" style={{ fontFamily: "\"IBM Plex Sans Arabic\"" }}>
        <div className="footer-brand">
          <a href="#top" className="brand">
            <img src="assets/logo.png" alt="أبطال الصكّة" className="brand-mark" style={{ width: "52px", height: "44px", objectFit: "fill" }} />
            <span className="brand-name">أبطال الصكّة</span>
          </a>
          <p className="footer-tagline" style={{ fontFamily: "\"IBM Plex Sans Arabic\"" }}>تطبيق متخصص لإدارة بطولات البلوت، مصمَّم خصيصاً لعشّاق البلوت في المنطقة.


        </p>
          <div className="footer-socials">
            {[
          { icon: IconTwitter, href: links.x || "#", label: "X" },
          { icon: IconTikTok, href: links.tiktok || "#", label: "TikTok" }].
          map((s, i) =>
          <a key={i} href={s.href} target="_blank" rel="noopener" aria-label={s.label} className="social-btn">
                <s.icon size={18} />
              </a>
          )}
          </div>
        </div>
        <div className="footer-cols">
          <div className="footer-col">
            <div className="footer-col-title">المنتج</div>
            <a href="#features">المميزات</a>
            <a href="#showcase">بث البطولات</a>
            <a href="#faq">الأسئلة الشائعة</a>
          </div>
          <div className="footer-col">
            <div className="footer-col-title">الدعم</div>
            <a href={links.email || "mailto:support@alsakkah.app"}>تواصل معنا</a>
          </div>
          <div className="footer-col">
            <div className="footer-col-title">قانوني</div>
            <a href={links.legal || "https://alsakkah.app/legal"} target="_blank" rel="noopener">شروط الاستخدام</a>
            <a href={links.legal || "https://alsakkah.app/legal"} target="_blank" rel="noopener">سياسة الخصوصية</a>
          </div>
        </div>
      </div>
      <div className="footer-bottom">
        <span style={{ fontFamily: "\"IBM Plex Sans Arabic\"" }}>© 2026 أبطال الصكّة. صُنع بشغفٍ في السعودية.</span>
      </div>
    </div>
    <style>{`
      .footer {
        background: var(--bg-2);
        border-top: 1px solid var(--hairline);
        padding: 80px 0 32px;
      }
      .footer-top {
        display: grid;
        grid-template-columns: 1.4fr 2fr;
        gap: 80px;
        padding-bottom: 56px;
      }
      .footer-brand .brand { margin-bottom: 20px; }
      .footer-tagline {
        color: var(--muted); font-size: 15px; line-height: 1.7;
        max-width: 380px;
      }
      .footer-socials { display: flex; gap: 10px; margin-top: 24px; }
      .social-btn {
        width: 40px; height: 40px;
        border-radius: 12px;
        background: rgba(245, 239, 224, 0.04);
        border: 1px solid var(--hairline);
        display: grid; place-items: center;
        color: var(--muted);
        transition: all .2s;
      }
      .social-btn:hover {
        color: var(--gold);
        border-color: var(--gold);
        background: rgba(229, 168, 44, 0.06);
      }
      .footer-cols {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
      }
      .footer-col { display: flex; flex-direction: column; gap: 12px; }
      .footer-col-title {
        font-family: var(--display);
        font-weight: 600;
        font-size: 13px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--cream);
        margin-bottom: 8px;
      }
      .footer-col a {
        color: var(--muted);
        font-size: 14px;
        transition: color .2s;
      }
      .footer-col a:hover { color: var(--gold); }
      .footer-bottom {
        padding-top: 32px;
        border-top: 1px solid var(--hairline);
        display: flex; justify-content: space-between;
        flex-wrap: wrap; gap: 16px;
        font-size: 13px;
        color: var(--muted-2);
      }
      .footer-credit {
        display: inline-flex; align-items: center; gap: 8px;
        color: var(--muted);
        letter-spacing: 0.05em;
      }
      @media (max-width: 880px) {
        .footer-top { grid-template-columns: 1fr; gap: 48px; }
        .footer-cols { grid-template-columns: repeat(2, 1fr); gap: 32px; }
      }
    `}</style>
  </footer>;


// Export to window
Object.assign(window, {
  BracketViz, BracketMatch, Showcase, Download, FAQ, FAQItem, Socials, SocialCard, Footer
});