/* Platform overview page — Source · Fix · Pay later · Monitor */

function PlatformHero() {
  const { Button } = window.BunkermeDesignSystem_9754f2;
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: '92px 28px 72px', textAlign: 'center' }}>
        <div className="eyebrow" style={{ color: 'var(--blue-600)', marginBottom: 16 }}>Platform</div>
        <h1 style={{ fontSize: 'var(--text-display)', fontWeight: 600, letterSpacing: 'var(--tracking-tighter)', lineHeight: 1.02, marginBottom: 20, maxWidth: 820, marginInline: 'auto' }}>
          Bunker from quote to settlement.
        </h1>
        <p style={{ fontSize: 'var(--text-lg)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)', maxWidth: 600, margin: '0 auto 30px' }}>
          One workflow for the whole stem: source the fuel, fix the price, pay on flexible terms, and monitor every delivery — across your entire fleet.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
          <Button variant="primary" size="lg" onClick={() => { window.location.href = 'signup.html'; }} iconRight={<Icon name="arrow-right" size={18} color="#fff" />}>Get started</Button>
          <Button variant="secondary" size="lg" onClick={() => { document.getElementById('source').scrollIntoView({ behavior: 'smooth' }); }}>See the four steps</Button>
        </div>
        {/* step chips */}
        <div style={{ display: 'flex', gap: 10, justifyContent: 'center', flexWrap: 'wrap', marginTop: 44 }}>
          {[['radar', 'Source'], ['lock', 'Fix'], ['wallet', 'Pay later'], ['activity', 'Monitor']].map(([ic, l], i) => (
            <span key={l} style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '9px 16px 9px 12px', background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-pill)', boxShadow: 'var(--shadow-xs)', fontSize: 'var(--text-sm)', fontWeight: 600 }}>
              <span style={{ display: 'inline-flex', width: 24, height: 24, borderRadius: '50%', background: 'var(--accent-subtle)', color: 'var(--blue-600)', alignItems: 'center', justifyContent: 'center', fontFamily: 'var(--font-mono)', fontSize: 12 }}>{i + 1}</span>
              <Icon name={ic} size={15} color="var(--neutral-600)" />{l}
            </span>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ---- pillar visuals ---- */
function SourceVisual() {
  const { Badge } = window.BunkermeDesignSystem_9754f2;
  const rows = [['VLSFO', 'Singapore', '612.50', 'up'], ['MGO', 'Rotterdam', '731.50', 'down'], ['HSFO', 'Fujairah', '551.00', 'up']];
  return (
    <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)', overflow: 'hidden' }}>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '14px 18px', borderBottom: '1px solid var(--border-subtle)' }}>
        <span style={{ fontSize: 'var(--text-sm)', fontWeight: 600 }}>Live prices</span>
        <Badge tone="success" dot>Markets open</Badge>
      </div>
      <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 2 }}>
        {rows.map(([g, p, price, dir]) => (
          <div key={g} style={{ display: 'grid', gridTemplateColumns: '1fr 1fr auto', alignItems: 'center', gap: 10, padding: '12px 12px', borderRadius: 'var(--radius-md)', background: g === 'VLSFO' ? 'var(--accent-subtle)' : 'transparent' }}>
            <span style={{ fontSize: 'var(--text-sm)', fontWeight: 600 }}>{g}</span>
            <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-tertiary)' }}>{p}</span>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6 }}>
              <span className="tnum mono" style={{ fontSize: 'var(--text-sm)', fontWeight: 600 }}>${price}</span>
              <Icon name={dir === 'up' ? 'trending-up' : 'trending-down'} size={14} color={dir === 'up' ? 'var(--green-600)' : 'var(--red-500)'} />
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

function FixVisual() {
  return (
    <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)', padding: 22 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 16 }}>
        <span style={{ fontSize: 'var(--text-sm)', fontWeight: 600 }}>Confirm stem</span>
        <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 'var(--text-2xs)', color: 'var(--blue-700)', background: 'var(--accent-subtle)', padding: '3px 9px', borderRadius: 'var(--radius-pill)', fontWeight: 600 }}>
          <Icon name="clock" size={12} color="var(--blue-700)" /> Price held 2h
        </span>
      </div>
      <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-tertiary)' }}>850 MT VLSFO · Singapore · ETA 14 Jun</div>
      <div className="tnum mono" style={{ fontSize: 38, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 18 }}>$520,625</div>
      <div style={{ display: 'flex', gap: 10 }}>
        <span style={{ flex: 1, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', gap: 8, background: 'var(--blue-500)', color: '#fff', fontSize: 'var(--text-sm)', fontWeight: 600, padding: '11px 16px', borderRadius: 'var(--radius-md)' }}>
          <Icon name="lock" size={15} color="#fff" /> Lock price
        </span>
        <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 44, border: '1px solid var(--border-strong)', borderRadius: 'var(--radius-md)', color: 'var(--text-secondary)' }}>
          <Icon name="file-text" size={16} color="var(--text-secondary)" />
        </span>
      </div>
    </div>
  );
}

