/* Landing screens v2 — Splash (SSO) + Two-paths page modeled on reference */
/* globals React, Icon, UberMark, UberEatsMark */

// ——————— Splash (full-bleed + SSO) ———————
const Splash = ({ onEnter }) => {
  const [hover, setHover] = React.useState(false);
  return (
    <div style={{ position:'fixed', inset: 0, width:'100vw', height:'100vh', overflow:'hidden', background:'#000', color:'#fff', fontFamily:'var(--font)' }}>
      {/* Full-bleed hero image */}
      <img src="images/splash-hero.png" alt="" aria-hidden="true" style={{
        position:'absolute', inset: 0, width:'100%', height:'100%', objectFit:'cover', objectPosition:'center'
      }}/>
      {/* Dark gradient overlay for text 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.2) 75%, rgba(0,0,0,0.1) 100%), linear-gradient(180deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.5) 100%)'
      }}/>

      {/* Top-left: logo */}
      <div style={{ position:'absolute', top: 36, left: 48, display:'flex', alignItems:'center', gap: 14 }}>
        <UberMark size={26} color="#fff"/>
        <span style={{ width: 1, height: 22, background:'rgba(255,255,255,0.25)' }}/>
        <span style={{ fontSize: 14, fontWeight: 500, letterSpacing:'-0.01em', opacity: 0.85 }}>Employee Store</span>
      </div>

      {/* Content card bottom-left */}
      <div style={{ position:'absolute', left: 48, bottom: 48, width: 800 }}>
        <div style={{ display:'inline-flex', alignItems:'center', gap: 8, padding:'7px 12px', background:'rgba(255,255,255,0.08)', backdropFilter:'blur(10px)', WebkitBackdropFilter:'blur(10px)', borderRadius: 999, fontSize: 12, fontWeight: 500, letterSpacing:'-0.01em', marginBottom: 24 }}>
          <span style={{ width: 6, height: 6, borderRadius:'50%', background:'var(--u-eats)' }}/>
          Uber internal · SSO required
        </div>
        <h1 style={{ fontFamily:'var(--font-display)', margin: 0, fontSize: 'clamp(44px, 5.2vw, 76px)', fontWeight: 700, letterSpacing:'-0.045em', lineHeight: 0.98 }}>
          Welcome to the <br/>Uber Employee Store.
        </h1>
        <p style={{ margin:'22px 0 36px', fontSize: 17, lineHeight: 1.5, opacity: 0.7, maxWidth: 480 }}>
          Official merch, gifting, and program kits for every team at Uber. Sign in with your Uber SSO to get started.
        </p>

        <button
          onClick={onEnter}
          onMouseEnter={() => setHover(true)}
          onMouseLeave={() => setHover(false)}
          className="btn"
          style={{
            background: hover ? '#fff' : 'rgba(255,255,255,0.95)',
            color: '#000',
            gap: 12,
            transition:'background 140ms, transform 140ms, box-shadow 140ms',
            transform: hover ? 'translateY(-1px)' : 'none',
            boxShadow: hover ? '0 16px 40px rgba(255,255,255,0.15)' : '0 8px 24px rgba(0,0,0,0.4)',
          }}>
          <OktaGlyph/>
          <span>Continue with Uber SSO</span>
          <span style={{ width: 1, height: 16, background:'rgba(0,0,0,0.15)' }}/>
          <Icon name="arrow-right" size={16}/>
        </button>

        <div style={{ marginTop: 20, fontSize: 12, opacity: 0.55, display:'flex', alignItems:'center', gap: 10 }}>
          <Icon name="shield" size={14}/>
          <span>Secured by Okta · you'll be redirected to auth.uber.com</span>
        </div>
      </div>

      {/* Bottom-right footer text */}
      <div style={{ position:'absolute', right: 48, bottom: 48, textAlign:'right', fontSize: 12, opacity: 0.5, lineHeight: 1.6 }}>
        <div>Need help? <span style={{ textDecoration:'underline' }}>#help-employee-store</span></div>
        <div>Brand Desk · brand@uber.com</div>
      </div>
    </div>
  );
};

const OktaGlyph = () => (
  // Simple circle / ring mark to suggest SSO provider without mimicking a specific logo
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
    <circle cx="10" cy="10" r="8.5" stroke="#000" strokeWidth="2"/>
    <circle cx="10" cy="10" r="3.25" fill="#000"/>
  </svg>
);

