// Sadd — Social Announcement Templates
// 1080x1350 (IG portrait) and 1080x1080 (IG square) artboards

// ───────────────────────────────────────────────────────────
// LAUNCH ANNOUNCEMENT — "Sadd is here"
// 1080x1350 portrait, sage ground, big serif headline
// ───────────────────────────────────────────────────────────
function AnnounceLaunch() {
  return (
    <div style={{
      width: 1080, height: 1350,
      background: '#1A1815',
      color: '#F4EFE6',
      padding: 80,
      position: 'relative',
      fontFamily: "'Inter Tight', system-ui, sans-serif",
      overflow: 'hidden',
    }}>
      {/* top eyebrow */}
      <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 · ISSUE 01
        </span>
      </div>

      {/* big arabic */}
      <div style={{ position: 'absolute', top: 220, right: 80, opacity: 0.10,
        fontFamily: "'IBM Plex Sans Arabic', sans-serif", fontSize: 540, lineHeight: 1, color: '#5C7A6A',
        userSelect: 'none', pointerEvents: 'none' }}>
        سدّ
      </div>

      {/* headline */}
      <div style={{ position: 'absolute', left: 80, bottom: 340, right: 80 }}>
        <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 18, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.55, marginBottom: 32 }}>
          ◆ Launching on iOS
        </div>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontSize: 132, lineHeight: 0.95, letterSpacing: '-0.035em', fontWeight: 500 }}>
          A barrier<br />
          between you<br />
          and the scroll.
        </div>
      </div>

      {/* bottom */}
      <div style={{ position: 'absolute', left: 80, bottom: 80, right: 80, display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end' }}>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontStyle: 'italic', fontSize: 28, maxWidth: 600, opacity: 0.7, lineHeight: 1.4 }}>
          Phone discipline & Quran companion.<br />
          Built for Muslims who want their time back.
        </div>
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-end', gap: 6 }}>
          <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.5 }}>App Store</span>
          <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 18, letterSpacing: '0.04em' }}>sadd.app</span>
        </div>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// FEATURE — The Niyyah Gate
