// Sadd — Coming Soon, Countdown, Carousel, Founder note, etc.
// Plus Arabic typeface wordmark variants.

// ───────────────────────────────────────────────────────────
// ARABIC WORDMARK · multiple typefaces
// ───────────────────────────────────────────────────────────
function ArWord({ font = 'reem', size = 220, color = '#F4EFE6', weight = 500, style }) {
  const families = {
    reem:    "'Reem Kufi', 'IBM Plex Sans Arabic', sans-serif",
    amiri:   "'Amiri', 'Newsreader', serif",
    ruqaa:   "'Aref Ruqaa', 'Amiri', serif",
    lateef:  "'Lateef', 'IBM Plex Sans Arabic', sans-serif",
    plex:    "'IBM Plex Sans Arabic', sans-serif",
  };
  return (
    <span style={{
      fontFamily: families[font] || families.reem,
      fontSize: size,
      fontWeight: weight,
      color,
      lineHeight: 1,
      direction: 'rtl',
      letterSpacing: 0,
      ...style,
    }}>سدّ</span>
  );
}

// ───────────────────────────────────────────────────────────
// CUSTOM CALLIGRAPHIC سدّ — drawn as SVG geometric Kufic
// Reads SADD: س (seen, 3 teeth) + د (dal, hook) + shaddah dot above
// Geometric/square-Kufic style — clean, modern, on-brand
// ───────────────────────────────────────────────────────────
function ArWordSquareKufic({ size = 260, color = '#F4EFE6', style }) {
  // Authored at 520x340 viewBox, then scaled
  const w = size;
  const h = size * (340 / 520);
  return (
    <svg width={w} height={h} viewBox="0 0 520 340" style={style} fill={color}>
      {/* shaddah ◌ٌ — two stacked rectangles (the shadda character) */}
      <rect x="225" y="22" width="40" height="14" rx="3" />
      <rect x="225" y="42" width="40" height="14" rx="3" />

      {/* د (dal) — right-side hook; in Arabic, reading RTL, dal is on left of seen but visually first */}
      {/* In RTL order: seen comes first (right), dal second (left) */}

      {/* س (seen) — 3 teeth on the right + baseline + bowl tail */}
      {/* baseline */}
      <rect x="38" y="240" width="370" height="32" rx="6" />
      {/* 3 teeth above the baseline (rightmost is first letter) */}
      <rect x="350" y="180" width="32" height="60" rx="6" />
      <rect x="298" y="180" width="32" height="60" rx="6" />
      <rect x="246" y="180" width="32" height="60" rx="6" />
      {/* seen tail — small downward extension on far left */}
      <path d="M 38 240 L 38 290 Q 38 308 56 308 L 100 308 L 100 272 L 70 272 L 70 240 Z" />

      {/* د (dal) — hook on the upper left */}
      <rect x="130" y="120" width="120" height="32" rx="6" />
      <rect x="218" y="120" width="32" height="120" rx="6" />
    </svg>
  );
}

// ───────────────────────────────────────────────────────────
// COMING SOON · dark warm
// ───────────────────────────────────────────────────────────
function AnnounceComingSoon() {
  return (
    <div style={{
      width: 1080, height: 1350,
      background: 'radial-gradient(120% 80% at 50% 30%, #2a2620 0%, #15130F 70%)',
      color: '#F4EFE6',
      padding: 80,
      position: 'relative',
      fontFamily: "'Inter Tight', system-ui, sans-serif",
      overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Lockup mark="aperture" size={48} color="#F4EFE6" />
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 18, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.5 }}>
          MMXXVI · Now Live
        </span>
      </div>

      {/* giant arabic centerpiece */}
      <div style={{ position: 'absolute', top: 280, left: 0, right: 0, textAlign: 'center' }}>
        <ArWord font="reem" size={420} color="#5C7A6A" style={{ opacity: 0.85 }} />
      </div>

      {/* tag */}
      <div style={{ position: 'absolute', top: 720, left: 80, right: 80, textAlign: 'center' }}>
        <div style={{
          display: 'inline-block',
          fontFamily: "'IBM Plex Mono', monospace",
          fontSize: 18, letterSpacing: '0.24em', textTransform: 'uppercase',
          padding: '14px 26px',
          border: '0.5px solid rgba(244,239,230,0.25)',
          borderRadius: 999,
          opacity: 0.85,
        }}>◆ COMING SOON</div>
      </div>

      {/* headline */}
      <div style={{ position: 'absolute', top: 800, left: 80, right: 80, textAlign: 'center' }}>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontSize: 144, lineHeight: 1.0, letterSpacing: '-0.035em', fontWeight: 500, marginTop: 32 }}>
          Sadd is<br />
          <span style={{ fontStyle: 'italic', color: '#A8C0B4' }}>almost here.</span>
        </div>
      </div>

      {/* footer */}
      <div style={{ position: 'absolute', left: 80, right: 80, bottom: 80, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontStyle: 'italic', fontSize: 26, opacity: 0.65, maxWidth: 580, lineHeight: 1.4 }}>
          A barrier between you and the scroll.<br />
          Download now · link in bio.
        </div>
        <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 18, letterSpacing: '0.04em' }}>sadd.app</div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// COUNTDOWN · "3 days to launch"
