// v3-value.jsx — "Pays for itself": the money + nothing-slips value beat.
// Placement: right after HowItWorks, before PromiseLines. Broadens the pitch
// beyond "time" to tangible money caught and balls not dropped.
//
// Reuses window primitives from lantic-ui.jsx: BRAND, SAT, SF, MONO, useInView, useViewport.

const { BRAND: VAL_BRAND, SAT: VAL_SAT, SF: VAL_SF, MONO: VAL_MONO } = window;

const VAL_PILLARS = [
  {
    col: '#10B981', label: 'Chases your money',
    line: 'The invoice that’s gone quiet. The client who never replied. Lantic follows up so you don’t have to remember to.',
    eg: 'Morrison’s invoice was 8 days over. Lantic chased it. It’s in.',
    icon: (c) => (<g><path d="M12 3v18" stroke={c} strokeWidth="1.8" strokeLinecap="round"/><path d="M16 7.5C16 5.5 14.2 4.5 12 4.5S8 5.5 8 7.5s1.8 2.7 4 3 4 1.2 4 3-1.8 2.5-4 2.5-4-1-4-2.8" stroke={c} strokeWidth="1.8" strokeLinecap="round" fill="none"/></g>),
  },
  {
    col: '#38BDF8', label: 'Watches the leaks',
    line: 'Cashflow dipping, a margin slipping, a subscription you forgot you were paying. Lantic spots it before it bites.',
    eg: 'Heads up: your supplier just lifted prices 8%. Here’s a cheaper option.',
    icon: (c) => (<g><path d="M4 16l5-5 4 3 7-7" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/><path d="M20 4v5h-5" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round" fill="none"/></g>),
  },
  {
    col: '#A78BFA', label: 'Nothing slips',
    line: 'The renewal, the compliance date, the follow-up you’d have forgotten. Lantic remembers what you can’t afford to.',
    eg: 'Your insurance renews Friday. Want me to pull three quotes first?',
    icon: (c) => (<g><circle cx="12" cy="12" r="8" stroke={c} strokeWidth="1.8" fill="none"/><path d="M12 8v4.5l3 2" stroke={c} strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"/></g>),
  },
];

function PaysForItself() {
  const ref = React.useRef(null);
  const inView = window.useInView(ref, 0.2);
  const vw = window.useViewport();
  const phone = vw < 820;

  return (
    <section ref={ref} style={{
      position: 'relative', padding: phone ? '92px 20px 96px' : '150px 32px 160px',
      background: VAL_BRAND.canvasDeep, overflow: 'hidden', borderTop: `1px solid ${VAL_BRAND.hair}` }}>
      <div aria-hidden style={{ position: 'absolute', inset: 0,
        background: `radial-gradient(ellipse 52% 46% at 30% 18%, ${VAL_BRAND.good}14 0%, transparent 60%)` }}/>

      <div style={{ maxWidth: 1160, margin: '0 auto', position: 'relative' }}>
        {/* header */}
        <div style={{ maxWidth: 720, marginBottom: phone ? 44 : 66 }}>
          <div style={{ fontFamily: VAL_MONO, fontSize: 11, color: VAL_BRAND.skyMist,
            letterSpacing: '0.26em', fontWeight: 600, textTransform: 'uppercase', marginBottom: 16 }}>Pays for itself</div>
          <h2 style={{ margin: 0, fontFamily: VAL_SAT, fontWeight: 600,
            fontSize: phone ? 'clamp(32px, 8vw, 44px)' : 'clamp(44px, 4.6vw, 62px)',
            letterSpacing: -2, lineHeight: 1.04, color: VAL_BRAND.ink, textWrap: 'balance' }}>
            It doesn’t just save time.<br/>It catches money.
          </h2>
        </div>

        {/* three pillars */}
        <div style={{ display: 'grid',
          gridTemplateColumns: phone ? '1fr' : 'repeat(3, 1fr)', gap: phone ? 18 : 26 }}>
          {VAL_PILLARS.map((p, i) => (
            <div key={p.label} style={{
              padding: phone ? '26px 22px' : '32px 28px', borderRadius: 20,
              background: 'rgba(255,255,255,.028)', border: `1px solid ${VAL_BRAND.cardBorder}`,
              opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(18px)',
              transition: `opacity 640ms ease ${i * 130}ms, transform 640ms cubic-bezier(.22,1,.36,1) ${i * 130}ms` }}>
              <div style={{ width: 46, height: 46, borderRadius: 13, marginBottom: 20,
                background: `${p.col}18`, border: `1px solid ${p.col}3a`,
                display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                <svg width="22" height="22" viewBox="0 0 24 24" fill="none">{p.icon(p.col)}</svg>
              </div>
              <div style={{ fontFamily: VAL_SAT, fontWeight: 600, fontSize: phone ? 20 : 22,
                letterSpacing: -0.5, color: VAL_BRAND.ink, marginBottom: 10 }}>{p.label}</div>
              <div style={{ fontFamily: VAL_SF, fontSize: phone ? 15 : 15.5, lineHeight: 1.5,
                color: VAL_BRAND.sub, textWrap: 'pretty', marginBottom: 18 }}>{p.line}</div>
              <div style={{ display: 'flex', gap: 10, alignItems: 'flex-start',
                paddingTop: 16, borderTop: `1px solid ${VAL_BRAND.hair}` }}>
                <span style={{ width: 6, height: 6, borderRadius: 3, background: p.col, marginTop: 7,
                  boxShadow: `0 0 7px ${p.col}`, flex: '0 0 auto' }}/>
                <span style={{ fontFamily: VAL_SF, fontSize: 13.5, lineHeight: 1.45, color: VAL_BRAND.dim,
                  fontStyle: 'italic', textWrap: 'pretty' }}>“{p.eg}”</span>
              </div>
            </div>
          ))}
        </div>

        {/* the punch line */}
        <div style={{ marginTop: phone ? 40 : 56, textAlign: 'center',
          opacity: inView ? 1 : 0, transform: inView ? 'none' : 'translateY(14px)',
          transition: 'opacity 700ms ease 480ms, transform 700ms cubic-bezier(.22,1,.36,1) 480ms' }}>
          <div style={{ fontFamily: VAL_SAT, fontWeight: 500, fontSize: phone ? 22 : 'clamp(26px, 2.8vw, 36px)',
            letterSpacing: -1, lineHeight: 1.25, color: VAL_BRAND.ink, maxWidth: 760, margin: '0 auto', textWrap: 'balance' }}>
            Catch one missed invoice a month, and Lantic has{' '}
            <span style={{ background: `linear-gradient(110deg, ${VAL_BRAND.good} 0%, ${VAL_BRAND.skyLight} 100%)`,
              WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent', fontStyle: 'italic' }}>already paid for itself.</span>
          </div>
        </div>
      </div>
    </section>
  );
}

window.PaysForItself = PaysForItself;