/* "Explore the platform" page — dashboard screenshot, feature grid, global-coverage map. */

function ExploreHero() {
  const { Button } = window.BunkermeDesignSystem_9754f2;
  return (
    <section style={{ position: 'relative' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '120px 28px 0', 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' }}>
          One dashboard for every stem.
        </h1>
        <p style={{ fontSize: 'var(--text-lg)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)', maxWidth: 600, margin: '0 auto 30px' }}>
          Source, fix, fund, and monitor your bunkering — from quote to settlement — across your whole fleet, in one place.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 56 }}>
          <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('features').scrollIntoView({ behavior: 'smooth' }); }}>See the features</Button>
        </div>
      </div>
      {/* framed dashboard screenshot */}
      <div style={{ maxWidth: 1120, margin: '0 auto', padding: '0 28px' }}>
        <div style={{ position: 'relative', borderRadius: 'var(--radius-2xl)', overflow: 'hidden', border: '1px solid var(--border-default)', boxShadow: 'var(--shadow-xl)', background: 'var(--surface-card)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '12px 16px', borderBottom: '1px solid var(--border-subtle)', background: 'var(--neutral-50)' }}>
            <span style={{ display: 'flex', gap: 7 }}>
              {['#e6685f', '#f1bf4f', '#5fc06a'].map((c) => <span key={c} style={{ width: 11, height: 11, borderRadius: '50%', background: c }} />)}
            </span>
            <span style={{ margin: '0 auto', display: 'inline-flex', alignItems: 'center', gap: 7, fontSize: 'var(--text-2xs)', color: 'var(--text-tertiary)', background: 'var(--surface-card)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-pill)', padding: '4px 14px' }}>
              <Icon name="lock" size={11} color="var(--text-tertiary)" /> www.bunkerme.com
            </span>
          </div>
          <img src="dashboard.png" alt="bunkerme dashboard" style={{ display: 'block', width: '100%', height: 'auto' }} />
        </div>
      </div>
    </section>
  );
}

function ExploreFeatures() {
  const vw = useVW();
  const cols = vw <= 620 ? 1 : vw <= 980 ? 2 : 3;
  const feats = [
    ['mouse-pointer-click', 'One-click stems', 'Confirm a stem — nomination, barge, and surveyor — in a single click.'],
    ['lock', 'Fix instantly', 'Lock a live price the moment it’s right, then confirm the whole nomination.'],
    ['wallet', 'Pay later', 'Draw on a revolving credit line and settle on Net 30, 60, or 90.'],
    ['bar-chart-3', 'Spend analytics', 'Break spend down by vessel, grade, and port — and export in one click.'],
    ['globe', 'Worldwide coverage', 'We sell and deliver across 100+ ports, six continents.'],
    ['headset', '24/7 support', 'A dedicated bunker desk on call around the clock, in every timezone.'],
  ];
  return (
    <section id="features" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '120px 28px' }}>
      <div style={{ maxWidth: 620, marginBottom: 52 }}>
        <div className="eyebrow" style={{ color: 'var(--blue-600)', marginBottom: 12 }}>Features</div>
        <h2 style={{ fontSize: 'var(--text-h1)', fontWeight: 600, letterSpacing: 'var(--tracking-tight)', lineHeight: 1.1, marginBottom: 14 }}>Everything the desk needs</h2>
        <p style={{ fontSize: 'var(--text-lg)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)' }}>The same tools that power the homepage walkthrough — laid out so you can scan the whole platform at a glance.</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: `repeat(${cols}, 1fr)`, gap: 0, border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-xl)', overflow: 'hidden', background: 'var(--surface-card)' }}>
        {feats.map(([icon, t, d], i) => (
          <div key={t} className="bm-fcell" style={{ padding: 30, borderRight: ((i % cols !== cols - 1)) ? '1px solid var(--border-subtle)' : 'none', borderBottom: (i < feats.length - (feats.length % cols || cols)) ? '1px solid var(--border-subtle)' : 'none', transition: 'background 180ms var(--ease-out)' }}>
            <span style={{ display: 'inline-flex', alignItems: 'center', justifyContent: 'center', width: 44, height: 44, borderRadius: 'var(--radius-md)', background: 'var(--accent-subtle)', color: 'var(--blue-600)', marginBottom: 18 }}>
              <Icon name={icon} size={21} color="var(--blue-600)" />
            </span>
            <h3 style={{ fontSize: 'var(--text-h4)', fontWeight: 600, letterSpacing: 'var(--tracking-tight)', marginBottom: 8 }}>{t}</h3>
            <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)' }}>{d}</p>
          </div>
        ))}
      </div>
      <style>{`.bm-fcell:hover{ background: var(--neutral-25); }`}</style>
    </section>
  );
}