// 1080×1350 portrait, parchment
// ───────────────────────────────────────────────────────────
function AnnounceCountdown({ days = 3 }) {
  return (
    <div style={{
      width: 1080, height: 1350,
      background: '#F4EFE6',
      color: '#11141A',
      padding: 80,
      position: 'relative',
      fontFamily: "'Inter Tight', system-ui, sans-serif",
      overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Lockup mark="aperture" size={48} color="#11141A" />
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 18, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.55 }}>
          ◆ Countdown
        </span>
      </div>

      {/* big stat number */}
      <div style={{ position: 'absolute', top: 240, left: 80, right: 80, textAlign: 'center' }}>
        <div style={{
          fontFamily: "'Newsreader', Georgia, serif",
          fontSize: 640, lineHeight: 0.85,
          letterSpacing: '-0.045em', fontWeight: 500,
          color: '#5C7A6A',
        }}>{days}</div>
        <div style={{
          fontFamily: "'IBM Plex Mono', monospace",
          fontSize: 30, letterSpacing: '0.30em', textTransform: 'uppercase',
          marginTop: 24, opacity: 0.6,
        }}>DAYS</div>
      </div>

      {/* subhead */}
      <div style={{ position: 'absolute', left: 80, right: 80, bottom: 280, textAlign: 'center' }}>
        <div style={{
          fontFamily: "'Newsreader', Georgia, serif",
          fontStyle: 'italic',
          fontSize: 52, lineHeight: 1.2, letterSpacing: '-0.02em',
        }}>
          until the barrier<br />
          goes up.
        </div>
      </div>

      {/* small arabic seal */}
      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 180, textAlign: 'center' }}>
        <ArWord font="reem" size={64} color="#11141A" style={{ opacity: 0.4 }} />
      </div>

      {/* footer */}
      <div style={{ position: 'absolute', left: 80, right: 80, bottom: 80, display: 'flex', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.55 }}>
          Download · link in bio
        </span>
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, letterSpacing: '0.04em' }}>sadd.app</span>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// DOWNLOAD CTA · sage ground, bold
// ───────────────────────────────────────────────────────────
function AnnounceDownload() {
  return (
    <div style={{
      width: 1080, height: 1350,
      background: '#5C7A6A',
      color: '#F4EFE6',
      padding: 80,
      position: 'relative',
      fontFamily: "'Inter Tight', system-ui, sans-serif",
      overflow: 'hidden',
    }}>
      {/* background arabic */}
      <div style={{ position: 'absolute', bottom: -100, left: -40, opacity: 0.10, pointerEvents: 'none' }}>
        <ArWord font="amiri" size={780} color="#F4EFE6" />
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Lockup mark="aperture" size={48} color="#F4EFE6" />
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 18, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.7 }}>
          ◆ Now available
        </span>
      </div>

      <div style={{ position: 'absolute', left: 80, top: 220, right: 80 }}>
        <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 18, letterSpacing: '0.20em', textTransform: 'uppercase', opacity: 0.7, marginBottom: 24 }}>
          ◇ FREE ON THE APP STORE
        </div>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontSize: 168, lineHeight: 0.95, letterSpacing: '-0.04em', fontWeight: 500 }}>
          Try it.<br />
          <span style={{ fontStyle: 'italic', opacity: 0.85 }}>Trust it.</span>
        </div>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontStyle: 'italic', fontSize: 30, opacity: 0.85, lineHeight: 1.45, marginTop: 36, maxWidth: 640 }}>
          We need you. Especially the version of you who has already tried to outsmart every screen-time app on the market.
        </div>
      </div>

      {/* CTA */}
      <div style={{ position: 'absolute', left: 80, right: 80, bottom: 200 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 24,
          padding: '28px 44px',
          background: '#F4EFE6', color: '#11141A',
          borderRadius: 999,
          fontFamily: "'Inter Tight', sans-serif",
          fontSize: 30, fontWeight: 500, letterSpacing: '-0.01em',
        }}>
          <span>Get the app</span>
          <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 22, opacity: 0.6 }}>→</span>
        </div>
      </div>

      {/* footer */}
      <div style={{ position: 'absolute', left: 80, right: 80, bottom: 80, display: 'flex', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 16, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.7 }}>
          App Store · iOS 18+
        </span>
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 16, letterSpacing: '0.04em', opacity: 0.85 }}>sadd.app</span>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// FOUNDER NOTE · long-form first-person letter
// 1080×1350 parchment, serif-heavy
// ───────────────────────────────────────────────────────────
function AnnounceFounder() {
  return (
    <div style={{
      width: 1080, height: 1350,
      background: '#ECE5D6',
      color: '#11141A',
      padding: 96,
      position: 'relative',
      fontFamily: "'Inter Tight', system-ui, sans-serif",
      overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 56 }}>
        <Lockup mark="aperture" size={40} color="#11141A" />
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.55 }}>
          ◆ From the founders
        </span>
      </div>

      <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontSize: 56, lineHeight: 1.05, letterSpacing: '-0.03em', fontWeight: 500, marginBottom: 36 }}>
        Bismillāh.
      </div>

      <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontSize: 26, lineHeight: 1.55, letterSpacing: '-0.005em', maxWidth: 880 }}>
        <p style={{ margin: '0 0 24px' }}>
          We started Sadd because we hated who we became <span style={{ fontStyle: 'italic' }}>after</span> an hour on Instagram. Tired. Distracted. Quietly ashamed.
        </p>
        <p style={{ margin: '0 0 24px' }}>
          The apps that promised to help us spoke a language we couldn't keep up with — "limit", "block", "discipline". Words from the gym, not the masjid.
        </p>
        <p style={{ margin: 0 }}>
          So we built one that speaks ours. <span style={{ fontStyle: 'italic', color: '#5C7A6A' }}>Niyyah, kaffārah, sadaqah, muḥāsaba.</span> Old verbs, new tool.
        </p>
      </div>

      <div style={{ position: 'absolute', left: 96, right: 96, bottom: 96, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <div>
          <div style={{ fontFamily: "'Aref Ruqaa', 'Amiri', serif", fontSize: 30, fontStyle: 'italic' }}>— Asjad &amp; Dua</div>
          <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.55, marginTop: 8 }}>
            FOUNDERS · HATTIESBURG
          </div>
        </div>
        <ArWord font="ruqaa" size={64} color="#11141A" style={{ opacity: 0.35 }} />
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// CAROUSEL — 4 cards meant as IG carousel (1080×1350 each)
// ───────────────────────────────────────────────────────────
function CarouselCard({ idx, eyebrow, headline, body, bg = '#F4EFE6', fg = '#11141A', total = 4 }) {
  return (
    <div style={{
      width: 1080, height: 1350,
      background: bg, color: fg,
      padding: 80,
      position: 'relative',
      fontFamily: "'Inter Tight', system-ui, sans-serif",
      overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Lockup mark="aperture" size={40} color={fg} />
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 16, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.55 }}>
          {String(idx).padStart(2,'0')} / {String(total).padStart(2,'0')}
        </span>
      </div>

      <div style={{ position: 'absolute', left: 80, right: 80, top: 240 }}>
        <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 18, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.55, marginBottom: 32 }}>
          ◆ {eyebrow}
        </div>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontSize: 108, lineHeight: 0.98, letterSpacing: '-0.035em', fontWeight: 500 }}>
          {headline}
        </div>
      </div>

      <div style={{ position: 'absolute', left: 80, right: 80, bottom: 200, fontFamily: "'Newsreader', Georgia, serif", fontStyle: 'italic', fontSize: 32, lineHeight: 1.45, opacity: 0.8, maxWidth: 880 }}>
        {body}
      </div>

      <div style={{ position: 'absolute', left: 80, right: 80, bottom: 80, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.55 }}>
          {idx < total ? 'Swipe →' : 'Tap the link in bio'}
        </span>
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, letterSpacing: '0.04em' }}>sadd.app</span>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// APP STORE POST · screenshot showcase
// ───────────────────────────────────────────────────────────
function AnnounceAppStore() {
  return (
    <div style={{
      width: 1080, height: 1350,
      background: '#11141A',
      color: '#F4EFE6',
      padding: 80,
      position: 'relative',
      fontFamily: "'Inter Tight', system-ui, sans-serif",
      overflow: 'hidden',
    }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Lockup mark="aperture" size={48} color="#F4EFE6" />
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 16, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.55 }}>
          ◆ Available now
        </span>
      </div>

      {/* 3-phone diorama */}
      <div style={{ position: 'absolute', top: 200, left: 0, right: 0, display: 'flex', justifyContent: 'center', gap: 24 }}>
        <div style={{ width: 280, height: 600, borderRadius: 40, background: '#1B1F26', padding: 28, paddingTop: 50, color: '#F4EFE6', transform: 'rotate(-6deg) translateY(20px)', border: '6px solid #2A2620' }}>
          <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, letterSpacing: '0.18em', opacity: 0.55 }}>◆ NIYYAH</div>
          <div style={{ fontFamily: "'Newsreader', serif", fontSize: 28, marginTop: 14, lineHeight: 1.1 }}>Why are you opening Instagram?</div>
          <div style={{ marginTop: 24, padding: 16, background: 'rgba(244,239,230,0.04)', borderRadius: 10, border: '0.5px solid rgba(244,239,230,0.12)', minHeight: 140 }}>
            <div style={{ fontFamily: "'Newsreader', serif", fontStyle: 'italic', color: '#A8C0B4', fontSize: 15, lineHeight: 1.4 }}>
              To reply to my cousin's wedding photo.
            </div>
          </div>
        </div>

        <div style={{ width: 280, height: 600, borderRadius: 40, background: '#5C7A6A', padding: 28, paddingTop: 50, color: '#F4EFE6', border: '6px solid #4A6557' }}>
          <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, letterSpacing: '0.18em', opacity: 0.7 }}>◆ SADAQAH</div>
          <div style={{ fontFamily: "'Newsreader', serif", fontSize: 64, textAlign: 'center', marginTop: 80, letterSpacing: '-0.03em' }}>$3.00</div>
          <div style={{ fontFamily: "'Newsreader', serif", fontStyle: 'italic', fontSize: 14, textAlign: 'center', opacity: 0.8, marginTop: 12 }}>to ICNA Relief USA</div>
          <div style={{ height: 0.5, background: 'rgba(244,239,230,0.2)', margin: '24px 0' }} />
          <div style={{ fontFamily: "'Newsreader', serif", fontStyle: 'italic', fontSize: 18, textAlign: 'center', opacity: 0.85, marginTop: 32, lineHeight: 1.4 }}>
            May Allah accept this from you.
          </div>
        </div>

        <div style={{ width: 280, height: 600, borderRadius: 40, background: '#F4EFE6', padding: 28, paddingTop: 50, color: '#11141A', transform: 'rotate(6deg) translateY(20px)', border: '6px solid #ECE5D6' }}>
          <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 10, letterSpacing: '0.18em', opacity: 0.55 }}>◆ AL-MULK · 67:1</div>
          <div style={{ fontFamily: "'IBM Plex Sans Arabic', sans-serif", fontSize: 26, direction: 'rtl', lineHeight: 2, textAlign: 'right', marginTop: 18 }}>
            تَبَارَكَ ٱلَّذِى بِيَدِهِ ٱلْمُلْكُ
          </div>
          <div style={{ fontFamily: "'Newsreader', serif", fontStyle: 'italic', fontSize: 14, opacity: 0.7, marginTop: 16, lineHeight: 1.4 }}>
            Blessed is He in whose hand is dominion.
          </div>
        </div>
      </div>

      <div style={{ position: 'absolute', left: 80, right: 80, bottom: 240, textAlign: 'center' }}>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontSize: 80, lineHeight: 1.0, letterSpacing: '-0.03em', fontWeight: 500 }}>
          Now on the App Store.
        </div>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontStyle: 'italic', fontSize: 28, opacity: 0.65, marginTop: 18 }}>
          Download free, today.
        </div>
      </div>

      <div style={{ position: 'absolute', left: 0, right: 0, bottom: 80, display: 'flex', justifyContent: 'center', gap: 16 }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 12,
          padding: '14px 24px', borderRadius: 10,
          background: '#F4EFE6', color: '#11141A',
          fontFamily: "'Inter Tight', sans-serif", fontSize: 18, fontWeight: 500,
        }}>
          <span style={{ fontSize: 24 }}></span>
          <div style={{ lineHeight: 1.1, textAlign: 'left' }}>
            <div style={{ fontSize: 11, opacity: 0.6 }}>Download on the</div>
            <div style={{ fontWeight: 600 }}>App Store</div>
          </div>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// RAMADAN tie-in · "30 days. 5 prayers. 1 barrier."