// 1080x1350 portrait, parchment ground
// ───────────────────────────────────────────────────────────
function AnnounceNiyyah() {
  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: 16, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.55 }}>
          Feature · 02
        </span>
      </div>

      <div style={{ marginTop: 120 }}>
        <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 18, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.5, marginBottom: 32 }}>
          ◆ The Niyyah Gate
        </div>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontSize: 108, lineHeight: 1.0, letterSpacing: '-0.035em', fontWeight: 500 }}>
          Type your intention.<br />
          <span style={{ fontStyle: 'italic', opacity: 0.6 }}>Or close the app.</span>
        </div>
      </div>

      {/* mock typing box */}
      <div style={{ position: 'absolute', left: 80, right: 80, bottom: 220, padding: 36,
        background: '#fff',
        border: '0.5px solid rgba(17,20,26,0.12)',
        borderRadius: 24,
      }}>
        <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.45, marginBottom: 18 }}>
          Why are you opening Instagram?
        </div>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontStyle: 'italic', fontSize: 38, lineHeight: 1.35, color: '#5C7A6A' }}>
          To reply to my cousin's wedding photo — then I close it.
          <span style={{ display: 'inline-block', width: 2, height: 30, background: '#5C7A6A', verticalAlign: 'middle', marginLeft: 4 }} />
        </div>
        <div style={{ marginTop: 24, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, letterSpacing: '0.08em', opacity: 0.5 }}>
          <span>72 / 60 CH</span>
          <span>↵ PROCEED · 5 MIN</span>
        </div>
      </div>

      <div style={{ position: 'absolute', left: 80, bottom: 80, right: 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 }}>
          Friction by design.
        </span>
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, letterSpacing: '0.04em' }}>sadd.app</span>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// FEATURE — Kaffarah / Charity
// 1080x1350 portrait, ink ground
// ───────────────────────────────────────────────────────────
function AnnounceKaffarah() {
  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.16em', textTransform: 'uppercase', opacity: 0.55 }}>
          Feature · 03
        </span>
      </div>

      <div style={{ marginTop: 140 }}>
        <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 18, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.55, marginBottom: 36 }}>
          ◆ Sadaqah · every bypass, a gift
        </div>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontSize: 116, lineHeight: 0.96, letterSpacing: '-0.035em', fontWeight: 500 }}>
          Every bypass<br />
          becomes<br />
          <span style={{ color: '#A8C0B4' }}>a charity.</span>
        </div>
      </div>

      {/* receipt mock */}
      <div style={{ position: 'absolute', right: 80, bottom: 230, width: 480, padding: 32,
        background: 'rgba(244,239,230,0.04)',
        border: '0.5px solid rgba(244,239,230,0.14)',
        borderRadius: 20,
      }}>
        <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.5, marginBottom: 18 }}>
          ◇ RECEIPT — 12 RAJAB
        </div>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 10, fontSize: 22 }}>
          <span style={{ opacity: 0.6 }}>Instagram bypass</span>
          <span style={{ fontFamily: "'IBM Plex Mono', monospace" }}>$3.00</span>
        </div>
        <div style={{ height: '0.5px', background: 'rgba(244,239,230,0.18)', margin: '14px 0' }} />
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6, fontSize: 22 }}>
          <span>ICNA Relief USA</span>
          <span style={{ fontFamily: "'IBM Plex Mono', monospace" }}>$3.00</span>
        </div>
        <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 12, letterSpacing: '0.08em', opacity: 0.5, marginTop: 16 }}>
          LOGGED · VIA STRIPE ✓
        </div>
      </div>

      <div style={{ position: 'absolute', left: 80, bottom: 80, right: 80, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <span style={{ fontFamily: "'Newsreader', Georgia, serif", fontStyle: 'italic', fontSize: 24, opacity: 0.7, maxWidth: 480 }}>
          You lose nothing. Someone else gains.
        </span>
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, letterSpacing: '0.04em' }}>sadd.app</span>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// QUOTE CARD — Surah / hadith style
// 1080x1080 square, sage ground
// ───────────────────────────────────────────────────────────
function AnnounceQuote() {
  return (
    <div style={{
      width: 1080, height: 1080,
      background: '#5C7A6A',
      color: '#F4EFE6',
      padding: 96,
      position: 'relative',
      fontFamily: "'Inter Tight', system-ui, sans-serif",
      overflow: 'hidden',
    }}>
      {/* corner ornament */}
      <div style={{ position: 'absolute', top: 64, right: 64, opacity: 0.32 }}>
        <MarkAperture size={56} fg="#F4EFE6" stroke={6} />
      </div>

      <div style={{ position: 'absolute', top: 96, left: 96, fontFamily: "'IBM Plex Mono', monospace", fontSize: 16, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.6 }}>
        ◆ AL-KAHF · 18:94
      </div>

      <div style={{ position: 'absolute', top: 220, left: 96, right: 96, fontFamily: "'IBM Plex Sans Arabic', sans-serif", fontSize: 64, lineHeight: 1.6, textAlign: 'right', direction: 'rtl', opacity: 0.9 }}>
        فَهَلْ نَجْعَلُ لَكَ خَرْجًا عَلَىٰ أَن تَجْعَلَ بَيْنَنَا وَبَيْنَهُمْ سَدًّا
      </div>

      <div style={{ position: 'absolute', bottom: 200, left: 96, right: 96, fontFamily: "'Newsreader', Georgia, serif", fontStyle: 'italic', fontSize: 38, lineHeight: 1.35, opacity: 0.85, fontWeight: 400 }}>
        "Shall we pay you a tribute so that you might erect a <span style={{ background: 'rgba(244,239,230,0.18)', padding: '0 6px', borderRadius: 4, fontStyle: 'normal' }}>barrier</span> between us and them?"
      </div>

      <div style={{ position: 'absolute', left: 96, bottom: 96, right: 96, display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, letterSpacing: '0.14em', textTransform: 'uppercase', opacity: 0.65 }}>
        <span>Sadd · the barrier</span>
        <span>sadd.app</span>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// STAT CARD — minute reclaimed
// 1080x1080 square
// ───────────────────────────────────────────────────────────
function AnnounceStat() {
  return (
    <div style={{
      width: 1080, height: 1080,
      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={44} color="#11141A" />
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.55 }}>
          WEEK 12
        </span>
      </div>

      <div style={{ position: 'absolute', left: 80, top: 220 }}>
        <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 16, letterSpacing: '0.16em', textTransform: 'uppercase', opacity: 0.55, marginBottom: 24 }}>
          ◆ COLLECTIVELY, IN 12 WEEKS
        </div>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontSize: 280, lineHeight: 0.9, letterSpacing: '-0.04em', fontWeight: 500, color: '#5C7A6A' }}>
          2,847
        </div>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontSize: 56, lineHeight: 1.1, marginTop: 12, fontStyle: 'italic' }}>
          hours reclaimed.
        </div>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontSize: 56, lineHeight: 1.1, fontStyle: 'italic' }}>
          $11,392 to sadaqah.
        </div>
      </div>

      <div style={{ position: 'absolute', left: 80, bottom: 80, right: 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 }}>
          From 1,400 muslims who tried Sadd.
        </span>
        <span style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 14, letterSpacing: '0.04em' }}>sadd.app</span>
      </div>
    </div>
  );
}

