/* global React, Wordmark, StandingSunMark, Eyebrow, LangStrip, Reveal, tr */
/* ─── HERO ────────────────────────────────────────────────────── */

function Hero({ lang }) {
  const scrollTo = (id) => {
    const el = document.getElementById(id);
    if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
  };

  // soft particles
  const particles = React.useMemo(
    () => Array.from({ length: 12 }, (_, i) => ({
      left: 6 + Math.random() * 88,
      bottom: 4 + Math.random() * 28,
      delay: Math.random() * 5,
      duration: 5 + Math.random() * 4,
    })),
    []
  );

  return (
    <section className="hero" id="top">
      <div className="hero__bg" />
      <div className="hero__horizon" />
      <div className="hero__ribbon" />

      {/* drifting embers */}
      {particles.map((p, i) => (
        <span
          key={i}
          className="particle"
          style={{
            left: `${p.left}%`,
            bottom: `${p.bottom}%`,
            animationDelay: `${p.delay}s`,
            animationDuration: `${p.duration}s`,
          }}
        />
      ))}

      <div className="wrap">
        <div className="hero__grid">
          {/* Left column */}
          <div>
            <Reveal className="hero__brand">
              <Wordmark size="md" />
              <span className="pill">
                {tr(lang, {
                  en: 'Founder preview',
                  hi: 'फाउंडर प्रीव्यू',
                  mr: 'फाउंडर प्रीव्ह्यू',
                  gu: 'ફાઉન્ડર પ્રિવ્યૂ',
                })}
              </span>
            </Reveal>

            <Reveal delay={1}>
              <h1 className="headline headline--xl">
                {tr(lang, {
                  en: 'Built for the workers',
                  hi: 'उन कर्मिकों के लिए',
                  mr: 'त्या कर्मिकांसाठी',
                  gu: 'એ કર્મિકો માટે',
                })}
                <br />
                <span className="italic h-teal">
                  {tr(lang, {
                    en: 'who power it.',
                    hi: 'जो इसे चलाते हैं।',
                    mr: 'जे ते चालवतात.',
                    gu: 'જે તેને ચલાવે છે.',
                  })}
                </span>
              </h1>
            </Reveal>

            <Reveal delay={2}>
              <p className="lead" style={{ marginTop: 26 }}>
                {tr(lang, {
                  en: 'A worker-first local platform — beginning as a 10-day pilot for 50 Nagriks in Malad West, Mumbai. Cab service first. The economic model printed on every fare. Welfare built into the ground floor.',
                  hi: 'कर्मिक-प्रथम स्थानीय मंच — मलाड वेस्ट, मुंबई में 50 नागरिकों के लिए 10-दिवसीय पायलट के रूप में शुरू। पहले कैब सेवा। आर्थिक मॉडल हर किराये पर छपा हुआ। कल्याण ज़मीनी मंज़िल पर बनाया गया।',
                  mr: 'कर्मिक-प्रथम स्थानिक मंच — मलाड वेस्ट, मुंबईत 50 नागरिकांसाठी 10-दिवसीय पायलट म्हणून सुरुवात. प्रथम कॅब सेवा. आर्थिक मॉडेल प्रत्येक भाड्यावर छापलेले. कल्याण तळमजल्यावरच बांधलेले.',
                  gu: 'કર્મિક-પ્રથમ સ્થાનિક પ્લેટફોર્મ — મલાડ વેસ્ટ, મુંબઈમાં 50 નાગરિકો માટે 10-દિવસનો પાયલટ. પ્રથમ કેબ સેવા. આર્થિક મોડેલ દરેક ભાડા પર છપાય છે. કલ્યાણ ભોંયતળિયે જ બંધાયેલું.',
                })}
              </p>
            </Reveal>

            <Reveal delay={3}>
              <div className="hero__cta">
                <button className="btn btn--sun" onClick={() => scrollTo('journey')}>
                  {tr(lang, {
                    en: 'Preview a Nagrik ride',
                    hi: 'नागरिक की सवारी देखें',
                    mr: 'नागरिकाची सवारी पहा',
                    gu: 'નાગરિકની સવારી જુઓ',
                  })}
                  <span className="arrow-r">→</span>
                </button>
                <button className="btn btn--ghost" onClick={() => scrollTo('thesis')}>
                  {tr(lang, {
                    en: 'Read the founder note',
                    hi: 'संस्थापक टिप्पणी पढ़ें',
                    mr: 'संस्थापक टीप वाचा',
                    gu: 'સ્થાપક નોંધ વાંચો',
                  })}
                </button>
                <button className="btn btn--text" onClick={() => scrollTo('interest')}>
                  {tr(lang, {
                    en: 'Join pilot interest',
                    hi: 'पायलट में रुचि जोड़ें',
                    mr: 'पायलटमध्ये रस नोंदवा',
                    gu: 'પાયલટમાં રસ નોંધાવો',
                  })}
                </button>
              </div>
            </Reveal>

            <Reveal delay={4}>
              <LangStrip
                lines={[
                  'Mumbai mornings',
                  'मलाड वेस्ट से',
                  'मराठीत बोलू',
                  'ગુજરાતી માં',
                ]}
              />
            </Reveal>

            <Reveal delay={5}>
              <div className="hero__meta">
                <div className="corp">1GIGE TECHNOLOGIES PRIVATE LIMITED</div>
                <div style={{ marginTop: 8 }}>
                  {tr(lang, {
                    en: 'In formation. Founder operating in personal capacity until incorporation completes.',
                    hi: 'गठन में। निगमन पूरा होने तक संस्थापक व्यक्तिगत क्षमता में संचालन कर रहा है।',
                    mr: 'स्थापनेच्या प्रक्रियेत. नोंदणी पूर्ण होईपर्यंत संस्थापक वैयक्तिक क्षमतेत कार्यरत.',
                    gu: 'રચનામાં. નોંધણી પૂર્ણ થાય ત્યાં સુધી સ્થાપક વ્યક્તિગત ક્ષમતામાં કાર્યરત.',
                  })}
                </div>
              </div>
            </Reveal>
          </div>

          {/* Right column — standing sun mark */}
          <Reveal delay={2} className="hero__mark">
            <div className="halo" />
            <StandingSunMark size={360} />
          </Reveal>
        </div>

        <Reveal delay={5}>
          <p className="hero__poem">
            <em>{tr(lang, {
              en: 'One worker.',
              hi: 'एक कर्मिक।',
              mr: 'एक कर्मिक.',
              gu: 'એક કર્મિક.',
            })}</em>
            {' '}
            <em>{tr(lang, {
              en: 'One gig.',
              hi: 'एक काम।',
              mr: 'एक काम.',
              gu: 'એક કામ.',
            })}</em>
            {' '}
            <em>{tr(lang, {
              en: 'One source of energy.',
              hi: 'एक ऊर्जा का स्रोत।',
              mr: 'एक ऊर्जेचा स्रोत.',
              gu: 'એક ઊર્જાનો સ્રોત.',
            })}</em>
          </p>
        </Reveal>
      </div>
    </section>
  );
}

Object.assign(window, { Hero });