/* global React, Reveal, tr */
/* ─── MUMBAI MORNING VIGNETTE ─────────────────────────────────── */

// SVG skyline silhouette
const Skyline = () => (
  <svg viewBox="0 0 1440 180" preserveAspectRatio="xMidYMax slice" width="100%" height="100%">
    <defs>
      <linearGradient id="sky-fade" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stopColor="#0C232C" stopOpacity="0" />
        <stop offset="100%" stopColor="#0C232C" stopOpacity="1" />
      </linearGradient>
    </defs>
    <g fill="#0C232C" opacity="0.85">
      {/* layered building silhouettes */}
      <path d="M 0 180 L 0 120 L 40 120 L 40 92 L 70 92 L 70 110 L 110 110 L 110 80 L 140 80 L 140 68 L 150 56 L 160 68 L 160 96 L 200 96 L 200 122 L 240 122 L 240 88 L 280 88 L 280 110 L 320 110 L 320 78 L 360 78 L 360 96 L 410 96 L 410 70 L 430 70 L 430 56 L 440 50 L 450 56 L 450 88 L 490 88 L 490 116 L 540 116 L 540 92 L 590 92 L 590 110 L 640 110 L 640 80 L 690 80 L 690 96 L 740 96 L 740 70 L 760 70 L 760 56 L 772 44 L 784 56 L 784 88 L 830 88 L 830 116 L 880 116 L 880 96 L 930 96 L 930 78 L 980 78 L 980 110 L 1030 110 L 1030 92 L 1080 92 L 1080 116 L 1130 116 L 1130 88 L 1180 88 L 1180 70 L 1200 70 L 1200 56 L 1212 44 L 1224 56 L 1224 90 L 1270 90 L 1270 118 L 1320 118 L 1320 96 L 1370 96 L 1370 110 L 1440 110 L 1440 180 Z" />
    </g>
    {/* faint window lights */}
    <g fill="#F5A93C" opacity="0.55">
      <rect x="62"  y="106" width="2" height="2" />
      <rect x="92"  y="102" width="2" height="2" />
      <rect x="200" y="118" width="2" height="2" />
      <rect x="252" y="100" width="2" height="2" />
      <rect x="328" y="92"  width="2" height="2" />
      <rect x="380" y="106" width="2" height="2" />
      <rect x="436" y="78"  width="2" height="2" />
      <rect x="498" y="100" width="2" height="2" />
      <rect x="556" y="106" width="2" height="2" />
      <rect x="608" y="102" width="2" height="2" />
      <rect x="666" y="92"  width="2" height="2" />
      <rect x="718" y="106" width="2" height="2" />
      <rect x="782" y="78"  width="2" height="2" />
      <rect x="844" y="100" width="2" height="2" />
      <rect x="902" y="106" width="2" height="2" />
      <rect x="954" y="92"  width="2" height="2" />
      <rect x="1004" y="102" width="2" height="2" />
      <rect x="1060" y="106" width="2" height="2" />
      <rect x="1116" y="100" width="2" height="2" />
      <rect x="1178" y="78"  width="2" height="2" />
      <rect x="1234" y="100" width="2" height="2" />
      <rect x="1292" y="108" width="2" height="2" />
      <rect x="1344" y="100" width="2" height="2" />
      <rect x="1402" y="116" width="2" height="2" />
    </g>
    <rect x="0" y="0" width="1440" height="50" fill="url(#sky-fade)" />
  </svg>
);