window.Splash = Splash;

// ——————— Two-paths landing (modeled on reference) ———————
const TwoPaths = ({ onPick, user }) => {
  return (
    <div style={{ background:'#000', color:'#fff', minHeight:'100vh', fontFamily:'var(--font)' }}>
      {/* Top nav */}
      <header style={{ background:'#000', color:'#fff', borderBottom:'1px solid rgba(255,255,255,0.08)' }}>
        <div style={{ maxWidth: 1440, margin:'0 auto', padding:'18px 32px', display:'flex', alignItems:'center', justifyContent:'space-between' }}>
          <div style={{ display:'flex', alignItems:'center', gap: 16 }}>
            <UberMark size={22} color="#fff"/>
            <span style={{ width: 1, height: 18, background:'rgba(255,255,255,0.25)' }}/>
            <span style={{ fontSize: 14, fontWeight: 500 }}>Employee Store</span>
          </div>
          <div style={{ display:'flex', alignItems:'center', gap: 28, fontSize: 13 }}>
            <span style={{ display:'flex', alignItems:'center', gap: 6, opacity: 0.85 }}><Icon name="globe" size={14}/>EN</span>
            <span style={{ display:'flex', alignItems:'center', gap: 8, opacity: 0.85 }}>
              <span style={{ width: 22, height: 22, borderRadius:'50%', background:'#2a2a2a', display:'inline-flex', alignItems:'center', justifyContent:'center', fontSize: 10, fontWeight: 600 }}>{user?.initials || 'JC'}</span>
              <span>{user?.name || 'Jordan Chen'}</span>
            </span>
            <span style={{ display:'flex', alignItems:'center', gap: 6, opacity: 0.85 }}><Icon name="cart" size={14}/>0</span>
          </div>
        </div>
      </header>

      {/* Hero headline */}
      <section style={{ position:'relative', padding:'72px 32px 40px', textAlign:'center' }}>
        <div style={{ position:'absolute', inset: 0, zIndex: 0, opacity: 0.5,
          backgroundImage: 'radial-gradient(700px 260px at 50% 0%, rgba(6,193,103,0.18), transparent 70%)' }}/>
        <div style={{ position:'relative' }}>
          <h1 style={{ fontFamily:'var(--font-display)', margin: 0, fontSize: 'clamp(44px, 5.5vw, 72px)', fontWeight: 700, letterSpacing:'-0.04em', lineHeight: 1 }}>
            One store. Two paths.
          </h1>
          <p style={{ marginTop: 14, fontSize: 17, opacity: 0.7 }}>Choose how you want to order.</p>
        </div>
      </section>

      {/* Two path cards, split hero with imagery placement */}
      <section style={{ maxWidth: 1440, margin:'0 auto', padding:'0 32px 40px' }}>
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap: 20 }}>
          <PathCard
            kind="corporate"
            eyebrow="Corporate order"
            title="For teams, programs, events, and bulk orders."
            badge="Integrated with Coupa & Zip"
            bullets={[
              'PO-based ordering',
              'Routed through Coupa / Zip',
              'PR & PO generation',
              'Approval workflow',
              'Ideal for teams and programs',
            ]}
            ctaLabel="Start a team order"
            footerSteps={[
              { icon: 'doc', t: 'Submit request', sub: 'Create PR' },
              { icon: 'building', t: 'Generate PO', sub: 'Through Coupa/Zip' },
              { icon: 'check', t: 'Approval', sub: 'Route for approval' },
              { icon: 'truck', t: 'Fulfillment', sub: 'We deliver it' },
            ]}
            footerNote="Featuring Uber & Uber Eats merchandise"
            onPick={() => onPick('corporate')}
          />
          <PathCard
            kind="personal"
            eyebrow="Personal order"
            title="For you. Shop and pay with your personal credit card."
            bullets={[
              'Add items to cart',
              'Enter shipping information',
              'Pay securely with credit card',
              'Ship to your door',
              'Returns made easy',
            ]}
            ctaLabel="Shop for yourself"
            footerSteps={[
              { icon: 'cart', t: 'Add to cart' },
              { icon: 'doc', t: 'Checkout' },
              { icon: 'shield', t: 'Pay' },
              { icon: 'truck', t: 'Delivered' },
            ]}
            footerNote="Featuring Uber & Uber Eats merchandise"
            onPick={() => onPick('personal')}
          />
        </div>
      </section>

      {/* Bottom feature bar */}
      <section style={{ background:'#0a0a0a', borderTop:'1px solid rgba(255,255,255,0.06)' }}>
        <div style={{ maxWidth: 1440, margin:'0 auto', padding:'28px 32px', display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap: 24 }}>
          {[
            { i:'globe', t:'Global reach', d:'We deliver worldwide' },
            { i:'shield', t:'Secure payments', d:'Your information is safe' },
            { i:'gift', t:'Sustainable choices', d:'Better for people and planet' },
            { i:'doc', t:'Need help?', d:'Visit our help center' },
          ].map(f => (
            <div key={f.t} style={{ display:'flex', gap: 14, alignItems:'center' }}>
              <div style={{ width: 36, height: 36, borderRadius: 999, background:'rgba(255,255,255,0.06)', display:'flex', alignItems:'center', justifyContent:'center', color:'#fff' }}>
                <Icon name={f.i} size={16}/>
              </div>
              <div>
                <div style={{ fontSize: 14, fontWeight: 600 }}>{f.t}</div>
                <div style={{ fontSize: 12, opacity: 0.55 }}>{f.d}</div>
              </div>
            </div>
          ))}
        </div>
      </section>
    </div>
  );
};
window.TwoPaths = TwoPaths;