function PayVisual() {
  const { Badge } = window.BunkermeDesignSystem_9754f2;
  return (
    <div style={{ background: 'linear-gradient(155deg, var(--neutral-900), var(--black))', borderRadius: 'var(--radius-2xl)', padding: 26, color: '#fff', boxShadow: 'var(--shadow-xl)' }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 26 }}>
        <Logo size={24} onDark />
        <Badge tone="success" dot>Active</Badge>
      </div>
      <div style={{ fontSize: 'var(--text-2xs)', letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'rgba(255,255,255,0.55)', marginBottom: 6 }}>Available to draw</div>
      <div className="tnum mono" style={{ fontSize: 42, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 22 }}>$2,400,000</div>
      <div style={{ height: 6, borderRadius: 3, background: 'rgba(255,255,255,0.14)', overflow: 'hidden', marginBottom: 8 }}>
        <div style={{ width: '31%', height: '100%', background: 'var(--blue-400)' }} />
      </div>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 'var(--text-xs)', color: 'rgba(255,255,255,0.65)' }}>
        <span>$1.1M drawn</span><span>$3.5M limit · Net 60</span>
      </div>
    </div>
  );
}

function MonitorVisual() {
  const pts = [18, 22, 16, 28, 24, 34, 30, 42, 38, 50, 46, 58];
  const max = 60, w = 300, h = 96;
  const path = pts.map((p, i) => `${i === 0 ? 'M' : 'L'} ${(i / (pts.length - 1)) * w} ${h - (p / max) * h}`).join(' ');
  const area = `${path} L ${w} ${h} L 0 ${h} Z`;
  return (
    <div style={{ background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-lg)', padding: 22 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 4 }}>
        <span style={{ fontSize: 'var(--text-sm)', fontWeight: 600 }}>Fleet spend</span>
        <span className="tnum mono" style={{ fontSize: 'var(--text-sm)', fontWeight: 600, color: 'var(--green-600)' }}>▲ 6.4%</span>
      </div>
      <div className="tnum mono" style={{ fontSize: 30, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 14 }}>$1,284,000</div>
      <svg viewBox={`0 0 ${w} ${h}`} style={{ width: '100%', height: 96, display: 'block' }} preserveAspectRatio="none">
        <defs>
          <linearGradient id="bm-spark" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor="rgba(12,41,241,0.18)" />
            <stop offset="100%" stopColor="rgba(12,41,241,0)" />
          </linearGradient>
        </defs>
        <path d={area} fill="url(#bm-spark)" />
        <path d={path} fill="none" stroke="var(--blue-500)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
      <div style={{ display: 'flex', gap: 20, marginTop: 14, paddingTop: 14, borderTop: '1px solid var(--border-subtle)' }}>
        {[['3', 'active stems'], ['6', 'vessels'], ['0', 'open claims']].map(([v, l]) => (
          <div key={l}>
            <div className="tnum mono" style={{ fontSize: 'var(--text-h4)', fontWeight: 600 }}>{v}</div>
            <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-tertiary)' }}>{l}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function Pillar({ id, num, icon, title, headline, desc, bullets, Visual, flip }) {
  const vw = useVW();
  const isMobile = vw <= 860;
  return (
    <section id={id} style={{ borderTop: '1px solid var(--border-subtle)', background: flip ? 'var(--surface-card)' : 'transparent' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: isMobile ? '64px 20px' : '96px 28px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 36 : 72, alignItems: 'center' }}>
        <div style={{ order: (isMobile || !flip) ? 1 : 2 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 40, height: 40, borderRadius: 'var(--radius-md)', background: 'var(--accent-subtle)', color: 'var(--blue-600)' }}>
              <Icon name={icon} size={20} color="var(--blue-600)" />
            </span>
            <span className="eyebrow" style={{ color: 'var(--blue-600)' }}>{num} · {title}</span>
          </div>
          <h2 style={{ fontSize: 'var(--text-h1)', fontWeight: 600, letterSpacing: 'var(--tracking-tight)', lineHeight: 1.1, marginBottom: 14 }}>{headline}</h2>
          <p style={{ fontSize: 'var(--text-lg)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)', marginBottom: 24 }}>{desc}</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {bullets.map((b) => (
              <li key={b} style={{ display: 'flex', gap: 10, alignItems: 'center', fontSize: 'var(--text-base)', color: 'var(--text-secondary)' }}>
                <span style={{ display: 'inline-flex', width: 22, height: 22, borderRadius: '50%', background: 'var(--success-subtle)', color: 'var(--green-600)', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                  <Icon name="check" size={14} color="var(--green-600)" />
                </span>{b}
              </li>
            ))}
          </ul>
        </div>
        <div style={{ order: flip ? 1 : 2 }}><Visual /></div>
      </div>
    </section>
  );
}

function PlatformPillars() {
  const data = [
    { id: 'source', num: '01', icon: 'radar', title: 'Source', headline: 'Find the best fuel, fast.', desc: 'Live benchmark and supplier prices, side by side. No more chasing quotes over email or phone.', bullets: ['Real prices across 100+ ports', 'Vetted, quality-rated suppliers', 'Compare by grade, port, and ETA'], Visual: SourceVisual, flip: false },
    { id: 'fix', num: '02', icon: 'lock', title: 'Fix', headline: 'Lock your price, confirm your stem.', desc: 'Hold a price while you decide, then confirm the full nomination in one flow.', bullets: ['Lock a price for up to 2 hours', 'Full nomination and barge details', 'Surveyor booked in-flow'], Visual: FixVisual, flip: true },
    { id: 'pay-later', num: '03', icon: 'wallet', title: 'Pay later', headline: 'Settle on your schedule.', desc: 'Draw on a revolving credit line at any supplier, in any port — and settle on Net 30 or Net 60.', bullets: ['Net 30 / 60 approved in 24 hours', 'One revolving limit, every supplier', 'One consolidated invoice per period'], Visual: PayVisual, flip: false },
    { id: 'monitor', num: '04', icon: 'activity', title: 'Monitor', headline: 'Every stem, every dollar, in view.', desc: 'Track deliveries to completion and break spend down across your whole fleet.', bullets: ['Track deliveries to completion', 'Claims and disputes in-platform', 'Spend analytics by vessel, grade, port'], Visual: MonitorVisual, flip: true },
  ];
  return <div id="how">{data.map((d) => <Pillar key={d.id} {...d} />)}</div>;
}

function PlatformCTA() {
  const { Button } = window.BunkermeDesignSystem_9754f2;
  return (
    <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '72px 28px 104px' }}>
      <div style={{ position: 'relative', overflow: 'hidden', background: 'var(--black)', borderRadius: 'var(--radius-2xl)', padding: '72px 56px', textAlign: 'center' }}>
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(620px 320px at 50% 0%, rgba(12,41,241,0.32), transparent 70%)' }} />
        <div style={{ position: 'relative' }}>
          <h2 style={{ fontSize: 'var(--text-h1)', fontWeight: 600, color: '#fff', letterSpacing: 'var(--tracking-tight)', marginBottom: 14 }}>The whole stem, one platform</h2>
          <p style={{ fontSize: 'var(--text-lg)', color: 'rgba(255,255,255,0.7)', maxWidth: 520, margin: '0 auto 30px' }}>Set up an account in minutes. See live prices before you commit.</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center' }}>
            <Button variant="primary" size="lg" onClick={() => { window.location.href = 'signup.html'; }} iconRight={<Icon name="arrow-right" size={18} color="#fff" />}>Get started</Button>
            <Button variant="secondary" size="lg" onClick={() => { window.location.href = 'about.html#contact'; }} style={{ background: 'transparent', color: '#fff', borderColor: 'rgba(255,255,255,0.25)' }}>Talk to sales</Button>
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { PlatformHero, PlatformPillars, PlatformCTA });