function Vignette({ lang }) {
  return (
    <section className="section vignette" id="vignette">
      <div className="vignette__sky" />
      <div className="vignette__skyline">
        <Skyline />
      </div>
      <div className="wrap" style={{ position: 'relative', zIndex: 2 }}>
        <div className="vignette__grid">
          <Reveal>
            <div>
              <div className="vignette__time">
                {tr(lang, {
                  en: '06:42 · Malad West · Mith Chowky',
                  hi: '06:42 · मलाड वेस्ट · मीठ चौकी',
                  mr: '06:42 · मलाड वेस्ट · मीठ चौकी',
                  gu: '06:42 · મલાડ વેસ્ટ · મીઠ ચોકી',
                })}
              </div>

              <div className="vignette__lines" style={{ marginTop: 28 }}>
                <div>
                  {tr(lang, {
                    en: 'The auto starts on the third turn of the key.',
                    hi: 'ऑटो चाबी की तीसरी पारी पर चालू होता है।',
                    mr: 'ऑटो चावीच्या तिसऱ्या वळणावर सुरू होतो.',
                    gu: 'ઓટો ચાવીના ત્રીજા વળાંકે ચાલુ થાય છે.',
                  })}
                </div>
                <div>
                  {tr(lang, {
                    en: 'The driver checks the meter. Then the app. Then the meter again.',
                    hi: 'चालक मीटर देखता है। फिर ऐप। फिर मीटर दोबारा।',
                    mr: 'चालक मीटर पाहतो. मग अ‍ॅप. मग पुन्हा मीटर.',
                    gu: 'ડ્રાઇવર મીટર જુએ છે. પછી એપ. પછી મીટર ફરી.',
                  })}
                </div>
                <div className="accent" style={{ marginTop: 18, fontSize: '0.85em', letterSpacing: '0.04em' }}>
                  {tr(lang, {
                    en: '"At least let me see what I made today."',
                    hi: '"कम से कम मुझे बताओ आज मैंने क्या कमाया।"',
                    mr: '"निदान आज मी काय कमावले ते मला कळू दे."',
                    gu: '"ઓછામાં ઓછું મને જણાવો કે મેં આજે શું કમાવ્યું."',
                  })}
                </div>
              </div>

              <div style={{
                marginTop: 28,
                paddingTop: 22,
                borderTop: '1px solid rgba(250,247,241,0.16)',
                fontSize: 14,
                lineHeight: 1.7,
                color: 'rgba(250,247,241,0.78)',
                maxWidth: 520,
              }}>
                {tr(lang, {
                  en: 'This is the corner the pilot begins from. 50 Nagriks, 10 days, one neighbourhood. Met in person. Observed end-to-end. Not a launch — a beginning.',
                  hi: 'यही वह कोना है जहाँ से पायलट शुरू होता है। 50 नागरिक, 10 दिन, एक मोहल्ला। व्यक्तिगत मुलाक़ात। अंत-से-अंत निरीक्षण। यह लॉन्च नहीं — एक शुरुआत है।',
                  mr: 'इथूनच पायलट सुरू होतो. 50 नागरिक, 10 दिवस, एक परिसर. वैयक्तिक भेट. टोकापासून टोकापर्यंत निरीक्षण. हे लाँच नाही — एक सुरुवात आहे.',
                  gu: 'આ જ ખૂણાથી પાયલટ શરૂ થાય છે. 50 નાગરિક, 10 દિવસ, એક વિસ્તાર. વ્યક્તિગત મુલાકાત. છેડેથી છેડે અવલોકન. આ લોન્ચ નથી — એક શરૂઆત છે.',
                })}
              </div>
            </div>
          </Reveal>

          <Reveal delay={2}>
            <VignetteSun />
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// Rising sun motif — composition piece for the vignette
const VignetteSun = () => (
  <svg viewBox="0 0 480 380" width="100%" height="auto" role="presentation">
    <defs>
      <radialGradient id="sun-glow" cx="50%" cy="60%" r="60%">
        <stop offset="0%" stopColor="#F5A93C" stopOpacity="0.95" />
        <stop offset="55%" stopColor="#E87B1E" stopOpacity="0.6" />
        <stop offset="100%" stopColor="#E87B1E" stopOpacity="0" />
      </radialGradient>
      <linearGradient id="horizon" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stopColor="#1F5266" stopOpacity="0" />
        <stop offset="100%" stopColor="#1F5266" stopOpacity="0.5" />
      </linearGradient>
    </defs>

    {/* glow */}
    <circle cx="240" cy="240" r="220" fill="url(#sun-glow)" />

    {/* radiating rays — long thin */}
    <g stroke="#F5A93C" strokeWidth="1.4" opacity="0.32" strokeLinecap="round">
      {Array.from({ length: 24 }).map((_, i) => {
        const ang = (i * 15) * Math.PI / 180;
        const cx = 240, cy = 240;
        const r1 = 110, r2 = 220 + (i % 3) * 18;
        return (
          <line
            key={i}
            x1={cx + Math.cos(ang) * r1}
            y1={cy + Math.sin(ang) * r1}
            x2={cx + Math.cos(ang) * r2}
            y2={cy + Math.sin(ang) * r2}
          />
        );
      })}
    </g>

    {/* sun disc */}
    <circle cx="240" cy="240" r="92" fill="#E87B1E" />
    <circle cx="240" cy="240" r="92" fill="none" stroke="#F5A93C" strokeWidth="2" opacity="0.6" />

    {/* horizon overlay */}
    <rect x="0" y="296" width="480" height="84" fill="url(#horizon)" />

    {/* small standing figure on horizon */}
    <g transform="translate(228 244)">
      <circle cx="12" cy="0" r="9" fill="#143844" />
      <path d="M 0 16 Q 0 10 6 10 L 18 10 Q 24 10 24 16 L 24 64 L 0 64 Z" fill="#143844" />
      <rect x="-6" y="64" width="36" height="6" rx="1.5" fill="#143844" />
    </g>

    {/* dashed ground line */}
    <line x1="0" y1="310" x2="480" y2="310" stroke="#F5A93C" strokeOpacity="0.35" strokeDasharray="3 6" strokeWidth="1" />
  </svg>
);

Object.assign(window, { Vignette });
