/* Landing page sections: Hero (with product UI crop), Trust, Features, Photo band, Credit, CTA */

/* ---- A polished, static product-UI crop for the hero ---- */
function ProductCrop() {
  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={{ position: 'relative' }}>
      {/* main quote card */}
      <div style={{ position: 'relative', zIndex: 2, background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-xl)', boxShadow: 'var(--shadow-xl)', 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 quote</span>
          <Badge tone="success" dot>Markets open</Badge>
        </div>
        <div style={{ padding: 18 }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-tertiary)' }}>850 MT VLSFO · Singapore</div>
              <div className="tnum mono" style={{ fontSize: 'var(--text-h3)', fontWeight: 600, letterSpacing: '-0.02em' }}>$520,625</div>
            </div>
            <span style={{ display: 'inline-flex', alignItems: 'center', gap: 7, background: 'var(--blue-500)', color: '#fff', fontSize: 'var(--text-sm)', fontWeight: 600, padding: '9px 16px', borderRadius: 'var(--radius-md)', boxShadow: 'var(--shadow-sm)' }}>
              <Icon name="lock" size={15} color="#fff" /> Lock price
            </span>
          </div>
        </div>
      </div>

      {/* floating stem-confirmed toast */}
      <div className="bm-float" style={{ position: 'absolute', zIndex: 3, right: -22, bottom: -26, display: 'flex', alignItems: 'center', gap: 10, background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', padding: '12px 14px', boxShadow: 'var(--shadow-lg)' }}>
        <span style={{ display: 'inline-flex', width: 30, height: 30, borderRadius: '50%', background: 'var(--success-subtle)', color: 'var(--green-600)', alignItems: 'center', justifyContent: 'center' }}>
          <Icon name="check" size={16} color="var(--green-600)" />
        </span>
        <div>
          <div style={{ fontSize: 'var(--text-xs)', fontWeight: 600 }}>Stem confirmed</div>
          <div style={{ fontSize: 'var(--text-2xs)', color: 'var(--text-tertiary)' }}>MV Nordwind · ETA 14 Jun</div>
        </div>
      </div>

      <style>{`
        .bm-float{ animation: bmf 6s var(--ease-in-out) infinite; }
        .bm-float2{ animation: bmf 6s var(--ease-in-out) -3s infinite; }
        @keyframes bmf{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(-7px) } }
        @media (prefers-reduced-motion: reduce){ .bm-float,.bm-float2{ animation:none } }
      `}</style>
    </div>);

}

function Hero() {
  const { Button } = window.BunkermeDesignSystem_9754f2;
  const vw = useVW();
  const isMobile = vw <= 640;
  return (
    <section style={{ position: 'relative', overflow: 'hidden' }}>
      <div aria-hidden="true" style={{ position: 'absolute', top: 0, right: 0, bottom: 0, width: '60%', minWidth: 560, pointerEvents: 'none', overflow: 'hidden', WebkitMaskImage: 'linear-gradient(90deg, transparent, #000 26%)', maskImage: 'linear-gradient(90deg, transparent, #000 26%)' }}>
        <svg viewBox="0 0 800 560" preserveAspectRatio="xMidYMid slice" style={{ width: '100%', height: '100%' }}>
          <defs>
            <linearGradient id="bm-waveg" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0%" stopColor="rgba(12,41,241,0)" />
              <stop offset="34%" stopColor="rgba(90,110,246,0.5)" />
              <stop offset="68%" stopColor="rgba(12,41,241,0.6)" />
              <stop offset="100%" stopColor="rgba(10,33,193,0.28)" />
            </linearGradient>
          </defs>
          <g className="bm-wave-g">
            {(() => {
              const W = 800, H = 560, N = 22, paths = [];
              for (let i = 0; i < N; i++) {
                const t = i / (N - 1);
                const baseY = H * 0.1 + t * H * 0.82;
                const amp = 16 + 40 * t, ph = i * 0.42;
                let d = `M -20 ${baseY.toFixed(1)}`;
                for (let x = -20; x <= W + 20; x += 16) {
                  const xn = (x + 20) / (W + 40);
                  const y = baseY + amp * Math.sin(xn * Math.PI * 2.4 + ph) * (0.22 + 0.78 * xn);
                  d += ` L ${x} ${y.toFixed(1)}`;
                }
                paths.push(<path key={i} className="bm-wline" style={{ animationDelay: `${(i * -0.3).toFixed(2)}s` }} d={d} fill="none" stroke="url(#bm-waveg)" strokeWidth="0.8" opacity={0.32 + 0.5 * t} />);
              }
              return paths;
            })()}
          </g>
        </svg>
        <style>{`
          .bm-wave-g{ animation: bmwave 18s ease-in-out infinite; }
          @keyframes bmwave{ 0%,100%{ transform: translateX(0) } 50%{ transform: translateX(-16px) } }
          .bm-wline{ transform-box: fill-box; transform-origin: center; animation: bmline 5.5s ease-in-out infinite; will-change: transform; }
          @keyframes bmline{ 0%,100%{ transform: translateY(0) } 50%{ transform: translateY(8px) } }
          @media (prefers-reduced-motion: reduce){ .bm-wave-g,.bm-wline{ animation: none } }
        `}</style>
      </div>
      <div style={{ position: 'relative', maxWidth: 'var(--container-max)', margin: '0 auto', padding: '92px 28px 168px' }}>
        <div style={{ maxWidth: 760 }}>
          <div style={{ display: 'inline-flex', alignItems: 'center', gap: 8, padding: '5px 12px 5px 6px', background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-pill)', boxShadow: 'var(--shadow-xs)', marginBottom: 24 }}>
            <span style={{ display: 'inline-flex', padding: '2px 8px', background: 'var(--accent-subtle)', color: 'var(--blue-700)', borderRadius: 'var(--radius-pill)', fontSize: 'var(--text-2xs)', fontWeight: 600 }}>New</span>
            <span style={{ fontSize: 'var(--text-xs)', color: 'var(--text-secondary)' }}>Flexible terms, any ports.</span>
          </div>
          <h1 style={{ fontSize: 'var(--text-display)', fontWeight: 600, letterSpacing: 'var(--tracking-tighter)', lineHeight: 1.02, color: 'var(--text-primary)', marginBottom: 20 }}>
            Bunker procurement,<br />Reinvented.
          </h1>
          <p style={{ fontSize: 'var(--text-lg)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)', maxWidth: 482, marginBottom: 30 }}>
            Fix your stem instantly — best rates, flexible payment solutions.
          </p>
          <div style={{ display: 'flex', gap: 12, flexDirection: isMobile ? 'column' : 'row', alignItems: isMobile ? 'stretch' : 'center' }}>
            <Button variant="primary" size="lg" fullWidth={isMobile} onClick={() => {window.location.href = 'signup.html';}}>Get started</Button>
            <Button variant="secondary" size="lg" fullWidth={isMobile} onClick={() => {document.getElementById('platform').scrollIntoView({ behavior: 'smooth' });}} iconLeft={<Icon name="play" size={15} />}>See how it works</Button>
          </div>
        </div>
      </div>
    </section>);

}

function TrustRow() {
  const names = ['Stena Bulk', 'Maersk Tankers', 'Hafnia', 'Torm', 'd’Amico', 'Eastern Pacific'];
  return (
    <section style={{ borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)', background: 'var(--surface-card)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '22px 28px', display: 'flex', alignItems: 'center', gap: 30, flexWrap: 'wrap', justifyContent: 'center' }}>
        <span className="eyebrow">Trusted by fleets at</span>
        {names.map((n) =>
        <span key={n} style={{ fontSize: 'var(--text-base)', fontWeight: 600, color: 'var(--neutral-400)', letterSpacing: '-0.01em' }}>{n}</span>
        )}
      </div>
    </section>);

}

function Features() {
  const vw = useVW();
  const cols = vw <= 640 ? '1fr' : vw <= 980 ? 'repeat(2, 1fr)' : 'repeat(3, 1fr)';
  const items = [
  ['gauge', 'Live, transparent pricing', 'Real benchmark and supplier prices across 100+ ports, updated continuously. No more chasing quotes over email.'],
  ['file-check', 'One-click stems', 'Confirm a stem with full nomination, barge details, and a surveyor in a single flow. Track it to delivery.'],
  ['wallet', 'Flexible credit', 'Net 30 / 60 terms approved in 24 hours. Draw on a revolving line, settle on your schedule.'],
  ['shield-check', 'Vetted suppliers', 'Every counterparty is KYC-checked and quality-rated. Disputes and claims handled in-platform.'],
  ['route', 'Voyage planning', 'Match bunker stops to your route and consumption. See cost per voyage before you commit.'],
  ['bar-chart-3', 'Spend analytics', 'Break spend down by vessel, grade, and port. Export to your TMS or accounting in one click.']];

  return (
    <section id="platform" style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '104px 28px' }}>
      <div style={{ maxWidth: 640, margin: '0 auto 52px', textAlign: 'center' }}>
        <div className="eyebrow" style={{ color: 'var(--blue-600)', marginBottom: 12 }}>Platform</div>
        <h2 style={{ fontSize: 'var(--text-h1)', fontWeight: 600, letterSpacing: 'var(--tracking-tight)', lineHeight: 1.1, marginBottom: 14 }}>Everything bunkering, in one place</h2>
        <p style={{ fontSize: 'var(--text-lg)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)' }}>From price discovery to settlement — bunkerme replaces the inbox, the spreadsheet, and the phone calls.</p>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: cols, gap: 20 }}>
        {items.map(([icon, t, d]) =>
        <div key={t} className="bm-feature" style={{ background: 'var(--surface-card)', border: '1px solid var(--border-default)', borderRadius: 'var(--radius-lg)', padding: 24, boxShadow: 'var(--shadow-xs)', transition: 'box-shadow 200ms var(--ease-out), transform 200ms var(--ease-out)' }}>
            <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)', marginBottom: 16 }}>
              <Icon name={icon} size={20} color="var(--blue-600)" />
            </span>
            <h3 style={{ fontSize: 'var(--text-h4)', fontWeight: 600, marginBottom: 8, letterSpacing: 'var(--tracking-tight)' }}>{t}</h3>
            <p style={{ fontSize: 'var(--text-sm)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)' }}>{d}</p>
          </div>
        )}
      </div>
      <style>{`.bm-feature:hover{ box-shadow: var(--shadow-md); transform: translateY(-2px); }`}</style>
    </section>);

}