// ——————— Path Card (inner) ———————
const PathCard = ({ kind, eyebrow, title, badge, bullets, ctaLabel, footerSteps, footerNote, onPick }) => {
  const isCorp = kind === 'corporate';
  const bg = isCorp ? '#0B0B0B' : '#F6F4EE';
  const fg = isCorp ? '#fff' : '#111';
  const sub = isCorp ? 'rgba(255,255,255,0.6)' : 'rgba(0,0,0,0.6)';
  const border = isCorp ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.08)';
  const iconBg = isCorp ? 'rgba(255,255,255,0.08)' : 'rgba(0,0,0,0.06)';
  const iconFg = isCorp ? '#fff' : '#111';

  // Personal card: full-card background image, content in a left column (unchanged copy)
  if (!isCorp) {
    return (
      <article style={{ position:'relative', background: bg, color: fg, borderRadius: 14, overflow:'hidden', minHeight: 640, display:'flex', flexDirection:'column' }}>
        {/* Placeholder (shown until image loads / if image fails) */}
        <div aria-hidden="true" style={{
          position:'absolute', inset: 0, zIndex: 0,
          background: 'radial-gradient(600px 400px at 80% 50%, rgba(6,193,103,0.1), transparent 70%), #EDE8DC',
        }}/>
        <div aria-hidden="true" style={{
          position:'absolute', inset: 0, zIndex: 0, opacity: 0.4,
          backgroundImage: 'linear-gradient(135deg, transparent 49.5%, rgba(0,0,0,0.05) 49.5%, rgba(0,0,0,0.05) 50.5%, transparent 50.5%), linear-gradient(45deg, transparent 49.5%, rgba(0,0,0,0.05) 49.5%, rgba(0,0,0,0.05) 50.5%, transparent 50.5%)',
          backgroundSize: '16px 16px',
        }}/>
        {/* Full-card background image (images/personal-hero.png) */}
        <img src="images/personal-hero.png?v=3" alt="" aria-hidden="true"
          onError={(e) => { e.currentTarget.style.display = 'none'; }}
          style={{ position:'absolute', inset: 0, width:'100%', height:'100%', objectFit:'cover', objectPosition:'right center', zIndex: 1 }}/>

        {/* Content column (left) */}
        <div style={{ position:'relative', zIndex: 3, padding: '28px 32px 24px', display:'flex', flexDirection:'column', gap: 16, flex: 1 }}>
          <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
            <div style={{ width: 40, height: 40, borderRadius: 999, background: '#fff', display:'flex', alignItems:'center', justifyContent:'center', color: '#111', boxShadow:'0 1px 3px rgba(0,0,0,0.08)' }}>
              <Icon name="user" size={18}/>
            </div>
            <div style={{ fontFamily:'var(--font-display)', fontSize: 24, fontWeight: 700, letterSpacing:'-0.02em' }}>{eyebrow}</div>
          </div>

          <div style={{ fontSize: 15, lineHeight: 1.45, color: sub, maxWidth: 340 }}>{title}</div>

          <div style={{ height: 1, background:'rgba(0,0,0,0.1)', maxWidth: 340 }}/>

          <ul style={{ listStyle:'none', padding: 0, margin: '4px 0 8px', display:'grid', gap: 10, maxWidth: 340 }}>
            {bullets.map(b => (
              <li key={b} style={{ display:'flex', alignItems:'center', gap: 10, fontSize: 14, whiteSpace:'nowrap' }}>
                <span style={{ flexShrink: 0, width: 18, height: 18, borderRadius:'50%', background: 'rgba(6,193,103,0.15)', color:'var(--u-eats)', display:'inline-flex', alignItems:'center', justifyContent:'center' }}>
                  <Icon name="check" size={11}/>
                </span>
                <span style={{ color:'#1b1b1b' }}>{b}</span>
              </li>
            ))}
          </ul>

          <div style={{ marginTop: 'auto' }}>
            <button onClick={onPick} className="btn" style={{ background:'var(--u-eats)', color:'#000' }}>
              {ctaLabel}
              <Icon name="arrow-right" size={16}/>
            </button>
            <div style={{ marginTop: 10, fontSize: 12, color: sub, display:'flex', alignItems:'center', gap: 6 }}>
              Learn more about personal ordering <Icon name="arrow-right" size={12}/>
            </div>
          </div>

          {/* Flow strip — opaque white-ish so it reads over the image */}
          <div style={{ marginTop: 14, padding:'14px 16px', background:'rgba(255,255,255,0.85)', backdropFilter:'blur(4px)', WebkitBackdropFilter:'blur(4px)', border: `1px solid ${border}`, borderRadius: 14, display:'flex', alignItems:'center', gap: 10, justifyContent:'space-between', overflow:'hidden' }}>
            {footerSteps.map((s, i) => (
              <React.Fragment key={s.t}>
                <div style={{ display:'flex', alignItems:'center', gap: 8, minWidth: 0 }}>
                  <div style={{ flexShrink: 0, width: 28, height: 28, borderRadius: 8, background:'rgba(0,0,0,0.06)', color:'#111', display:'flex', alignItems:'center', justifyContent:'center' }}>
                    <Icon name={s.icon} size={14}/>
                  </div>
                  <div style={{ minWidth: 0 }}>
                    <div style={{ fontSize: 12, fontWeight: 600, whiteSpace:'nowrap' }}>{s.t}</div>
                    {s.sub && <div style={{ fontSize: 10, color: sub, whiteSpace:'nowrap' }}>{s.sub}</div>}
                  </div>
                </div>
                {i < footerSteps.length - 1 && (
                  <div style={{ color: sub, fontSize: 12, flexShrink: 0 }}>→</div>
                )}
              </React.Fragment>
            ))}
          </div>

          <div style={{ marginTop: 4, fontSize: 11, color: sub, textAlign:'center', letterSpacing:'0.02em' }}>
            {footerNote}
          </div>
        </div>
      </article>
    );
  }

  // Corporate card — full-card background image, content in a left column
  return (
    <article style={{ position:'relative', background: bg, color: fg, borderRadius: 14, overflow:'hidden', minHeight: 640, display:'flex', flexDirection:'column' }}>
      {/* Placeholder (shown until image loads / if image fails) */}
      <div aria-hidden="true" style={{
        position:'absolute', inset: 0, zIndex: 0,
        background: 'radial-gradient(600px 400px at 80% 50%, rgba(255,255,255,0.04), transparent 70%), #000',
      }}/>
      <div aria-hidden="true" style={{
        position:'absolute', inset: 0, zIndex: 0, opacity: 0.4,
        backgroundImage: 'linear-gradient(135deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%), linear-gradient(45deg, transparent 49.5%, rgba(255,255,255,0.05) 49.5%, rgba(255,255,255,0.05) 50.5%, transparent 50.5%)',
        backgroundSize: '16px 16px',
      }}/>
      {/* Full-card background image (images/corporate-hero.png) */}
      <img src="images/corporate-hero.png?v=3" alt="" aria-hidden="true"
        onError={(e) => { e.currentTarget.style.display = 'none'; }}
        style={{ position:'absolute', inset: 0, width:'100%', height:'100%', objectFit:'cover', objectPosition:'right center', zIndex: 1 }}/>

      {/* Content column (left) */}
      <div style={{ position:'relative', zIndex: 3, padding: '28px 32px 24px', display:'flex', flexDirection:'column', gap: 16, flex: 1 }}>
        <div style={{ display:'flex', alignItems:'center', gap: 12 }}>
          <div style={{ width: 40, height: 40, borderRadius: 999, background: iconBg, display:'flex', alignItems:'center', justifyContent:'center', color: iconFg }}>
            <Icon name="building" size={18}/>
          </div>
          <div style={{ fontFamily:'var(--font-display)', fontSize: 24, fontWeight: 700, letterSpacing:'-0.02em' }}>{eyebrow}</div>
        </div>

        <div style={{ fontSize: 15, lineHeight: 1.45, color: sub, maxWidth: 340 }}>{title}</div>

        {badge && (
          <div style={{ display:'inline-flex', alignSelf:'flex-start', alignItems:'center', gap: 8, padding:'7px 12px', background: 'rgba(255,255,255,0.1)', backdropFilter:'blur(4px)', WebkitBackdropFilter:'blur(4px)', border: `1px solid ${border}`, borderRadius: 999, fontSize: 12, fontWeight: 500, whiteSpace:'nowrap' }}>
            <Icon name="doc" size={13}/>
            <span>{badge}</span>
          </div>
        )}

        <ul style={{ listStyle:'none', padding: 0, margin: '4px 0 8px', display:'grid', gap: 10, maxWidth: 340 }}>
          {bullets.map(b => (
            <li key={b} style={{ display:'flex', alignItems:'center', gap: 10, fontSize: 14, whiteSpace:'nowrap' }}>
              <span style={{ flexShrink: 0, width: 18, height: 18, borderRadius:'50%', background: 'rgba(6,193,103,0.2)', color:'var(--u-eats)', display:'inline-flex', alignItems:'center', justifyContent:'center' }}>
                <Icon name="check" size={11}/>
              </span>
              <span style={{ color: 'rgba(255,255,255,0.9)' }}>{b}</span>
            </li>
          ))}
        </ul>

        <div style={{ marginTop: 'auto' }}>
          <button onClick={onPick} className="btn" style={{ background:'#fff', color:'#000' }}>
            {ctaLabel}
            <Icon name="arrow-right" size={16}/>
          </button>
          <div style={{ marginTop: 10, fontSize: 12, color: sub, display:'flex', alignItems:'center', gap: 6 }}>
            Learn more about corporate ordering <Icon name="arrow-right" size={12}/>
          </div>
        </div>

        {/* Flow strip */}
        <div style={{ marginTop: 14, padding:'14px 16px', background: 'rgba(11,11,11,0.7)', backdropFilter:'blur(6px)', WebkitBackdropFilter:'blur(6px)', border: `1px solid ${border}`, borderRadius: 14, display:'flex', alignItems:'center', gap: 10, justifyContent:'space-between', overflow:'hidden' }}>
          {footerSteps.map((s, i) => (
            <React.Fragment key={s.t}>
              <div style={{ display:'flex', alignItems:'center', gap: 8, minWidth: 0 }}>
                <div style={{ flexShrink: 0, width: 28, height: 28, borderRadius: 8, background: 'rgba(255,255,255,0.08)', color: '#fff', display:'flex', alignItems:'center', justifyContent:'center' }}>
                  <Icon name={s.icon} size={14}/>
                </div>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 12, fontWeight: 600, whiteSpace:'nowrap' }}>{s.t}</div>
                  {s.sub && <div style={{ fontSize: 10, color: sub, whiteSpace:'nowrap' }}>{s.sub}</div>}
                </div>
              </div>
              {i < footerSteps.length - 1 && (
                <div style={{ color: sub, fontSize: 12, flexShrink: 0 }}>→</div>
              )}
            </React.Fragment>
          ))}
        </div>

        <div style={{ marginTop: 4, fontSize: 11, color: sub, textAlign:'center', letterSpacing:'0.02em' }}>
          {footerNote}
        </div>
      </div>
    </article>
  );
};