// ============================================================================
// Sections below the hero — transitions to cool light grey.
// Mess→resolution flow diagram, three pillars, and a closing CTA.
// ============================================================================

function FlowSection() {
  const inputs = [
    { label: 'Carrier invoices',     sub: 'PDF · weekly' },
    { label: 'CDS declarations',     sub: 'XML · per shipment' },
    { label: 'Shopify orders',       sub: 'CSV · daily' },
    { label: 'Product master',       sub: 'HS, value, origin' },
  ];
  const outputs = [
    { label: 'Variance',  desc: 'Estimate vs invoice — flagged at row level',     tone: 'amber' },
    { label: 'Margin',    desc: 'True international margin after landed costs',   tone: 'teal' },
    { label: 'Recovery',  desc: 'Confirmed overcharges, ranked by confidence',    tone: 'teal' },
  ];

  const toneColor = (t) => t === 'amber' ? '#d97706' : '#0D9E8C';

  return (
    <section style={{
      background: 'var(--bl-light)',
      padding: '120px 80px',
      borderTop: '1px solid #1e293b',
      position: 'relative',
    }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ maxWidth: 720, marginBottom: 72 }}>
          <div style={{ fontSize: 11, fontWeight: 600, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.16em', marginBottom: 16 }}>
            How it resolves
          </div>
          <h2 style={{
            fontSize: 44, fontWeight: 600, color: 'var(--bl-light-text-1)',
            letterSpacing: '-0.025em', lineHeight: 1.1, margin: 0,
          }}>
            Fragmented operational data. <span style={{ color: '#94a3b8' }}>Reconciled into</span> a single ledger.
          </h2>
          <p style={{ fontSize: 16, lineHeight: 1.55, color: '#475569', marginTop: 20, maxWidth: 600 }}>
            BorderLens matches every customer order to its customs declaration and its carrier invoice — then surfaces the rows where money was lost.
          </p>
        </div>

        {/* Flow diagram */}
        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 80px 1fr', gap: 0,
          alignItems: 'stretch',
        }}>
          {/* INPUTS */}
          <div>
            <div style={{ fontSize: 10, fontWeight: 600, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 16 }}>
              Sources
            </div>
            <div style={{ display: 'grid', gap: 10 }}>
              {inputs.map((it) => (
                <div key={it.label} style={{
                  background: '#fff',
                  border: '1px solid var(--bl-light-border)',
                  borderRadius: 10,
                  padding: '14px 18px',
                  display: 'flex', alignItems: 'center', gap: 14,
                }}>
                  <div style={{
                    width: 32, height: 32, borderRadius: 6,
                    background: '#f1f4f8', color: '#64748b',
                    display: 'grid', placeItems: 'center',
                  }}>
                    <Icon.Doc size={14}/>
                  </div>
                  <div style={{ flex: 1 }}>
                    <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--bl-light-text-1)' }}>{it.label}</div>
                    <div style={{ fontSize: 11.5, color: '#94a3b8', fontFamily: 'var(--bl-font-mono)', marginTop: 2 }}>{it.sub}</div>
                  </div>
                  <div style={{ width: 6, height: 6, borderRadius: '50%', background: '#0D9E8C' }}/>
                </div>
              ))}
            </div>
          </div>

          {/* CONNECTOR */}
          <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', position: 'relative' }}>
            <svg width="80" height="100%" viewBox="0 0 80 320" preserveAspectRatio="none" style={{ position: 'absolute', inset: 0 }}>
              <defs>
                <linearGradient id="flowGrad" x1="0" y1="0" x2="1" y2="0">
                  <stop offset="0" stopColor="#0D9E8C" stopOpacity="0"/>
                  <stop offset="0.5" stopColor="#0D9E8C" stopOpacity="0.6"/>
                  <stop offset="1" stopColor="#0D9E8C" stopOpacity="0"/>
                </linearGradient>
              </defs>
              {[40, 110, 180, 250].map((y) => (
                <path key={y} d={`M 0 ${y} C 40 ${y}, 40 160, 80 160`} stroke="url(#flowGrad)" strokeWidth="1.2" fill="none"/>
              ))}
              <circle cx="40" cy="160" r="22" fill="#fff" stroke="#0D9E8C" strokeWidth="1.5"/>
              <circle cx="40" cy="160" r="6" fill="#0D9E8C"/>
              <circle cx="40" cy="160" r="34" fill="none" stroke="#0D9E8C" strokeOpacity="0.25" strokeWidth="1"/>
            </svg>
            <div style={{ position: 'relative', textAlign: 'center', fontSize: 9.5, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.12em', fontWeight: 600, marginTop: 220 }}>
              Reconcile
            </div>
          </div>

          {/* OUTPUTS */}
          <div>
            <div style={{ fontSize: 10, fontWeight: 600, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.14em', marginBottom: 16 }}>
              Insights
            </div>
            <div style={{ display: 'grid', gap: 10 }}>
              {outputs.map((it) => (
                <div key={it.label} style={{
                  background: '#fff',
                  border: '1px solid var(--bl-light-border)',
                  borderLeft: `3px solid ${toneColor(it.tone)}`,
                  borderRadius: 10,
                  padding: '14px 18px',
                }}>
                  <div style={{ fontSize: 14, fontWeight: 600, color: 'var(--bl-light-text-1)', marginBottom: 4 }}>{it.label}</div>
                  <div style={{ fontSize: 12.5, color: '#64748b', lineHeight: 1.5 }}>{it.desc}</div>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function PillarsSection() {
  const pillars = [
    {
      eyebrow: 'Variance',
      heading: 'Every order, every line item.',
      body: 'Match the duty and tax estimated at checkout against what your carrier billed. See the gap at row level — not as a monthly summary.',
      stat: '+£211',
      statLabel: 'Variance · Order #13315',
      statTone: '#f87171',
    },
    {
      eyebrow: 'Margin',
      heading: 'True international margin.',
      body: 'Strip out duty pass-through, surcharges, and landed-cost erosion. Compare a domestic pound to an international one with full transparency.',
      stat: '74.8%',
      statLabel: 'International true margin',
      statTone: '#0D9E8C',
    },
    {
      eyebrow: 'Recovery',
      heading: 'Findings, ranked and ready.',
      body: 'Supported overcharge findings with the carrier invoice and CDS declaration linked, ready for the next review step.',
      stat: '23',
      statLabel: 'Ready findings · orders ranked',
      statTone: '#0D9E8C',
    },
  ];
  return (
    <section style={{ background: 'var(--bl-light)', padding: '40px 80px 120px' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
          {pillars.map((p) => (
            <div key={p.eyebrow} style={{
              background: '#fff',
              border: '1px solid var(--bl-light-border)',
              borderRadius: 14,
              padding: '32px 28px',
              display: 'flex', flexDirection: 'column',
            }}>
              <div style={{ fontSize: 10.5, fontWeight: 600, color: '#94a3b8', textTransform: 'uppercase', letterSpacing: '0.14em' }}>
                {p.eyebrow}
              </div>
              <h3 style={{ fontSize: 22, fontWeight: 600, color: 'var(--bl-light-text-1)', letterSpacing: '-0.015em', margin: '12px 0 14px', lineHeight: 1.2 }}>
                {p.heading}
              </h3>
              <p style={{ fontSize: 14, lineHeight: 1.6, color: '#64748b', margin: 0, flex: 1 }}>
                {p.body}
              </p>
              <div style={{
                marginTop: 24, paddingTop: 20,
                borderTop: '1px solid #f0f3f8',
              }}>
                <div style={{
                  fontSize: 32, fontWeight: 600,
                  color: p.statTone, letterSpacing: '-0.02em',
                  fontVariantNumeric: 'tabular-nums', lineHeight: 1,
                }}>{p.stat}</div>
                <div style={{ fontSize: 11.5, color: '#94a3b8', marginTop: 8, fontFamily: 'var(--bl-font-mono)' }}>
                  {p.statLabel}
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function ClosingSection() {
  return (
    <section style={{
      background: 'var(--bl-canvas)',
      padding: '120px 80px',
      position: 'relative',
      overflow: 'hidden',
    }}>
      <div style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(50% 60% at 50% 50%, rgba(13,158,140,0.12) 0%, transparent 60%)',
        pointerEvents: 'none',
      }}/>
      <div style={{ maxWidth: 920, margin: '0 auto', textAlign: 'center', position: 'relative' }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 10, marginBottom: 28,
        }}>
          <span style={{ width: 8, height: 8, borderRadius: '50%', background: 'var(--bl-brand)', boxShadow: '0 0 0 4px rgba(13,158,140,0.18)' }}/>
          <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', color: '#fff' }}>BORDERLENS</span>
        </div>
        <h2 style={{
          fontSize: 56, fontWeight: 600, color: 'var(--bl-text-0)',
          letterSpacing: '-0.03em', lineHeight: 1.05, margin: 0,
        }}>
          See the recovery in your last 90 days.
        </h2>
        <p style={{ fontSize: 17, color: 'var(--bl-text-3)', maxWidth: 540, margin: '20px auto 0', lineHeight: 1.55 }}>
          Connect Shopify and forward your carrier invoices. We'll send back a reconciled finding inbox — no commitment.
        </p>
        <div style={{ display: 'inline-flex', alignItems: 'center', gap: 20, marginTop: 36 }}>
          <a href="mailto:hello@borderlens.io?subject=BorderLens%20demo" className="bl-cta-primary" style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            background: 'var(--bl-brand)', color: '#042f2e',
            fontSize: 14, fontWeight: 600,
            padding: '12px 22px', borderRadius: 8,
            transition: 'background 0.15s',
          }}>
            Book a demo <Icon.Arrow size={14}/>
          </a>
          <a href="/guides" className="bl-link" style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            fontSize: 14, fontWeight: 500, color: 'var(--bl-text-2)',
          }}>
            Read the guides <span style={{ opacity: 0.5 }}>→</span>
          </a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer style={{
      background: 'var(--bl-canvas)',
      borderTop: '1px solid var(--bl-surface-2)',
      padding: '32px 80px',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      fontSize: 12, color: 'var(--bl-text-4)',
    }}>
      <div style={{ display: 'inline-flex', alignItems: 'center', gap: 10 }}>
        <span style={{ width: 7, height: 7, borderRadius: '50%', background: 'var(--bl-brand)' }}/>
        <span style={{ fontWeight: 700, letterSpacing: '0.14em', fontSize: 11, color: 'var(--bl-text-2)' }}>BORDERLENS</span>
        <span style={{ marginLeft: 12 }}>© 2026 BorderLens Ltd</span>
      </div>
      <div style={{ display: 'flex', gap: 20, fontFamily: 'var(--bl-font-mono)', fontSize: 11 }}>
        <a href="/privacy">Privacy</a>
        <a href="/terms">Terms</a>
        <a href="https://app.borderlens.io">Status</a>
        <a href="mailto:hello@borderlens.io">hello@borderlens.io</a>
      </div>
    </footer>
  );
}

window.FlowSection = FlowSection;
window.PillarsSection = PillarsSection;
window.ClosingSection = ClosingSection;
window.Footer = Footer;