function ExploreMap() {
  const W = 1000, H = 480, LAT_TOP = 80, LAT_BOT = -58;
  const px = (lon) => ((lon + 180) / 360) * W;
  const py = (lat) => ((LAT_TOP - lat) / (LAT_TOP - LAT_BOT)) * H;
  const land = [
    [-100, 49, 33, 19], [-117, 39, 12, 13], [-88, 31, 15, 11], [-84, 17, 10, 8], [-148, 62, 13, 9], [-122, 55, 9, 9],
    [-42, 72, 13, 9], [-60, -10, 16, 22], [-66, -36, 8, 12], [-72, 4, 9, 8], [-49, -18, 9, 12],
    [12, 50, 19, 11], [24, 61, 13, 9], [-3, 54, 5, 7], [18, 7, 21, 18], [24, -16, 16, 16], [45, 9, 7, 8],
    [47, 27, 13, 12], [78, 30, 22, 14], [80, 21, 9, 11], [97, 52, 48, 19], [108, 33, 17, 13], [120, 47, 12, 10],
    [116, 2, 13, 6], [124, 11, 5, 6], [138, 37, 5, 8], [105, 14, 9, 9], [134, -25, 18, 12], [173, -42, 4, 6],
  ];
  const isLand = (lon, lat) => land.some(([a, b, rx, ry]) => ((lon - a) * (lon - a)) / (rx * rx) + ((lat - b) * (lat - b)) / (ry * ry) <= 1);
  const dots = React.useMemo(() => { const o = []; for (let lat = LAT_TOP; lat >= LAT_BOT; lat -= 3.4) { for (let lon = -180; lon <= 180; lon += 3.4) { if (isLand(lon, lat)) o.push([px(lon), py(lat)]); } } return o; }, []);
  const ports = [
    ['Houston', -95, 29.7, 'r'], ['Los Angeles', -118, 33.7, 'r'], ['Santos', -46, -24, 'r'],
    ['Rotterdam', 4.5, 51.9, 'l'], ['Gibraltar', -5, 36, 'l'], ['Fujairah', 56, 25, 'l'],
    ['Singapore', 104, 1.3, 'l'], ['Shanghai', 121, 31, 'r'], ['Durban', 31, -29.8, 'l'],
  ];
  return (
    <section style={{ background: 'var(--surface-card)', borderTop: '1px solid var(--border-subtle)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '120px 28px' }}>
        <div style={{ maxWidth: 640, marginBottom: 44 }}>
          <div className="eyebrow" style={{ color: 'var(--blue-600)', marginBottom: 12 }}>Coverage</div>
          <h2 style={{ fontSize: 'var(--text-h1)', fontWeight: 600, letterSpacing: 'var(--tracking-tight)', lineHeight: 1.1, marginBottom: 14 }}>Global coverage, local pricing</h2>
          <p style={{ fontSize: 'var(--text-lg)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)' }}>Live market prices and delivery in <span style={{ color: 'var(--text-primary)', fontWeight: 600 }}>100+ ports</span> across every major bunkering hub.</p>
        </div>
        <div style={{ position: 'relative', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-2xl)', background: 'linear-gradient(180deg, var(--neutral-25), var(--neutral-50))', overflow: 'hidden', boxShadow: 'var(--shadow-sm)' }}>
          <svg viewBox={`0 0 ${W} ${H}`} style={{ width: '100%', height: 'auto', display: 'block' }} role="img" aria-label="Global port coverage map">
            <g fill="var(--neutral-300)">{dots.map(([x, y], i) => <circle key={i} cx={x.toFixed(1)} cy={y.toFixed(1)} r="1.6" />)}</g>
            {ports.map(([n, lon, lat], i) => (
              <g key={n}>
                <circle cx={px(lon)} cy={py(lat)} r="4" fill="var(--blue-400)" opacity="0.5"><animate attributeName="r" values="4;12;4" dur="2.8s" begin={`${(i % 5) * 0.45}s`} repeatCount="indefinite" /><animate attributeName="opacity" values="0.5;0;0.5" dur="2.8s" begin={`${(i % 5) * 0.45}s`} repeatCount="indefinite" /></circle>
                <circle cx={px(lon)} cy={py(lat)} r="4" fill="var(--blue-600)" stroke="#fff" strokeWidth="1.6" />
              </g>
            ))}
          </svg>
          <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
            {ports.map(([n, lon, lat, side]) => (
              <span key={n} style={{ position: 'absolute', left: `${(px(lon) / W) * 100}%`, top: `${(py(lat) / H) * 100}%`, transform: `translate(${side === 'l' ? '12px' : 'calc(-100% - 12px)'}, -50%)`, whiteSpace: 'nowrap', fontSize: 'var(--text-2xs)', fontWeight: 600, color: 'var(--text-secondary)', background: 'rgba(255,255,255,0.88)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-pill)', padding: '2px 9px', boxShadow: 'var(--shadow-xs)' }}>{n}</span>
            ))}
          </div>
          <div style={{ position: 'absolute', left: 22, bottom: 20, display: 'flex', gap: 28, background: 'rgba(255,255,255,0.72)', backdropFilter: 'blur(8px)', WebkitBackdropFilter: 'blur(8px)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-lg)', padding: '14px 20px', boxShadow: 'var(--shadow-sm)' }}>
            {[['100+', 'ports'], ['24/7', 'live pricing']].map(([v, l]) => (
              <div key={l}>
                <div className="tnum mono" style={{ fontSize: 'var(--text-h4)', fontWeight: 600, letterSpacing: '-0.02em' }}>{v}</div>
                <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-tertiary)' }}>{l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
    </section>
  );
}

Object.assign(window, { ExploreHero, ExploreFeatures, ExploreMap });