/* HomePage — hero, trust strip, services, how-it-works, safety, CTA band */
(function () {
  const { Button, Badge, Card, SectionHeading } = window.KhandelwalGasDesignSystem_68d8db;
  const ff = (hi) => (hi ? 'var(--font-hindi)' : 'var(--font-body)');

  function Hero({ t, setPage }) {
    const h = t.hero, hi = t.dir === 'hi';
    return (
      <section style={{ background: 'linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%)', overflow: 'hidden' }}>
        <div className="kg-container kg-container--wide" style={{ display: 'grid', gridTemplateColumns: '1.05fr 0.95fr', gap: 'var(--space-8)', alignItems: 'center', padding: 'var(--space-9) var(--space-5)' }}>
          <div>
            <span className="kg-eyebrow kg-eyebrow--start" style={{ fontFamily: ff(hi) }}>{h.eyebrow}</span>
            <h1 style={{ font: 'var(--text-display)', fontFamily: hi ? 'var(--font-hindi)' : 'var(--font-display)', fontWeight: hi ? 700 : 400, color: 'var(--navy-700)', margin: '18px 0 0', fontSize: hi ? '46px' : '60px', lineHeight: 1.06 }}>{h.title}</h1>
            <p style={{ font: 'var(--text-body-lg)', fontFamily: ff(hi), color: 'var(--ink-500)', maxWidth: 480, marginTop: 20 }}>{h.sub}</p>
            <div style={{ display: 'flex', gap: 12, marginTop: 30, flexWrap: 'wrap' }}>
              <Button variant="accent" size="lg" onClick={() => setPage('contact')} iconRight={<i data-lucide="arrow-right" style={{ width: 18, height: 18 }}></i>}>{t.cta_contact}</Button>
            </div>
            <div style={{ display: 'flex', gap: 'var(--space-7)', marginTop: 40 }}>
              {[[h.stat1, h.stat1l], [h.stat2, h.stat2l], [h.stat3, h.stat3l]].map(([n, l], i) => (
                <div key={i}>
                  <div style={{ font: 'var(--text-h2)', fontFamily: 'var(--font-display)', color: 'var(--orange-600)' }}>{n}</div>
                  <div style={{ fontSize: 'var(--fs-sm)', color: 'var(--ink-500)', fontFamily: ff(hi), marginTop: 2 }}>{l}</div>
                </div>
              ))}
            </div>
          </div>
          {/* visual */}
          <div style={{ position: 'relative', minHeight: 420, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ position: 'absolute', inset: 0, background: 'var(--navy-700)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)', overflow: 'hidden' }}>
              <div style={{ position: 'absolute', right: -60, top: -60, width: 240, height: 240, borderRadius: '50%', background: 'radial-gradient(circle, rgba(194,94,44,0.45), transparent 70%)' }}></div>
              <div style={{ position: 'absolute', left: -40, bottom: -40, width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle, rgba(228,160,58,0.25), transparent 70%)' }}></div>
            </div>
            <img src="../../assets/logos/khandelwal-gas-flame-est.png" alt="Khandelwal Gas · Est. 1984" style={{ position: 'relative', height: 200, filter: 'brightness(0) invert(1)' }} />
            <div style={{ position: 'absolute', bottom: 26, left: 26, right: 26, display: 'flex', gap: 12 }}>
              <div style={{ flex: 1, background: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(6px)', border: '1px solid rgba(255,255,255,0.18)', borderRadius: 'var(--radius-md)', padding: '14px 16px', color: '#fff' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><i data-lucide="shield-check" style={{ width: 18, height: 18, color: 'var(--orange-400)' }}></i><b style={{ fontSize: 'var(--fs-sm)' }}>OTP-verified</b></div>
                <div style={{ fontSize: 'var(--fs-xs)', color: 'rgba(255,255,255,0.7)', marginTop: 4, fontFamily: ff(hi) }}>{hi ? 'हर डिलीवरी पर' : 'on every delivery'}</div>
              </div>
              <div style={{ flex: 1, background: 'rgba(255,255,255,0.1)', backdropFilter: 'blur(6px)', border: '1px solid rgba(255,255,255,0.18)', borderRadius: 'var(--radius-md)', padding: '14px 16px', color: '#fff' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}><i data-lucide="truck" style={{ width: 18, height: 18, color: 'var(--orange-400)' }}></i><b style={{ fontSize: 'var(--fs-sm)' }}>{hi ? 'उसी दिन' : 'Same-day'}</b></div>
                <div style={{ fontSize: 'var(--fs-xs)', color: 'rgba(255,255,255,0.7)', marginTop: 4, fontFamily: ff(hi) }}>{hi ? 'प्रीपेड बुकिंग' : 'on prepaid bookings'}</div>
              </div>
            </div>
          </div>
        </div>
      </section>
    );
  }

  function Services({ t }) {
    const s = t.services, hi = t.dir === 'hi';
    return (
      <section style={{ padding: 'var(--space-9) 0' }}>
        <div className="kg-container kg-container--wide">
          <SectionHeading eyebrow={s.eyebrow} title={s.title} description={s.sub} align="center" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-5)', marginTop: 'var(--space-8)' }}>
            {s.items.map((it, i) => (
              <Card key={i} style={{ display: 'flex', flexDirection: 'column', gap: 16, height: '100%' }}>
                <div style={{ width: 52, height: 52, flex: 'none', borderRadius: 'var(--radius-md)', background: 'var(--orange-50)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <i data-lucide={it.icon} style={{ width: 26, height: 26, color: 'var(--orange-600)' }}></i>
                </div>
                <h3 style={{ font: 'var(--text-h4)', fontFamily: ff(hi), color: 'var(--navy-700)', margin: 0 }}>{it.title}</h3>
                <p style={{ fontSize: 'var(--fs-sm)', lineHeight: 1.6, color: 'var(--ink-500)', fontFamily: ff(hi), margin: 0 }}>{it.desc}</p>
              </Card>
            ))}
          </div>
        </div>
      </section>
    );
  }

  function How({ t }) {
    const h = t.how, hi = t.dir === 'hi';
    return (
      <section style={{ padding: 'var(--space-9) 0', background: 'var(--paper-2)' }}>
        <div className="kg-container kg-container--wide">
          <SectionHeading eyebrow={h.eyebrow} title={h.title} align="center" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 'var(--space-6)', marginTop: 'var(--space-8)' }}>
            {h.steps.map((st, i) => (
              <div key={i} style={{ position: 'relative', padding: 'var(--space-2)' }}>
                <div style={{ font: 'var(--text-h1)', fontFamily: 'var(--font-display)', color: 'var(--orange-200)', lineHeight: 1 }}>{st.n}</div>
                <h3 style={{ font: 'var(--text-h4)', fontFamily: ff(hi), color: 'var(--navy-700)', marginTop: 12 }}>{st.title}</h3>
                <p style={{ fontSize: 'var(--fs-sm)', lineHeight: 1.6, color: 'var(--ink-500)', fontFamily: ff(hi), marginTop: 8 }}>{st.desc}</p>
              </div>
            ))}
          </div>
        </div>
      </section>
    );
  }

  function Safety({ t }) {
    const s = t.safety, hi = t.dir === 'hi';
    return (
      <section style={{ padding: 'var(--space-9) 0' }}>
        <div className="kg-container kg-container--wide" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'var(--space-9)', alignItems: 'center' }}>
          <div style={{ position: 'relative', borderRadius: 'var(--radius-xl)', overflow: 'hidden', boxShadow: 'var(--shadow-md)', aspectRatio: '4/3' }}>
            <img src="../../assets/imagery/rajasthan-banner.jpg" alt="Khandelwal Gas Jaipur" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
          </div>
          <div>
            <SectionHeading eyebrow={s.eyebrow} title={s.title} />
            <ul style={{ listStyle: 'none', padding: 0, margin: '24px 0 0', display: 'flex', flexDirection: 'column', gap: 16 }}>
              {s.points.map((p, i) => (
                <li key={i} style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
                  <span style={{ width: 26, height: 26, flex: 'none', borderRadius: '50%', background: 'var(--success-100)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    <i data-lucide="check" style={{ width: 15, height: 15, color: 'var(--success-600)' }}></i>
                  </span>
                  <span style={{ fontSize: 'var(--fs-md)', color: 'var(--ink-700)', fontFamily: ff(hi), lineHeight: 1.4 }}>{p}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>
    );
  }

  function CTABand({ t, setPage }) {
    const hi = t.dir === 'hi';
    return (
      <section style={{ padding: 'var(--space-7) 0' }}>
        <div className="kg-container kg-container--wide">
          <div style={{ background: 'var(--navy-700)', borderRadius: 'var(--radius-xl)', padding: 'var(--space-8)', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 'var(--space-6)', position: 'relative', overflow: 'hidden' }}>
            <div style={{ position: 'absolute', right: -30, top: -30, width: 200, height: 200, borderRadius: '50%', background: 'radial-gradient(circle, rgba(194,94,44,0.4), transparent 70%)' }}></div>
            <div style={{ position: 'relative' }}>
              <h2 style={{ font: 'var(--text-h2)', fontFamily: hi ? 'var(--font-hindi)' : 'var(--font-display)', color: '#fff', maxWidth: 560 }}>{hi ? 'नया कनेक्शन लेना चाहते हैं?' : 'Apply for a new connection'}</h2>
              <p style={{ color: 'var(--text-on-dark-muted)', marginTop: 10, fontFamily: ff(hi) }}>{hi ? 'घरेलू, व्यावसायिक या औद्योगिक — हम KYC से इंस्टॉलेशन तक आपकी मदद करते हैं।' : 'Domestic, commercial or industrial — we guide you from KYC through to installation.'}</p>
            </div>
            <div style={{ position: 'relative', display: 'flex', gap: 12, flex: 'none' }}>
              <Button variant="accent" size="lg" onClick={() => setPage('connection')}>{t.cta_connection}</Button>
            </div>
          </div>
        </div>
      </section>
    );
  }

  function ServiceHub({ t, setPage }) {
    const s = t.services, hi = t.dir === 'hi';
    return (
      <section style={{ padding: 'var(--space-9) 0', background: 'var(--paper-2)' }}>
        <div className="kg-container kg-container--wide">
          <SectionHeading eyebrow={s.do_eyebrow} title={s.do_title} description={s.do_sub} align="center" />
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 'var(--space-5)', marginTop: 'var(--space-8)' }}>
            {s.do.map((it, i) => (
              <Card key={i} hover style={{ display: 'flex', flexDirection: 'column', gap: 14, cursor: 'pointer' }} onClick={() => setPage(it.go)}>
                <div style={{ width: 52, height: 52, borderRadius: 'var(--radius-md)', background: 'var(--navy-700)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                  <i data-lucide={it.icon} style={{ width: 25, height: 25, color: 'var(--orange-400)' }}></i>
                </div>
                <h3 style={{ font: 'var(--text-h4)', fontFamily: ff(hi), color: 'var(--navy-700)' }}>{it.title}</h3>
                <p style={{ fontSize: 'var(--fs-sm)', lineHeight: 1.6, color: 'var(--ink-500)', fontFamily: ff(hi), margin: 0, flex: 1 }}>{it.desc}</p>
                <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: 'var(--orange-700)', fontSize: 'var(--fs-sm)', fontWeight: 600, fontFamily: ff(hi) }}>
                  {it.title}<i data-lucide="arrow-right" style={{ width: 15, height: 15 }}></i>
                </span>
              </Card>
            ))}
          </div>
        </div>
      </section>
    );
  }

  function HomePage(props) {
    return (
      <main>
        <Hero {...props} />
        <Services {...props} />
        <ServiceHub {...props} />
        <How {...props} />
        <Safety {...props} />
        <CTABand {...props} />
      </main>
    );
  }
  window.KGHomePage = HomePage;
})();
