/* Landing, PLP, PDP, Access code, ERG, Exec */
/* globals React, Icon, UberMark, ProductImage */
const { useState: useStateL } = React;

// ——————— Landing Page ———————
const Landing = ({ onNav, setMode }) => {
  return (
    <div>
      {/* Hero */}
      <section style={{ background: '#000', color: '#fff', position: 'relative', overflow: 'hidden' }}>
        {/* Full-bleed hero image */}
        <img src="images/store-hero.webp" alt="" aria-hidden="true" style={{ position:'absolute', inset: 0, width:'100%', height:'100%', objectFit:'cover', objectPosition:'center 35%' }}/>
        {/* Gradient overlay for legibility */}
        <div aria-hidden="true" style={{ position:'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.15) 75%, rgba(0,0,0,0.05) 100%)' }}/>
        <div style={{ position:'relative', maxWidth: 1440, margin: '0 auto', padding: '120px 32px 120px' }}>
          <div style={{ maxWidth: 720 }}>
            <div className="chip chip-eats" style={{ marginBottom: 20 }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--u-eats)' }}/> Now live globally
            </div>
            <h1 className="u-h1" style={{ margin: 0, marginBottom: 20 }}>The official Uber employee store.</h1>
            <p style={{ fontSize: 18, lineHeight: 1.5, opacity: 0.85, maxWidth: 520, margin: 0, marginBottom: 32 }}>
              Apparel, accessories, gifting, and program kits — seamlessly branded, globally shippable, and routed through Brand Desk for every team at Uber.
            </p>
            <div style={{ display: 'flex', gap: 12 }}>
              <button onClick={() => onNav('browse')} className="btn btn-eats">Shop all<Icon name="arrow-right" size={16}/></button>
              <button onClick={() => onNav('access-code')} className="btn" style={{ background:'rgba(0,0,0,0.4)', color:'#fff', backdropFilter:'blur(8px)', WebkitBackdropFilter:'blur(8px)', boxShadow: 'inset 0 0 0 1px rgba(255,255,255,0.3)' }}>I have an access code</button>
            </div>
          </div>
        </div>
      </section>

      {/* Categories */}
      <section style={{ maxWidth: 1440, margin: '0 auto', padding: '64px 32px 32px' }}>
        <div className="uppercase" style={{ color: 'var(--u-text-3)', marginBottom: 8 }}>Browse by category</div>
        <h2 className="u-h2" style={{ margin: 0, marginBottom: 32 }}>Every category, on-brand.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12 }}>
          {[
            { k: 'apparel', label: 'Apparel', cls: 'is-eats', img: 'images/categories/apparel.jpg' },
            { k: 'accessories', label: 'Accessories', cls: '', img: 'images/categories/accessories.jpg' },
            { k: 'drinkware', label: 'Drinkware', cls: 'is-black', img: 'images/categories/drinkware.jpg' },
            { k: 'tech', label: 'Tech', cls: 'is-black', img: 'images/categories/tech.jpg' },
            { k: 'kits', label: 'Gift kits', cls: '', img: 'images/categories/kits.jpg' },
          ].map(c => (
            <button key={c.k} onClick={() => onNav(c.k)} style={{ background: 'transparent', border: 0, padding: 0, cursor: 'pointer', textAlign: 'left' }}>
              {c.img ? (
                <div style={{ aspectRatio: '4/5', borderRadius: 14, overflow: 'hidden', background: 'var(--u-surface-2)' }}>
                  <img src={c.img} alt={c.label} style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}/>
                </div>
              ) : (
                <div className={`img-ph ${c.cls}`} style={{ aspectRatio: '4/5', borderRadius: 14 }}>
                  <div className="ph-label">{c.label}</div>
                </div>
              )}
              <div style={{ marginTop: 12, display:'flex', alignItems:'center', justifyContent:'space-between' }}>
                <span style={{ fontWeight: 600, fontSize: 15 }}>{c.label}</span>
                <Icon name="arrow-right" size={16}/>
              </div>
            </button>
          ))}
        </div>
      </section>

      {/* Executive tier */}
      <section style={{ background: '#0B0B0B', color: '#fff', marginTop: 64 }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '72px 32px', display: 'grid', gridTemplateColumns: '1fr 1.2fr', gap: 64, alignItems: 'center' }}>
          <div>
            <div className="chip chip-gold" style={{ marginBottom: 20 }}>Presentation-grade</div>
            <h2 className="u-h2" style={{ margin: 0, marginBottom: 16 }}>Executive & client gifting.</h2>
            <p style={{ opacity: 0.7, fontSize: 17, lineHeight: 1.5, marginBottom: 24 }}>
              A curated tier of premium materials and presentation-ready packaging — for leadership gifting, board moments, and external-facing relationships.
            </p>
            <button onClick={() => onNav('executive')} className="btn btn-lg" style={{ background: 'var(--u-premium-gold)', color: '#1a1203' }}>View executive collection<Icon name="arrow-right" size={18}/></button>
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
            {(window.CATALOG.filter(p => p.tier === 'premium')).map(p => (
              <div key={p.id}>
                <div style={{ aspectRatio: '3/4', borderRadius: 14, overflow: 'hidden' }}>
                  <ProductImage product={p} aspect="3 / 4" showLabel={false}/>
                </div>
                <div style={{ marginTop: 10, fontSize: 13, fontWeight: 500 }}>{p.name}</div>
                <div style={{ fontSize: 12, opacity: 0.6 }}>${p.price}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* ERG collection */}
      <section style={{ background: '#fff', color: 'var(--u-text)', marginTop: 64, borderTop: '1px solid var(--u-line)', borderBottom: '1px solid var(--u-line)' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', padding: '72px 32px', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 64, alignItems: 'center' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 12 }}>
            {[
              { id: 'er-ap-01', img: 'images/erg/landing-tshirt-black.png?v=2', objectFit: 'cover' },
              { id: 'er-bg-02', img: 'images/erg/landing-tote.png', objectFit: 'cover' },
              { id: 'er-pl-pride', img: 'images/erg/landing-plush-pride.png', objectFit: 'cover' },
            ].map(tile => {
              const p = window.ERG_CATALOG.find(x => x.id === tile.id);
              return (
                <div key={p.id}>
                  <div style={{ aspectRatio: '3/4', borderRadius: 14, overflow: 'hidden', background: 'var(--u-surface-2)' }}>
                    {tile.img ? (
                      <img src={tile.img} alt={p.name} style={{ width: '100%', height: '100%', objectFit: tile.objectFit || 'cover', display: 'block' }}/>
                    ) : (
                      <ProductImage product={p} aspect="3 / 4" showLabel={false}/>
                    )}
                  </div>
                  <div style={{ marginTop: 10, fontSize: 13, fontWeight: 500 }}>{p.name}</div>
                  <div style={{ fontSize: 12, color: 'var(--u-text-2)' }}>${p.price}</div>
                </div>
              );
            })}
          </div>
          <div>
            <div className="uppercase" style={{ color: 'var(--u-text-3)', marginBottom: 12 }}>Programs & collections</div>
            <h2 className="u-h2" style={{ margin: 0, marginBottom: 16 }}>ERG collection.</h2>
            <p style={{ color: 'var(--u-text-2)', fontSize: 17, lineHeight: 1.5, marginBottom: 20 }}>
              Shared co-brandable apparel and bags, plus a plush keychain collectible for each of Uber's 15 Employee Resource Groups.
            </p>
            <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 8px', marginBottom: 28, maxWidth: 480 }}>
              {['Able','Asian','Black','Christians','EqualUber','Generations','Immigrants','Interfaith','Jewish','Los Ubers','Muslims','Parents','Pride','Veterans','Women'].map(n => (
                <span key={n} style={{ fontSize: 11, padding: '4px 9px', borderRadius: 100, border: '1px solid var(--u-line)', color: 'var(--u-text-2)' }}>{n}</span>
              ))}
            </div>
            <button onClick={() => onNav('erg')} className="btn btn-lg" style={{ background: '#000', color: '#fff' }}>Enter ERG store<Icon name="arrow-right" size={18}/></button>
          </div>
        </div>
      </section>

      {/* Info strip */}
      <section style={{ maxWidth: 1440, margin: '0 auto', padding: '64px 32px 32px' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 32, padding: '32px 0', borderTop: '1px solid var(--u-line)', borderBottom: '1px solid var(--u-line)' }}>
          {[
            { icon: 'truck', t: 'Global fulfillment', d: 'US, EMEA, APAC warehouses' },
            { icon: 'shield', t: 'Brand Desk reviewed', d: 'Every item approved' },
            { icon: 'doc', t: 'Finance-ready', d: 'Auto PO + receipt' },
            { icon: 'gift', t: 'Program kits', d: 'Code-based team access' },
          ].map(i => (
            <div key={i.t} style={{ display: 'flex', gap: 14, alignItems: 'start' }}>
              <Icon name={i.icon} size={22}/>
              <div>
                <div style={{ fontWeight: 600, fontSize: 15 }}>{i.t}</div>
                <div style={{ fontSize: 13, color: 'var(--u-text-2)', marginTop: 2 }}>{i.d}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};
window.Landing = Landing;