/* Full-bleed documentary photography band — user drops a real maritime photo */
function PhotoBand() {
  const vw = useVW();
  const isMobile = vw <= 640;
  return (
    <section id="about" style={{ position: 'relative', background: 'var(--black)' }}>
      <div style={{ position: 'relative', height: isMobile ? 440 : 520, overflow: 'hidden' }}>
        <image-slot id="bm-photo-band" style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
        shape="rect" fit="cover" placeholder="Drop a documentary maritime photo — port, vessel, or fuel ops"></image-slot>
        <div style={{ position: 'absolute', inset: 0, background: isMobile ? 'linear-gradient(180deg, rgba(12,15,19,0.35) 0%, rgba(12,15,19,0.82) 100%)' : 'linear-gradient(90deg, rgba(12,15,19,0.86) 0%, rgba(12,15,19,0.55) 46%, rgba(12,15,19,0.15) 100%)', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', pointerEvents: 'none' }}>
          <div style={{ maxWidth: 'var(--container-max)', width: '100%', margin: '0 auto', padding: '0 28px' }}>
            <div style={{ maxWidth: 560 }}>
              <div className="eyebrow" style={{ color: 'var(--blue-300)', marginBottom: 14 }}>About</div>
              <h2 style={{ fontSize: 'var(--text-display)', fontWeight: 600, color: '#fff', letterSpacing: 'var(--tracking-tighter)', lineHeight: 1.04, marginBottom: 18 }}>
                Built for the people who move the world’s fuel.
              </h2>
              <p style={{ fontSize: 'var(--text-lg)', color: 'rgba(255,255,255,0.74)', lineHeight: 'var(--leading-normal)' }}>
                Bunkering still runs on phone calls, PDFs, and trust. We’re building the financial and operational layer that the industry has been missing — transparent, instant, and credit-backed.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

function CreditSection() {
  const { Badge, Button } = window.BunkermeDesignSystem_9754f2;
  const vw = useVW();
  const isMobile = vw <= 820;
  return (
    <section style={{ background: 'var(--surface-card)', borderTop: '1px solid var(--border-subtle)', borderBottom: '1px solid var(--border-subtle)' }}>
      <div style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '104px 28px', display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: isMobile ? 40 : 72, alignItems: 'center' }}>
        <div>
          <div className="eyebrow" style={{ color: 'var(--blue-600)', marginBottom: 12 }}>Credit</div>
          <h2 style={{ fontSize: 'var(--text-h1)', fontWeight: 600, letterSpacing: 'var(--tracking-tight)', lineHeight: 1.1, marginBottom: 14 }}>A credit line that flexes to your voyage</h2>
          <p style={{ fontSize: 'var(--text-lg)', color: 'var(--text-secondary)', lineHeight: 'var(--leading-normal)', marginBottom: 26 }}>Apply once. Get a revolving limit you can draw on at any supplier, in any port — and settle on Net 30 or Net 60.</p>
          <ul style={{ listStyle: 'none', padding: 0, margin: '0 0 30px', display: 'flex', flexDirection: 'column', gap: 12 }}>
            {['Approved in 24 hours, not weeks', 'No per-supplier paperwork', 'One consolidated invoice per period'].map((t) =>
            <li key={t} 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>{t}
              </li>
            )}
          </ul>
          <Button variant="primary" size="lg" onClick={() => {window.location.href = 'signup.html';}} iconRight={<Icon name="arrow-right" size={18} color="#fff" />}>Request a credit line</Button>
        </div>
        <div style={{ background: 'linear-gradient(155deg, var(--neutral-900), var(--black))', borderRadius: 'var(--radius-2xl)', padding: 30, color: '#fff', boxShadow: 'var(--shadow-xl)' }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 30 }}>
            <Logo size={26} 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: 46, fontWeight: 600, letterSpacing: '-0.02em', marginBottom: 26 }}>$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>
      </div>
    </section>);

}

function CTABand() {
  const { Button } = window.BunkermeDesignSystem_9754f2;
  const vw = useVW();
  const isMobile = vw <= 560;
  return (
    <section style={{ maxWidth: 'var(--container-max)', margin: '0 auto', padding: '37px 28px 99px' }}>
      <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 }}>Start bunkering smarter today</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. No commitment — see live prices before you order.</p>
          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexDirection: isMobile ? 'column' : 'row' }}>
            <Button variant="primary" size="lg" fullWidth={isMobile} onClick={() => {window.location.href = 'signup.html';}} iconRight={<Icon name="arrow-right" size={18} color="#fff" />}>Get started</Button>
            <Button variant="secondary" size="lg" fullWidth={isMobile} 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, { Hero, TrustRow, Features, PhotoBand, CreditSection, CTABand });