// Engagement — two ways to work with Orxnge.
// Joint venture is the house-default (accented). Hovering À la carte shifts
// the accent; mouse-out snaps back to JV. Both paths are fully ownable —
// the language is neutral so neither throws shade at the other.
const Term = ({ label, value }) => (
  <div
    className="orx-term"
    style={{
      display: 'grid', gridTemplateColumns: '112px 1fr',
      gap: 16, alignItems: 'baseline',
      padding: '14px 0',
      borderTop: '1px solid rgba(245,238,228,0.08)',
    }}
  >
    <div
      className="orx-term__label"
      style={{
        fontFamily: "'Inter Tight', sans-serif",
        fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
        color: '#8A7F70', fontWeight: 500,
        transition: 'color 1280ms cubic-bezier(0.22,1,0.36,1)',
      }}
    >{label}</div>
    <div style={{
      fontFamily: "'Inter Tight', sans-serif",
      fontSize: 15, lineHeight: 1.55, color: '#E8DDCC',
    }}>{value}</div>
  </div>
);

const Path = ({ kicker, title, lede, terms, pathKey, accent, onEnter, onLeave }) => (
  <div
    id={`engagement-${pathKey}`}
    className={`orx-path orx-path--${pathKey}${accent ? ' is-accent' : ''}`}
    data-path={pathKey}
    onMouseEnter={onEnter}
    onMouseLeave={onLeave}
    style={{
      position: 'relative',
      padding: '44px 40px 36px',
      borderRadius: 20,
      display: 'flex', flexDirection: 'column',
      transition:
        'background 1680ms cubic-bezier(0.22,1,0.36,1), border-color 1680ms cubic-bezier(0.22,1,0.36,1), box-shadow 1680ms cubic-bezier(0.22,1,0.36,1), transform 1680ms cubic-bezier(0.22,1,0.36,1)',
    }}
  >
    <div
      className="orx-path__kicker"
      style={{
        fontFamily: "'Inter Tight', sans-serif",
        fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase',
        marginBottom: 14, fontWeight: 500,
        transition: 'color 1280ms cubic-bezier(0.22,1,0.36,1)',
      }}
    >{kicker}</div>
    <h3 style={{
      fontFamily: "'Inter Tight', sans-serif",
      fontSize: 'clamp(36px, 3.6vw, 52px)',
      fontWeight: 400, letterSpacing: '-0.035em', lineHeight: 1.02,
      color: '#FFFAF5', margin: 0,
    }}>{title}</h3>
    <p style={{
      fontFamily: "'Inter Tight', sans-serif",
      fontSize: 16, lineHeight: 1.55, color: '#BFB3A2',
      margin: '20px 0 28px', textWrap: 'pretty',
    }}>{lede}</p>
    <div>
      {terms.map((t) => <Term key={t.label} {...t} />)}
    </div>
  </div>
);