// ───────────────────────────────────────────────────────────
// STORY — vertical 1080x1920 for IG stories
// ───────────────────────────────────────────────────────────
function AnnounceStory() {
  return (
    <div style={{
      width: 1080, height: 1920,
      background: 'radial-gradient(120% 80% at 50% 0%, #232019 0%, #15130F 60%)',
      color: '#F4EFE6',
      padding: 80,
      position: 'relative',
      fontFamily: "'Inter Tight', system-ui, sans-serif",
      overflow: 'hidden',
    }}>
      {/* App icon centerpiece */}
      <div style={{ position: 'absolute', top: 380, left: '50%', transform: 'translateX(-50%)' }}>
        <AppIcon size={340} variant="sage" />
      </div>

      {/* tagline */}
      <div style={{ position: 'absolute', top: 820, left: 80, right: 80, textAlign: 'center' }}>
        <div style={{ fontFamily: "'IBM Plex Mono', monospace", fontSize: 18, letterSpacing: '0.18em', textTransform: 'uppercase', opacity: 0.55, marginBottom: 32 }}>
          ◆ NOW ON THE APP STORE
        </div>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontSize: 96, lineHeight: 1.0, letterSpacing: '-0.035em', fontWeight: 500 }}>
          Sadd
        </div>
        <div style={{ fontFamily: "'Newsreader', Georgia, serif", fontStyle: 'italic', fontSize: 40, lineHeight: 1.35, opacity: 0.65, marginTop: 24, maxWidth: 720, margin: '24px auto 0' }}>
          A barrier between you and the scroll.
          Built for Muslims.
        </div>
      </div>

      {/* CTA */}
      <div style={{ position: 'absolute', bottom: 200, left: 80, right: 80, textAlign: 'center' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 16,
          padding: '24px 48px',
          background: '#F4EFE6', color: '#11141A',
          borderRadius: 999,
          fontFamily: "'Inter Tight', sans-serif",
          fontSize: 32, fontWeight: 500, letterSpacing: '-0.01em',
        }}>
          Get the app &nbsp;→
        </div>
      </div>

      <div style={{ position: 'absolute', bottom: 80, left: 0, right: 0, textAlign: 'center', fontFamily: "'IBM Plex Mono', monospace", fontSize: 18, letterSpacing: '0.16em', opacity: 0.55 }}>
        sadd.app
      </div>
    </div>
  );
}

Object.assign(window, {
  AnnounceLaunch, AnnounceNiyyah, AnnounceKaffarah, AnnounceQuote, AnnounceStat, AnnounceStory,
});
