// SVG illustrations for the wedding invitation
// All pure-SVG so no external assets needed

// ─── Bismillah ornament ───────────────────────────────
function Bismillah({ color = '#b8945a', width = 180 }) {
  return (
    <div style={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
      <svg viewBox="0 0 300 50" width={width} style={{ display: 'block' }}>
        {/* decorative arabic-style bracket ornaments */}
        <g fill={color} opacity="0.9">
          <path d="M 18 25 Q 8 18 4 25 Q 8 32 18 25 Z" />
          <path d="M 282 25 Q 292 18 296 25 Q 292 32 282 25 Z" />
        </g>
        <line x1="22" y1="25" x2="60" y2="25" stroke={color} strokeWidth="0.6" opacity="0.55" />
        <line x1="240" y1="25" x2="278" y2="25" stroke={color} strokeWidth="0.6" opacity="0.55" />
        <text
          x="150"
          y="34"
          textAnchor="middle"
          fontFamily="'Amiri Quran', 'Amiri', serif"
          fontSize="26"
          fill={color}
          style={{ direction: 'rtl' }}
        >بِسْمِ اللهِ الرَّحْمٰنِ الرَّحِيْمِ</text>
      </svg>
    </div>
  );
}

// ─── Twilight Gazebo scene ────────────────────────────
function GazeboScene({ style = {} }) {
  return (
    <svg viewBox="0 0 400 700" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%', display: 'block', ...style }}>
      <defs>
        <linearGradient id="sky" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#3a4a63" />
          <stop offset="35%" stopColor="#6a7a92" />
          <stop offset="60%" stopColor="#a4a3b6" />
          <stop offset="78%" stopColor="#c5a89e" />
          <stop offset="100%" stopColor="#7a8aa0" />
        </linearGradient>
        <linearGradient id="sea" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#5d6a82" />
          <stop offset="100%" stopColor="#2e3a4f" />
        </linearGradient>
        <linearGradient id="ground" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#a89c8a" />
          <stop offset="100%" stopColor="#3e3a36" />
        </linearGradient>
        <radialGradient id="moon" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0%" stopColor="#fff8e7" stopOpacity="1" />
          <stop offset="60%" stopColor="#f0e5c8" stopOpacity="0.9" />
          <stop offset="100%" stopColor="#f0e5c8" stopOpacity="0" />
        </radialGradient>
        <linearGradient id="pavilion" x1="0" x2="0" y1="0" y2="1">
          <stop offset="0%" stopColor="#f3ede0" />
          <stop offset="100%" stopColor="#bcb3a0" />
        </linearGradient>
        <radialGradient id="lightbulb" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0%" stopColor="#fff4c8" stopOpacity="1" />
          <stop offset="100%" stopColor="#fff4c8" stopOpacity="0" />
        </radialGradient>
      </defs>

      {/* sky */}
      <rect width="400" height="430" fill="url(#sky)" />

      {/* stars */}
      <g fill="#fff" opacity="0.7">
        <circle cx="40" cy="60" r="0.6" />
        <circle cx="90" cy="35" r="0.4" />
        <circle cx="160" cy="80" r="0.5" />
        <circle cx="220" cy="40" r="0.6" />
        <circle cx="310" cy="100" r="0.4" />
        <circle cx="370" cy="55" r="0.5" />
        <circle cx="55" cy="160" r="0.5" />
        <circle cx="340" cy="190" r="0.4" />
        <circle cx="250" cy="150" r="0.3" />
      </g>

      {/* moon */}
      <circle cx="320" cy="120" r="55" fill="url(#moon)" />
      <circle cx="320" cy="120" r="22" fill="#fff8e7" opacity="0.95" />

      {/* horizon / distant land */}
      <rect y="380" width="400" height="60" fill="url(#sea)" opacity="0.55" />
      <path d="M 0 380 Q 100 372 200 378 Q 300 384 400 376 L 400 400 L 0 400 Z" fill="#3a4459" opacity="0.55" />

      {/* warm horizon glow */}
      <ellipse cx="200" cy="392" rx="200" ry="14" fill="#e8b89e" opacity="0.45" />

      {/* ground / aisle */}
      <rect y="430" width="400" height="270" fill="url(#ground)" />
      <path d="M 140 430 L 260 430 L 290 700 L 110 700 Z" fill="#cdbfa3" opacity="0.6" />
      <path d="M 160 430 L 240 430 L 260 700 L 140 700 Z" fill="#e1d4b8" opacity="0.4" />

      {/* pavilion — central gazebo */}
      <g>
        {/* base platform */}
        <rect x="130" y="395" width="140" height="14" fill="#a89c8a" />
        <rect x="125" y="405" width="150" height="8" fill="#7d7363" />

        {/* columns */}
        {[145, 175, 225, 255].map((x, i) => (
          <g key={i}>
            <rect x={x} y="285" width="14" height="115" fill="url(#pavilion)" />
            <rect x={x - 2} y="285" width="18" height="6" fill="#ddd2bc" />
            <rect x={x - 2} y="395" width="18" height="6" fill="#ddd2bc" />
          </g>
        ))}

        {/* entablature */}
        <rect x="135" y="270" width="130" height="18" fill="url(#pavilion)" />

        {/* dome */}
        <ellipse cx="200" cy="270" rx="68" ry="14" fill="#cfc4ae" />
        <path d="M 138 270 Q 200 200 262 270 Z" fill="url(#pavilion)" />
        <path d="M 200 200 L 200 180" stroke="#b8ad97" strokeWidth="2" />
        <circle cx="200" cy="175" r="4" fill="#d4b87a" />
      </g>

      {/* potted trees / topiaries with lights */}
      <g transform="translate(85, 350)">
        <rect x="-10" y="60" width="20" height="22" fill="#8b6f47" />
        <path d="M -2 -10 L -22 35 L 18 35 Z" fill="#3d4e3a" />
        <path d="M -2 5 L -18 40 L 14 40 Z" fill="#4a5c44" />
        <path d="M -2 20 L -16 55 L 12 55 Z" fill="#3d4e3a" />
        {/* lights */}
        {[[-15, 20], [10, 15], [-8, 35], [5, 40], [-12, 50], [8, 28]].map(([x, y], i) => (
          <circle key={i} cx={x} cy={y} r="3.5" fill="url(#lightbulb)" />
        ))}
      </g>
      <g transform="translate(315, 350)">
        <rect x="-10" y="60" width="20" height="22" fill="#8b6f47" />
        <path d="M -2 -10 L -22 35 L 18 35 Z" fill="#3d4e3a" />
        <path d="M -2 5 L -18 40 L 14 40 Z" fill="#4a5c44" />
        <path d="M -2 20 L -16 55 L 12 55 Z" fill="#3d4e3a" />
        {[[-15, 20], [10, 15], [-8, 35], [5, 40], [-12, 50], [8, 28]].map(([x, y], i) => (
          <circle key={i} cx={x} cy={y} r="3.5" fill="url(#lightbulb)" />
        ))}
      </g>

      {/* chairs along aisle */}
      <g fill="#f3ede0" opacity="0.85">
        {[0, 1, 2, 3, 4, 5].map(i => {
          const y = 460 + i * 38;
          const offset = 50 + i * 8;
          const w = 14 - i * 0.5;
          return (
            <g key={i}>
              <rect x={70 - offset * 0.3} y={y} width={w} height={20 + i * 3} rx="1" />
              <rect x={70 - offset * 0.3 - 2} y={y - 4} width={w + 4} height="4" rx="1" />
              <rect x={326 + offset * 0.3} y={y} width={w} height={20 + i * 3} rx="1" />
              <rect x={326 + offset * 0.3 - 2} y={y - 4} width={w + 4} height="4" rx="1" />
            </g>
          );
        })}
      </g>

      {/* atmospheric overlay */}
      <rect width="400" height="700" fill="#3a4a63" opacity="0.12" />

      {/* lens flare lower right */}
      <circle cx="320" cy="490" r="40" fill="#fff4c8" opacity="0.06" />
      <circle cx="320" cy="490" r="20" fill="#fff4c8" opacity="0.1" />
    </svg>
  );
}

// ─── Wax seal for cover ───────────────────────────────
function WaxSeal({ size = 130, broken = false }) {
  return (
    <div style={{
      position: 'relative',
      width: size, height: size,
      transition: 'transform 0.6s cubic-bezier(.6,.2,.2,1), opacity 0.6s',
      transform: broken ? 'scale(1.4) rotate(8deg)' : 'scale(1)',
      opacity: broken ? 0 : 1,
    }}>
      <svg viewBox="0 0 140 140" width={size} height={size}>
        <defs>
          <radialGradient id="wax" cx="0.35" cy="0.35" r="0.7">
            <stop offset="0%" stopColor="#d9b878" />
            <stop offset="55%" stopColor="#a87f3d" />
            <stop offset="100%" stopColor="#6b4a1e" />
          </radialGradient>
          <radialGradient id="waxShine" cx="0.3" cy="0.3" r="0.4">
            <stop offset="0%" stopColor="#fff" stopOpacity="0.6" />
            <stop offset="100%" stopColor="#fff" stopOpacity="0" />
          </radialGradient>
        </defs>
        {/* irregular seal shape */}
        <path
          d="M 70 8
             C 88 6 102 14 110 26
             C 124 30 132 44 130 58
             C 138 70 134 88 122 96
             C 124 112 110 124 96 122
             C 88 134 70 134 60 128
             C 46 134 30 124 30 110
             C 14 106 8 90 16 78
             C 6 66 12 48 26 42
             C 24 26 38 14 54 16
             C 60 8 70 8 70 8 Z"
          fill="url(#wax)"
        />
        <path
          d="M 70 8 C 88 6 102 14 110 26 C 124 30 132 44 130 58 C 138 70 134 88 122 96"
          fill="none"
          stroke="#3a2510"
          strokeOpacity="0.25"
          strokeWidth="1"
        />
        <ellipse cx="55" cy="50" rx="30" ry="20" fill="url(#waxShine)" />

        {/* embossed monogram K & A */}
        <g fill="#5c3d18" opacity="0.7">
          <circle cx="70" cy="70" r="34" fill="none" stroke="#5c3d18" strokeWidth="0.8" opacity="0.6" />
          <circle cx="70" cy="70" r="38" fill="none" stroke="#5c3d18" strokeWidth="0.4" opacity="0.4" />
        </g>
        <text
          x="70" y="80"
          textAnchor="middle"
          fontFamily="'Pinyon Script', cursive"
          fontSize="36"
          fill="#3a2510"
          opacity="0.75"
        >K&amp;A</text>

        {/* tiny decorative dots */}
        {Array.from({ length: 12 }).map((_, i) => {
          const a = (i / 12) * Math.PI * 2;
          const r = 42;
          return <circle key={i} cx={70 + Math.cos(a) * r} cy={70 + Math.sin(a) * r} r="0.8" fill="#3a2510" opacity="0.5" />;
        })}
      </svg>
    </div>
  );
}

// ─── Small floral/vase divider ────────────────────────
function VaseOrnament({ color = '#8a7a5e', width = 70 }) {
  return (
    <svg viewBox="0 0 80 80" width={width} style={{ display: 'block' }}>
      <g fill={color} opacity="0.7">
        {/* vase */}
        <path d="M 32 58 Q 30 70 36 74 L 44 74 Q 50 70 48 58 Z" />
        <rect x="34" y="55" width="12" height="4" rx="1" />
        {/* stems */}
        <path d="M 40 56 Q 38 40 30 28" stroke={color} strokeWidth="1" fill="none" />
        <path d="M 40 56 Q 42 42 50 30" stroke={color} strokeWidth="1" fill="none" />
        <path d="M 40 56 Q 40 38 40 22" stroke={color} strokeWidth="1" fill="none" />
        {/* leaves */}
        <ellipse cx="30" cy="28" rx="6" ry="3" transform="rotate(-30 30 28)" />
        <ellipse cx="50" cy="30" rx="6" ry="3" transform="rotate(30 50 30)" />
        <ellipse cx="40" cy="22" rx="3" ry="6" />
        <circle cx="40" cy="20" r="3" />
        <circle cx="28" cy="26" r="2.5" />
        <circle cx="52" cy="28" r="2.5" />
      </g>
    </svg>
  );
}

// ─── Top arch ornament (used on location & thanks page) ─
function ArchOrnament({ color = '#b8945a', width = 180 }) {
  return (
    <svg viewBox="0 0 220 40" width={width} style={{ display: 'block' }}>
      <g fill="none" stroke={color} strokeWidth="0.8" opacity="0.85">
        <path d="M 10 35 Q 60 5 110 5 Q 160 5 210 35" />
        <path d="M 20 38 Q 60 18 110 18 Q 160 18 200 38" />
        {/* small flourishes */}
        <circle cx="110" cy="5" r="2" fill={color} />
        <path d="M 90 8 L 105 5 L 90 2" />
        <path d="M 130 8 L 115 5 L 130 2" />
        {/* finials */}
        <circle cx="10" cy="35" r="2" fill={color} />
        <circle cx="210" cy="35" r="2" fill={color} />
      </g>
    </svg>
  );
}

// ─── Arabic Kufic-style frame ornament ────────────────
function KuficFrame({ color = '#b8945a', width = 240 }) {
  return (
    <svg viewBox="0 0 300 60" width={width} style={{ display: 'block' }}>
      <rect x="2" y="2" width="296" height="56" fill="none" stroke={color} strokeWidth="0.6" opacity="0.5" />
      <rect x="6" y="6" width="288" height="48" fill="none" stroke={color} strokeWidth="0.3" opacity="0.5" />
      <text
        x="150" y="38"
        textAnchor="middle"
        fontFamily="'Amiri Quran', 'Amiri', serif"
        fontSize="22"
        fill={color}
        style={{ direction: 'rtl' }}
      >بَارَكَ اللهُ لَكُمَا وَبَارَكَ عَلَيْكُمَا وَجَمَعَ بَيْنَكُمَا فِي خَيْرٍ</text>
    </svg>
  );
}

Object.assign(window, { Bismillah, GazeboScene, WaxSeal, VaseOrnament, ArchOrnament, KuficFrame });