const Engagement = () => {
  // JV is the initial accent. Any hover promotes that path to the new
  // permanent selection — leaving the section no longer snaps back to JV.
  // Matches the marquee pill behavior.
  const [accented, setAccented] = React.useState('jv');

  // Mobile: scroll-pick just like Philosophy. Whichever path is closest
  // to viewport center becomes accented, which triggers the ring
  // animation via the .is-accent selector. Desktop hover persistence
  // keeps working above 900px. Path elements are found by their
  // `engagement-<key>` id rather than refs, so no wiring change to the
  // Path component.
  React.useEffect(() => {
    const mq = window.matchMedia('(max-width: 900px)');
    let raf = 0;
    const pick = () => {
      if (!mq.matches) return;
      const mid = window.innerHeight / 2;
      const pairs = ['alacarte', 'jv']
        .map((k) => [k, document.getElementById(`engagement-${k}`)])
        .filter(([, el]) => !!el);
      let best = null;
      let bestDist = Infinity;
      pairs.forEach(([key, el]) => {
        const r = el.getBoundingClientRect();
        const c = r.top + r.height / 2;
        const d = Math.abs(c - mid);
        if (d < bestDist) { bestDist = d; best = key; }
      });
      if (best) setAccented(best);
    };
    const onScroll = () => {
      cancelAnimationFrame(raf);
      raf = requestAnimationFrame(pick);
    };
    pick();
    window.addEventListener('scroll', onScroll, { passive: true });
    window.addEventListener('resize', onScroll);
    mq.addEventListener?.('change', onScroll);
    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener('scroll', onScroll);
      window.removeEventListener('resize', onScroll);
      mq.removeEventListener?.('change', onScroll);
    };
  }, []);
  return (
  <section style={{
    padding: '128px 48px',
    background: '#0A0705',
    borderTop: '1px solid rgba(245,238,228,0.06)',
    borderBottom: '1px solid rgba(245,238,228,0.06)',
  }}>
    <div style={{maxWidth: 1280, margin: '0 auto'}}>
      <div className="orx-reveal" style={{maxWidth: 860, marginBottom: 64}}>
        <div style={{
          fontFamily: "'Inter Tight', sans-serif",
          fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: '#FFA566', marginBottom: 20,
        }}>Engagement</div>
        <h2 style={{
          fontFamily: "'Inter Tight', sans-serif",
          fontSize: 'clamp(36px, 5vw, 72px)',
          fontWeight: 400, lineHeight: 1.0, letterSpacing: '-0.04em',
          color: '#FFFAF5', margin: 0, textWrap: 'pretty',
        }}>
          One path, <span style={{fontFamily: "'Instrument Serif', serif", fontStyle: 'italic'}}>two ways in.</span>
        </h2>
        <p style={{
          fontFamily: "'Inter Tight', sans-serif",
          fontSize: 17, lineHeight: 1.6, color: '#BFB3A2',
          margin: '24px 0 0', maxWidth: 720,
        }}>
          We are intentional about who we partner with. The standards we hold our work to are the same ones we hold our partners to, and we can only run a handful of engagements at a time.
        </p>
      </div>

      <div
        className="orx-paths-grid orx-reveal"
        style={{
          display: 'grid',
          gridTemplateColumns: '1fr 1fr',
          gap: 20,
        }}
      >
        <Path
          pathKey="alacarte"
          accent={accented === 'alacarte'}
          onEnter={() => setAccented('alacarte')}
          onLeave={() => {}}
          kicker="Option 01"
          title="À la carte."
          lede="Scoped engagements with fixed deliverables. Every build is fully yours. Systems, infrastructure, and assets."
          terms={[
            { label: 'Structure',  value: 'Fixed scope. Fixed fee. Clear milestones.' },
            { label: 'Investment', value: 'Cash. Paid against delivery.' },
            { label: 'Cadence',    value: 'Optional monthly operations + iteration on top.' },
            { label: 'Best for',   value: 'Operators with a defined build in mind and the team to run it afterward.' },
          ]}
        />
        <Path
          pathKey="jv"
          accent={accented === 'jv'}
          onEnter={() => setAccented('jv')}
          onLeave={() => {}}
          kicker="Option 02"
          title="Joint venture."
          lede="A partnership. We build, operate, and grow alongside you. Fully invested in the outcome."
          terms={[
            { label: 'Structure',  value: 'Equity partnership with an active operating role.' },
            { label: 'Investment', value: 'We invest the build.' },
            { label: 'Alignment',  value: 'Full skin in the game. A fractional growth partner.' },
            { label: 'Best for',   value: 'Founders looking for a long-horizon operator, not a vendor.' },
          ]}
        />
      </div>
    </div>

    <style>{`
      /* Base (dim) state — shared. */
      .orx-path {
        background: #120D08;
        border: 1px solid rgba(245,238,228,0.08);
        box-shadow: 0 6px 24px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.03);
      }
      .orx-path .orx-path__kicker { color: #8A7F70; }

      /* Accent state. Applied to JV by default, or whichever the user hovers. */
      .orx-path.is-accent {
        background: linear-gradient(180deg, #1C140D 0%, #120D08 100%);
        border-color: rgba(255,106,10,0.28);
        box-shadow:
          0 0 0 1px rgba(255,106,10,0.22),
          0 24px 60px rgba(255,106,10,0.10),
          inset 0 1px 0 rgba(255,255,255,0.04);
        transform: translateY(-4px) scale(1.01);
      }
      .orx-path.is-accent .orx-path__kicker { color: #FFA566; }
      .orx-path.is-accent .orx-term__label   { color: #FFA566; }

      /* Mobile: stacked, one path per row — Option 01 on top, Option 02
         below. Horizontal constraints on a phone make side-by-side too
         cramped for the term grid. Compact padding, tighter fonts, and
         the term label/value row becomes a proper 2-column so values
         line up cleanly along the left rule. */
      @media (max-width: 720px) {
        .orx-paths-grid {
          grid-template-columns: 1fr !important;
          gap: 14px !important;
        }
        .orx-path {
          padding: 28px 22px 24px !important;
          border-radius: 16px !important;
        }
        .orx-path h3 {
          font-size: clamp(28px, 8vw, 40px) !important;
          letter-spacing: -0.025em !important;
        }
        .orx-path p {
          font-size: 14px !important;
          line-height: 1.55 !important;
          margin: 14px 0 20px !important;
        }
        .orx-path .orx-path__kicker {
          font-size: 10px !important;
          margin-bottom: 12px !important;
        }
        .orx-term {
          grid-template-columns: 92px 1fr !important;
          gap: 14px !important;
          padding: 12px 0 !important;
        }
        .orx-term__label {
          font-size: 10px !important;
          letter-spacing: 0.2em !important;
        }
        .orx-term > div:last-child {
          font-size: 14px !important;
          line-height: 1.45 !important;
        }
      }
    `}</style>
  </section>
  );
};

window.Engagement = Engagement;
window.EngagementPath = Path;