// PlatformShowcase — four capability tiles with an app preview
function PlatformShowcase() {
  const [active, setActive] = React.useState(0);
  const features = [
    { icon: 'zap', title: 'Instant freight quoting',
      desc: 'Live rates from 40+ carriers in under 200ms. Compare, book, and lock in lane pricing without emailing anyone.' },
    { icon: 'track', title: 'Shipment tracking',
      desc: 'Gate-in to last mile visibility. Milestone events, ETAs, exceptions — pushed to your dashboard, Slack, or API.' },
    { icon: 'docs', title: 'Document automation',
      desc: 'HBL, MBL, commercial invoice, packing list — generated, validated, and filed automatically for every booking.' },
    { icon: 'users', title: 'Customer portal',
      desc: 'Role-based access for ops, finance, and leadership. Multi-org, multi-currency, audit-logged.' },
  ];

  return (
    <section style={{ background: '#fff' }}>
      <div style={{ maxWidth: 1600, margin: '0 auto', padding: '104px 64px' }} className="platform-inner">
        <div className="platform-header" style={{ display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between', marginBottom: 48 }}>
          <div style={{ maxWidth: 720 }}>
            <div style={{ fontSize: 12, fontWeight: 600, letterSpacing: '0.06em',
              textTransform: 'uppercase', color: 'var(--accent-dark, #1846B0)' }}>Platform</div>
            <h2 style={{ margin: '12px 0 16px', fontSize: 48, fontWeight: 700, letterSpacing: '-0.03em',
              lineHeight: 1.05 }}>
              The operating system<br/>for moving freight.
            </h2>
            <p style={{ margin: 0, fontSize: 18, lineHeight: 1.55, color: '#475467', maxWidth: 560 }}>
              Every tool your ops team needs — quoting, tracking, documents, reporting — working from the
              same data, under one login.
            </p>
          </div>
          <Button variant="ghost" iconAfter="arrowRight">See the platform</Button>
        </div>

        <div className="platform-grid" style={{ display: 'grid', gridTemplateColumns: '0.9fr 1.1fr', gap: 40, alignItems: 'stretch' }}>
          {/* Feature list */}
          <div className="platform-features" style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {features.map((f, i) => (
              <button key={f.title} onClick={() => setActive(i)}
                style={{
                  display: 'flex', gap: 16, padding: 20, textAlign: 'left',
                  background: active===i ? '#fff' : 'transparent',
                  border: '1px solid', borderColor: active===i ? '#eaecf0' : 'transparent',
                  borderRadius: 12, cursor: 'pointer', fontFamily: 'inherit',
                  boxShadow: active===i ? '0 4px 12px -2px rgba(16,24,40,0.08)' : 'none',
                  transition: 'all 180ms cubic-bezier(0.16,1,0.3,1)',
                }}>
                <div style={{ width: 40, height: 40, borderRadius: 10, flex: '0 0 auto',
                  background: active===i ? '#1E57D6' : 'var(--accent-soft, #EFF6FF)',
                  color: active===i ? '#fff' : 'var(--accent-dark, #1846B0)',
                  display: 'grid', placeItems: 'center' }}>
                  <Icon name={f.icon} size={20} />
                </div>
                <div>
                  <div style={{ fontSize: 17, fontWeight: 600, color: '#101828',
                    letterSpacing: '-0.01em' }}>{f.title}</div>
                  <div style={{ fontSize: 14, color: '#475467', marginTop: 6, lineHeight: 1.55 }}>{f.desc}</div>
                </div>
              </button>
            ))}
          </div>

          {/* App preview */}
          <div className="platform-preview" style={{ background: '#f9fafb', border: '1px solid #eaecf0', borderRadius: 20, padding: 20,
            boxShadow: 'inset 0 1px 2px rgba(16,24,40,0.02)' }}>
            <div style={{ background: '#fff', borderRadius: 14, border: '1px solid #eaecf0',
              overflow: 'hidden', height: '100%', boxShadow: '0 12px 24px -6px rgba(16,24,40,0.10)' }}>
              {/* fake app chrome */}
              <div style={{ padding: '10px 14px', borderBottom: '1px solid #eaecf0',
                display: 'flex', alignItems: 'center', gap: 8, background: '#fcfcfd' }}>
                <div style={{ display: 'flex', gap: 6 }}>
                  <span style={{ width: 10, height: 10, borderRadius: 9999, background: '#f2f4f7' }}/>
                  <span style={{ width: 10, height: 10, borderRadius: 9999, background: '#f2f4f7' }}/>
                  <span style={{ width: 10, height: 10, borderRadius: 9999, background: '#f2f4f7' }}/>
                </div>
                <div style={{ marginLeft: 12, padding: '3px 10px', background: '#f2f4f7', borderRadius: 6,
                  fontSize: 11, color: '#667085', fontFamily: 'JetBrains Mono, monospace' }}>
                  app.abgroupshipping.com/{['rates','shipments','documents','team'][active]}
                </div>
              </div>

              {active === 0 && <RatePreview/>}
              {active === 1 && <TrackPreview/>}
              {active === 2 && <DocsPreview/>}
              {active === 3 && <TeamPreview/>}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function RatePreview() {
  const rows = [
    { c: 'MAERSK',   s: 'Ocean · FCL · 40′HC', t: '22d', p: '$2,840', tag: 'Cheapest', tone:'#ECFDF3', fg:'#027A48' },
    { c: 'CMA CGM',  s: 'Ocean · FCL · 40′HC', t: '19d', p: '$3,120', tag: 'Fastest', tone:'#EFF8FF', fg:'#175CD3' },
    { c: 'ONE',      s: 'Ocean · FCL · 40′HC', t: '24d', p: '$2,960', tag: '', tone:'', fg:'' },
    { c: 'HAPAG-LLOYD', s: 'Ocean · FCL · 40′HC', t: '21d', p: '$3,040', tag: '', tone:'', fg:'' },
  ];
  return (
    <div style={{ padding: 22 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: '0.06em', color: '#98a2b3', fontWeight: 600, textTransform: 'uppercase' }}>Rate Explorer</div>
          <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.015em', marginTop: 2 }}>CNSHA → USLGB</div>
        </div>
        <span style={{ padding: '3px 10px', background: 'var(--accent-soft, #EFF6FF)', color: 'var(--accent-dark, #1846B0)',
          borderRadius: 9999, fontSize: 11, fontWeight: 600, fontFamily: 'JetBrains Mono, monospace' }}>4 carriers · 182ms</span>
      </div>
      <div style={{ border: '1px solid #eaecf0', borderRadius: 10, overflow: 'hidden' }}>
        {rows.map((r, i) => (
          <div key={r.c} style={{ display: 'grid', gridTemplateColumns: '120px 1fr 70px 110px',
            alignItems: 'center', padding: '14px 16px', gap: 12,
            borderTop: i===0?'none':'1px solid #eaecf0', background: i===0?'#fcfcfd':'#fff' }}>
            <div style={{ fontSize: 13, fontWeight: 700, color: '#101828', letterSpacing: '0.02em' }}>{r.c}</div>
            <div>
              <div style={{ fontSize: 13, color: '#101828', fontWeight: 500 }}>{r.s}</div>
              {r.tag && <span style={{ display:'inline-block', marginTop: 4, padding:'1px 8px',
                background: r.tone, color: r.fg, borderRadius: 9999, fontSize: 10, fontWeight: 600,
                letterSpacing: '0.04em' }}>{r.tag.toUpperCase()}</span>}
            </div>
            <div style={{ fontSize: 13, fontFamily: 'JetBrains Mono, monospace', color: '#475467' }}>{r.t}</div>
            <div style={{ fontSize: 16, fontWeight: 700, color: '#101828', textAlign: 'right',
              fontVariantNumeric: 'tabular-nums' }}>{r.p}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function TrackPreview() {
  const events = [
    { t: 'Apr 20 · 09:42', e: 'Gate out — Port of Long Beach', active: true, dot:'#12B76A' },
    { t: 'Apr 18 · 17:03', e: 'Arrived — Long Beach, US', dot:'#1E57D6' },
    { t: 'Apr 17 · 04:21', e: 'Vessel departed — Yokohama, JP', dot:'#1E57D6' },
    { t: 'Mar 28 · 22:08', e: 'Loaded on MSC GAIA V.214W', dot:'#1E57D6' },
    { t: 'Mar 26 · 11:00', e: 'Booking confirmed — CNSHA', dot:'#98A2B3' },
  ];
  return (
    <div style={{ padding: 22 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: '0.06em', color: '#98a2b3', fontWeight: 600, textTransform: 'uppercase' }}>Shipment</div>
          <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.015em', marginTop: 2,
            fontFamily: 'JetBrains Mono, monospace' }}>ABGS-7F42-2026</div>
        </div>
        <span style={{ padding: '3px 10px', background: '#ECFDF3', color: '#027A48',
          borderRadius: 9999, fontSize: 11, fontWeight: 600, letterSpacing: '0.04em' }}>IN TRANSIT</span>
      </div>
      <div style={{ padding: 16, background: '#fcfcfd', border: '1px solid #eaecf0', borderRadius: 10,
        marginBottom: 16, display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div>
          <div style={{ fontSize: 11, color: '#98a2b3', letterSpacing: '0.04em',
            textTransform: 'uppercase', fontWeight: 600 }}>Shanghai → Long Beach</div>
          <div style={{ fontSize: 13, color: '#344054', marginTop: 4 }}>ETA April 22 · Ocean FCL · 40′HC</div>
        </div>
        <div style={{ textAlign: 'right' }}>
          <div style={{ fontSize: 20, fontWeight: 700, fontVariantNumeric: 'tabular-nums', color: '#101828',
            letterSpacing: '-0.01em' }}>92%</div>
          <div style={{ fontSize: 11, color: '#98a2b3' }}>on route</div>
        </div>
      </div>
      <div style={{ position: 'relative' }}>
        {events.map((ev, i) => (
          <div key={i} style={{ display: 'grid', gridTemplateColumns: '16px 1fr auto', gap: 12,
            padding: '10px 0', alignItems: 'start' }}>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
              <div style={{ width: 10, height: 10, borderRadius: 9999, background: ev.dot,
                boxShadow: ev.active ? `0 0 0 4px ${ev.dot}33` : 'none', marginTop: 4 }}/>
              {i < events.length-1 && <div style={{ flex: 1, width: 1, background: '#eaecf0', minHeight: 20, marginTop: 2 }}/>}
            </div>
            <div style={{ fontSize: 13, color: ev.active?'#101828':'#475467', fontWeight: ev.active?600:400 }}>
              {ev.e}
            </div>
            <div style={{ fontSize: 11, color: '#98a2b3', fontFamily: 'JetBrains Mono, monospace', whiteSpace:'nowrap' }}>{ev.t}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function DocsPreview() {
  const docs = [
    { n: 'House Bill of Lading', s: 'HBL-874122', st: 'Signed', tone: '#ECFDF3', fg: '#027A48' },
    { n: 'Commercial Invoice',   s: 'INV-2026-0834', st: 'Auto-filed', tone: 'var(--accent-soft, #EFF6FF)', fg: 'var(--accent-dark, #1846B0)' },
    { n: 'Packing List',         s: 'PL-0834', st: 'Auto-filed', tone: 'var(--accent-soft, #EFF6FF)', fg: 'var(--accent-dark, #1846B0)' },
    { n: 'Customs Declaration',  s: 'CBP-4412', st: 'Pending', tone: '#FFFAEB', fg: '#B54708' },
    { n: 'Certificate of Origin',s: 'COO-1122', st: 'Signed', tone: '#ECFDF3', fg: '#027A48' },
  ];
  return (
    <div style={{ padding: 22 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: '0.06em', color: '#98a2b3', fontWeight: 600, textTransform: 'uppercase' }}>Documents</div>
          <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.015em', marginTop: 2 }}>Auto-generated for ABGS-7F42</div>
        </div>
        <Button variant="secondary" size="sm" icon="download">Export all</Button>
      </div>
      <div style={{ border: '1px solid #eaecf0', borderRadius: 10, overflow: 'hidden' }}>
        {docs.map((d, i) => (
          <div key={d.n} style={{ display: 'grid', gridTemplateColumns: '36px 1fr 110px 20px',
            alignItems: 'center', padding: '12px 16px', gap: 12,
            borderTop: i===0?'none':'1px solid #eaecf0' }}>
            <div style={{ width: 28, height: 32, borderRadius: 4, background: '#f9fafb',
              border: '1px solid #eaecf0', color: '#667085', display: 'grid', placeItems: 'center' }}>
              <Icon name="docs" size={14}/>
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: '#101828' }}>{d.n}</div>
              <div style={{ fontSize: 11, color: '#667085', fontFamily: 'JetBrains Mono, monospace', marginTop: 2 }}>{d.s}</div>
            </div>
            <div>
              <span style={{ padding: '3px 10px', background: d.tone, color: d.fg,
                borderRadius: 9999, fontSize: 11, fontWeight: 600, letterSpacing: '0.04em',
                textTransform: 'uppercase' }}>{d.st}</span>
            </div>
            <Icon name="chevronRight" size={14} style={{ color: '#98a2b3' }}/>
          </div>
        ))}
      </div>
    </div>
  );
}

function TeamPreview() {
  const members = [
    { n: 'Priya Desai',   r: 'Ops lead',       e: 'priya@meridian.co',   role: 'Admin',    color: '#1E57D6' },
    { n: 'Marcus Lowell', r: 'Finance',        e: 'marcus@meridian.co',  role: 'Viewer',   color: '#DC2626' },
    { n: 'Lin Chen',      r: 'Trade compliance', e: 'lin@meridian.co',   role: 'Manager',  color: '#027A48' },
    { n: 'Jordan Park',   r: 'Warehouse',      e: 'jordan@meridian.co',  role: 'Editor',   color: '#B54708' },
  ];
  return (
    <div style={{ padding: 22 }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: 16 }}>
        <div>
          <div style={{ fontSize: 11, letterSpacing: '0.06em', color: '#98a2b3', fontWeight: 600, textTransform: 'uppercase' }}>Team</div>
          <div style={{ fontSize: 18, fontWeight: 700, letterSpacing: '-0.015em', marginTop: 2 }}>Meridian Industries · 12 seats</div>
        </div>
        <Button variant="primary" size="sm" icon="plus">Invite</Button>
      </div>
      <div style={{ border: '1px solid #eaecf0', borderRadius: 10, overflow: 'hidden' }}>
        {members.map((m, i) => (
          <div key={m.n} style={{ display: 'grid', gridTemplateColumns: '36px 1fr 100px 100px',
            alignItems: 'center', padding: '12px 16px', gap: 12,
            borderTop: i===0?'none':'1px solid #eaecf0' }}>
            <div style={{ width: 32, height: 32, borderRadius: 9999, background: m.color,
              color: '#fff', display: 'grid', placeItems: 'center', fontSize: 12, fontWeight: 700 }}>
              {m.n.split(' ').map(p=>p[0]).join('')}
            </div>
            <div>
              <div style={{ fontSize: 13, fontWeight: 600, color: '#101828' }}>{m.n}</div>
              <div style={{ fontSize: 11, color: '#667085' }}>{m.e}</div>
            </div>
            <div style={{ fontSize: 12, color: '#475467' }}>{m.r}</div>
            <span style={{ padding: '3px 10px', background: '#f2f4f7', color: '#344054',
              borderRadius: 9999, fontSize: 11, fontWeight: 600, textAlign:'center' }}>{m.role}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

window.PlatformShowcase = PlatformShowcase;