// Order Online — aggregator hub with branch-aware routing.
const { useState: useStateOrder } = React;

function PageOrder({ navigate }) {
  const [platform, setPlatform] = useStateOrder('talabat');
  const [branchId, setBranchId] = useStateOrder('mirdif');
  const branch = window.BRANCHES.find(b => b.id === branchId);
  const url = branch && branch.deeplinks[platform];

  const platforms = [
    { id: 'talabat', name: 'Talabat', tagline: '4.7 ★ across 1,921 ratings', accent: '#FF5A00', best: true },
    { id: 'deliveroo', name: 'Deliveroo', tagline: 'Fast UAE coverage', accent: '#00CCBC', best: false },
    { id: 'careem', name: 'Careem', tagline: 'Pair with the ride home', accent: '#0BC495', best: false },
  ];

  return (
    <main className="fade-enter">
      <section style={{ background: 'var(--charcoal)', color: 'var(--paper)', padding: '80px 0 64px' }}>
        <div className="container container--wide">
          <div className="eyebrow" style={{ color: 'var(--saffron)' }}>Order online</div>
          <h1 style={{ fontSize: 'clamp(48px, 6vw, 84px)', lineHeight: 1.02, marginTop: 14, color: 'var(--paper)' }}>
            Pick your <span style={{ color: 'var(--saffron)', fontStyle: 'italic' }}>app</span>.<br/>
            Pick your <span style={{ color: 'var(--terracotta)', fontStyle: 'italic' }}>branch</span>.<br/>
            We'll fire the grill.
          </h1>
          <p style={{ maxWidth: 600, fontSize: 17, color: 'rgba(245,235,220,0.7)', marginTop: 24, lineHeight: 1.6 }}>
            Same menu on all three aggregators; pricing can vary a few dirhams between platforms.
            For catering, use the inquiry form — not Talabat.
          </p>
        </div>
      </section>

      <section style={{ padding: '64px 0' }}>
        <div className="container container--wide">
          {/* Step 1: platform */}
          <Step n="01" label="Pick a platform">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginTop: 20 }} className="plat-grid">
              {platforms.map(p => (
                <button
                  key={p.id}
                  onClick={() => setPlatform(p.id)}
                  style={{
                    background: 'var(--paper)',
                    border: '2px solid ' + (platform === p.id ? p.accent : 'var(--line)'),
                    borderRadius: 'var(--radius)',
                    padding: '24px 28px',
                    textAlign: 'left',
                    cursor: 'pointer',
                    transition: 'border-color .15s, box-shadow .15s',
                    boxShadow: platform === p.id ? `0 8px 24px ${p.accent}30` : 'none',
                    position: 'relative',
                  }}
                >
                  {p.best && (
                    <div style={{
                      position: 'absolute', top: 16, right: 16,
                      background: 'var(--saffron)', color: 'var(--charcoal)',
                      padding: '3px 8px', borderRadius: 4,
                      fontFamily: 'var(--font-mono)', fontSize: 9, letterSpacing: '0.12em', fontWeight: 700,
                    }}>STRONGEST RATING</div>
                  )}
                  <div style={{ width: 44, height: 44, borderRadius: 12, background: p.accent, color: 'var(--paper)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 22 }}>
                    {p.name[0]}
                  </div>
                  <div className="serif" style={{ fontSize: 24, fontWeight: 600, color: 'var(--charcoal)', marginTop: 18 }}>{p.name}</div>
                  <div style={{ fontSize: 13, color: 'var(--ink-2)', marginTop: 4 }}>{p.tagline}</div>
                  {platform === p.id && <div style={{ position: 'absolute', bottom: 16, right: 16, color: p.accent, fontSize: 18 }}>✓</div>}
                </button>
              ))}
            </div>
          </Step>

          {/* Step 2: branch */}
          <Step n="02" label="Pick the branch to deliver from">
            <BranchPicker selected={branchId} setSelected={setBranchId} platform={platform} />
          </Step>

          {/* Step 3: launch */}
          <Step n="03" label="Launch the order">
            <div style={{
              marginTop: 20,
              padding: 32,
              background: 'var(--cream)',
              borderRadius: 'var(--radius)',
              display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 24, flexWrap: 'wrap',
            }}>
              <div>
                <div className="mono" style={{ fontSize: 11, letterSpacing: '0.12em', color: 'var(--terracotta)' }}>READY TO ORDER</div>
                <div className="serif" style={{ fontSize: 26, color: 'var(--charcoal)', marginTop: 8, fontWeight: 600 }}>
                  {platforms.find(p => p.id === platform).name} → {branch.name}
                </div>
                {!url && <div style={{ fontSize: 13, color: '#A14B33', marginTop: 6 }}>⚠ This branch isn't on {platform}. Switch platforms or pick another branch.</div>}
              </div>
              {url ? (
                <a className="btn btn--primary" href={url} target="_blank" rel="noopener">
                  Open in {platforms.find(p => p.id === platform).name} <Icon.external width="14" height="14" />
                </a>
              ) : (
                <button className="btn btn--ghost" disabled>Not available here</button>
              )}
            </div>
          </Step>
        </div>
      </section>

      <style>{`@media (max-width: 820px) { .plat-grid { grid-template-columns: 1fr !important; } }`}</style>
    </main>
  );
}

function Step({ n, label, children }) {
  return (
    <div style={{ marginBottom: 56 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 16 }}>
        <span className="serif" style={{ fontSize: 28, color: 'var(--terracotta)', fontWeight: 600 }}>{n}</span>
        <h3 style={{ fontSize: 22, fontWeight: 500 }}>{label}</h3>
      </div>
      {children}
    </div>
  );
}

function BranchPicker({ selected, setSelected, platform }) {
  const groups = [
    { emirate: 'Dubai', branches: window.BRANCHES.filter(b => b.emirate === 'Dubai') },
    { emirate: 'Abu Dhabi', branches: window.BRANCHES.filter(b => b.emirate === 'Abu Dhabi') },
  ];
  return (
    <div style={{ marginTop: 20 }}>
      {groups.map(g => (
        <div key={g.emirate} style={{ marginBottom: 28 }}>
          <div className="mono" style={{ fontSize: 11, letterSpacing: '0.14em', color: 'var(--ink-3)', marginBottom: 12 }}>
            {g.emirate.toUpperCase()} · {g.branches.length} outlets
          </div>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 10 }} className="branch-pick-grid">
            {g.branches.map(b => {
              const available = !!b.deeplinks[platform];
              const isSelected = selected === b.id;
              return (
                <button
                  key={b.id}
                  onClick={() => setSelected(b.id)}
                  disabled={!available}
                  style={{
                    padding: '14px 16px', textAlign: 'left',
                    background: isSelected ? 'var(--charcoal)' : 'var(--paper)',
                    color: isSelected ? 'var(--paper)' : (available ? 'var(--charcoal)' : 'var(--ink-3)'),
                    border: '1px solid ' + (isSelected ? 'var(--charcoal)' : 'var(--line)'),
                    borderRadius: 'var(--radius)',
                    opacity: available ? 1 : 0.5,
                    cursor: available ? 'pointer' : 'not-allowed',
                    transition: 'all .12s',
                  }}
                >
                  <div className="serif" style={{ fontSize: 16, fontWeight: 600 }}>{b.name}</div>
                  <div style={{ fontSize: 11, opacity: 0.7, marginTop: 2 }}>{b.sub}</div>
                  {!available && <div className="mono" style={{ fontSize: 9, color: '#A14B33', marginTop: 6, letterSpacing: '0.08em' }}>NOT ON {platform.toUpperCase()}</div>}
                </button>
              );
            })}
          </div>
        </div>
      ))}
      <style>{`@media (max-width: 920px) { .branch-pick-grid { grid-template-columns: 1fr 1fr !important; } }`}</style>
    </div>
  );
}

window.PageOrder = PageOrder;