// ───────────────────────────────────────────────────────────
function AnnounceRamadan() {
  return (
    <div style={{
      width: 1080, height: 1350,
      background: 'linear-gradient(180deg, #2C3340 0%, #5C7A6A 100%)',
      color: '#F4EFE6',
      padding: 80,
      position: 'relative',
      fontFamily: "'Inter Tight', system-ui, sans-serif",
      overflow: 'hidden',
    }}>
      {/* crescent ornament */}
      <div style={{ position: 'absolute', top: 120, right: 80, opacity: 0.5 }}>
        <svg width="160" height="160" viewBox="0 0 160 160">
          <path d="M 80 20 A 60 60 0 1 0 80 140 A 45 60 0 1 1 80 20 Z" fill="#F4EFE6" opacity="0.85"/>
        </svg>
      </div>

      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <Lockup mark="aperture" size={48} color="#F4EFE6" />
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 16, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.55 }}>
          ◆ Ramadan 1448
        </span>
      </div>

      <div style={{ position: 'absolute', left: 80, top: 320, right: 80 }}>
        <div style={{ fontFamily: "'Aref Ruqaa', 'Amiri', serif", fontSize: 100, lineHeight: 1.0, fontWeight: 700, fontStyle: 'italic' }}>
          Ramadan mode
        </div>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontSize: 200, lineHeight: 0.92, letterSpacing: '-0.04em', fontWeight: 500, marginTop: 8 }}>
          arrives soon.
        </div>
      </div>

      <div style={{ position: 'absolute', left: 80, right: 80, bottom: 240, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
        {[
          { n: 30, l: 'DAYS' },
          { n: 5,  l: 'PRAYERS' },
          { n: 1,  l: 'BARRIER' },
        ].map((s, i) => (
          <div key={i} style={{
            padding: 28, borderRadius: 18,
            background: 'rgba(244,239,230,0.10)',
            border: '0.5px solid rgba(244,239,230,0.20)',
          }}>
            <div style={{ fontFamily: "'Newsreader', serif", fontSize: 96, lineHeight: 1, fontWeight: 500, letterSpacing: '-0.03em' }}>{s.n}</div>
            <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.7, marginTop: 8 }}>{s.l}</div>
          </div>
        ))}
      </div>

      <div style={{ position: 'absolute', left: 80, right: 80, bottom: 80, display: 'flex', justifyContent: 'space-between' }}>
        <span style={{ fontFamily: "'Newsreader', serif", fontStyle: 'italic', fontSize: 22, opacity: 0.85 }}>
          Limited Clay app icon. New tahajjud helper. Group iftar khatm.
        </span>
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, letterSpacing: '0.04em' }}>sadd.app</span>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// PROFILE / BANNER · 1500×500 (Twitter banner), 1080×566 (LinkedIn)
// We'll do 1500×500
// ───────────────────────────────────────────────────────────
function AnnounceBanner() {
  return (
    <div style={{
      width: 1500, height: 500,
      background: 'radial-gradient(120% 80% at 30% 50%, #2a2620 0%, #15130F 70%)',
      color: '#F4EFE6',
      padding: 64,
      position: 'relative',
      fontFamily: "'Inter Tight', system-ui, sans-serif",
      overflow: 'hidden',
    }}>
      <div style={{ position: 'absolute', right: -20, top: -80, opacity: 0.10 }}>
        <ArWord font="reem" size={620} color="#5C7A6A" />
      </div>

      <div style={{ position: 'absolute', left: 64, top: 64 }}>
        <Lockup mark="aperture" size={56} color="#F4EFE6" sub="THE BARRIER" />
      </div>

      <div style={{ position: 'absolute', left: 64, bottom: 56, right: 64 }}>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontSize: 72, lineHeight: 1.0, letterSpacing: '-0.03em', fontWeight: 500, maxWidth: 1000 }}>
          A barrier between you and the scroll.
        </div>
        <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.55, marginTop: 18 }}>
          ◆ PHONE DISCIPLINE &amp; QURAN COMPANION · IOS · 2026
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  ArWord, ArWordSquareKufic,
  AnnounceComingSoon, AnnounceCountdown, AnnounceDownload, AnnounceFounder,
  CarouselCard, AnnounceAppStore, AnnounceRamadan, AnnounceBanner,
});