// CaseStudy — alternating L/R rows, scroll-reactive illumination.
// No client names. No numbers. Pain points + abstract solutions. The
// "graphic" panel is a typographic composition the problem itself casts,
// not a logo lockup or a product screenshot.
const CaseRow = ({ n, industry, focus, headline, points, glyph, reverse }) => {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!ref.current) return;
    const io = new IntersectionObserver(
      (entries) => entries.forEach((e) => {
        if (e.intersectionRatio > 0.4) e.target.classList.add('is-live');
        else e.target.classList.remove('is-live');
      }),
      { threshold: [0, 0.4, 0.8] }
    );
    io.observe(ref.current);
    return () => io.disconnect();
  }, []);

  const Copy = (
    <div className="orx-case__copy" style={{display: 'flex', flexDirection: 'column', gap: 20}}>
      <div style={{display: 'flex', gap: 16, alignItems: 'baseline'}}>
        <span className="orx-case__num" style={{
          fontFamily: "'Inter Tight', sans-serif",
          fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase',
          fontWeight: 500, color: '#5C5246',
          transition: 'color 480ms cubic-bezier(0.22,1,0.36,1)',
        }}>{n}</span>
        <span style={{
          fontFamily: "'Inter Tight', sans-serif",
          fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
          fontWeight: 500, color: '#FFA566',
        }}>{industry}</span>
        <span style={{
          fontFamily: "'Inter Tight', sans-serif",
          fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
          fontWeight: 400, color: '#8A7F70',
        }}>{focus}</span>
      </div>
      <h3 className="orx-case__headline" style={{
        fontFamily: "'Inter Tight', sans-serif",
        fontSize: 'clamp(32px, 3.6vw, 48px)',
        fontWeight: 400, lineHeight: 1.04, letterSpacing: '-0.035em',
        color: '#BFB3A2', margin: 0, textWrap: 'pretty',
        transition: 'color 480ms cubic-bezier(0.22,1,0.36,1), transform 480ms cubic-bezier(0.22,1,0.36,1)',
      }}>{headline}</h3>
      <ul style={{
        listStyle: 'none', padding: 0, margin: 0,
        display: 'flex', flexDirection: 'column', gap: 12,
      }}>
        {points.map((p, i) => (
          <li key={i} style={{
            display: 'grid', gridTemplateColumns: '16px 1fr', gap: 14,
            alignItems: 'baseline',
          }}>
            <span style={{
              height: 1, marginTop: 10,
              background: 'rgba(255,165,102,0.5)',
            }}/>
            <span style={{
              fontFamily: "'Inter Tight', sans-serif",
              fontSize: 15, lineHeight: 1.55, color: '#8A7F70',
            }}>{p}</span>
          </li>
        ))}
      </ul>
    </div>
  );

  const Graphic = (
    <div className="orx-case__graphic" style={{
      position: 'relative',
      minHeight: 360, aspectRatio: '4 / 3',
      borderRadius: 20,
      overflow: 'hidden',
      background: '#120D08',
      border: '1px solid rgba(245,238,228,0.08)',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
    }}>
      <div className="orx-case__glow" style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(60% 55% at 50% 50%, rgba(255,106,10,0.12) 0%, transparent 70%)',
        opacity: 0,
        transition: 'opacity 2160ms cubic-bezier(0.22,1,0.36,1)',
      }}/>
      <div style={{
        fontFamily: "'Instrument Serif', serif", fontStyle: 'italic',
        fontSize: 'clamp(64px, 7vw, 108px)',
        lineHeight: 1.15, letterSpacing: '-0.03em',
        background: 'linear-gradient(180deg, #FFE3CC 0%, #FF8533 100%)',
        WebkitBackgroundClip: 'text', backgroundClip: 'text',
        color: 'transparent',
        textAlign: 'center',
        padding: '24px 40px 32px',
        position: 'relative',
      }}>{glyph}</div>
      <div style={{
        position: 'absolute', bottom: 20, left: 24,
        fontFamily: "'Inter Tight', sans-serif",
        fontSize: 10, letterSpacing: '0.24em', textTransform: 'uppercase',
        color: '#5C5246',
      }}>Case · {n}</div>
    </div>
  );

  return (
    <div
      ref={ref}
      id={`case-${n}`}
      className={`orx-case-row ${reverse ? 'orx-case-row--left' : 'orx-case-row--right'}`}
      style={{
        position: 'relative',
        display: 'grid',
        gridTemplateColumns: '1fr 1fr',
        gap: 56,
        alignItems: 'center',
        padding: '56px 24px',
        borderTop: '1px solid rgba(245,238,228,0.06)',
        borderRadius: 20,
        transition: 'background 1440ms cubic-bezier(0.22,1,0.36,1), transform 1440ms cubic-bezier(0.22,1,0.36,1)',
      }}
    >
      {reverse ? (<>{Graphic}{Copy}</>) : (<>{Copy}{Graphic}</>)}
    </div>
  );
};

const CaseStudy = () => {
  const cases = [
    {
      n: '01',
      industry: 'Real estate',
      focus: 'Demand engine',
      headline: 'A high-volume outreach engine that self-improves.',
      points: [
        'Outbound at scale without hurting deliverability.',
        'AI replies that route qualified conversations forward.',
        'A funnel at the end of the sequence doing the heavy lifting.',
      ],
      glyph: 'outbound.',
    },
    {
      n: '02',
      industry: 'Real estate',
      focus: 'Agentic orchestration',
      headline: 'A multi-agent operating system, running parallel.',
      points: [
        'Deal-flow, underwriting, and research each owned by their own layer.',
        'Lender, operator, and contractor relationships routed through the same surface.',
        'The firm’s daily operations, running in the background.',
      ],
      glyph: 'agents.',
    },
    {
      n: '03',
      industry: 'Software',
      focus: 'Custom build · Joint venture',
      headline: 'A quoting canvas for contractors, powered by AI.',
      points: [
        'Hyper-realistic AI mockups rendered on the prospect’s own home.',
        'An embeddable lead generation engine that turns sites into funnels.',
        'Satellite-accurate measurements, quotes, and AI client copy in one flow.',
      ],
      glyph: 'render.',
    },
    {
      n: '04',
      industry: 'Home service',
      focus: 'Brand + operating surface',
      // Explicit break before "for" makes the two lines symmetric at
      // wider widths. Hidden on narrow mobile (see `.orx-case-04-break`
      // media rule) so natural wrapping can handle the split without
      // forcing a stray short line.
      headline: (
        <>A local operator, set up<br className="orx-case-04-break"/> for serious scale.</>
      ),
      points: [
        'A brand identity that reads serious from the first impression.',
        'Enterprise-grade intake with AI sentiment analysis.',
        'An operating surface a lean team can actually live in.',
      ],
      glyph: 'brand.',
    },
    {
      n: '05',
      industry: 'Creator',
      focus: 'Brand + AI product',
      headline: 'A personal brand with a product underneath it.',
      points: [
        'An identity and funnel built around the operator’s own voice.',
        'An AI fitness coaching product trained on their methodology.',
        'An Olympian’s playbook, scaled while the principal rests.',
      ],
      glyph: 'endure.',
    },
    {
      n: '06',
      industry: 'Events',
      focus: 'Real-time translation',
      headline: 'A live voice, cloned. In every language.',
      points: [
        'Low-latency translation served directly to attendees’ own earbuds.',
        'The speaker’s own voice, in the audience’s chosen language.',
        'A transcript engine that repurposes the moment the room empties.',
      ],
      glyph: 'relay.',
    },
  ];

  return (
    <section style={{
      padding: '128px 48px',
      background: 'linear-gradient(180deg, #0A0705 0%, #120D08 100%)',
      borderTop: '1px solid rgba(245,238,228,0.06)',
    }}>
      <div style={{maxWidth: 1280, margin: '0 auto'}}>
        <div className="orx-reveal" style={{marginBottom: 40, maxWidth: 860}}>
          <div style={{
            fontFamily: "'Inter Tight', sans-serif",
            fontSize: 11, letterSpacing: '0.22em', textTransform: 'uppercase',
            color: '#FFA566', marginBottom: 20,
          }}>Selected work</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',
          }}>
            The work, <span style={{fontFamily: "'Instrument Serif', serif", fontStyle: 'italic'}}>in shape.</span>
          </h2>
          <p style={{
            fontFamily: "'Inter Tight', sans-serif",
            fontSize: 18, lineHeight: 1.55, color: '#8A7F70',
            margin: '20px 0 0', maxWidth: 640,
          }}>
            Engagements described by shape, not signature.
          </p>
        </div>

        {cases.map((c, i) => (
          <CaseRow key={c.n} {...c} reverse={i % 2 === 1} />
        ))}
      </div>

      <style>{`
        /* Shared accent state. Lit either by scroll (.is-live) or hover. */
        .orx-case-row.is-live,
        .orx-case-row:hover {
          transform: translateY(-2px);
        }
        /* Right-side glyph rows: gradient emanates from the right edge. */
        .orx-case-row--right.is-live,
        .orx-case-row--right:hover {
          background: linear-gradient(270deg, rgba(255,106,10,0.045) 0%, transparent 55%);
        }
        /* Left-side glyph rows: gradient emanates from the left edge. */
        .orx-case-row--left.is-live,
        .orx-case-row--left:hover {
          background: linear-gradient(90deg, rgba(255,106,10,0.045) 0%, transparent 55%);
        }

        .orx-case-row.is-live .orx-case__headline,
        .orx-case-row:hover   .orx-case__headline { color: #FFFAF5; transform: translateY(-2px); }
        .orx-case-row.is-live .orx-case__num,
        .orx-case-row:hover   .orx-case__num      { color: #FFA566; }
        .orx-case-row.is-live .orx-case__glow,
        .orx-case-row:hover   .orx-case__glow     { opacity: 1; }
        .orx-case-row.is-live .orx-case__graphic,
        .orx-case-row:hover   .orx-case__graphic {
          border-color: rgba(255,106,10,0.16);
          box-shadow: 0 24px 60px rgba(255,106,10,0.07), inset 0 1px 0 rgba(255,255,255,0.04);
        }

        .orx-case__graphic {
          transition: border-color 1440ms cubic-bezier(0.22,1,0.36,1), box-shadow 1440ms cubic-bezier(0.22,1,0.36,1);
          isolation: isolate;
        }

        /* Scroll-triggered conic ring. Runs the same fast-then-slow pattern
           as the Philosophy/Engagement cards, but uses the row's .is-live
           state (set by the IntersectionObserver above) instead of :hover,
           so the whole section animates as the viewer scrolls through. */
        .orx-case__graphic::after {
          content: '';
          position: absolute;
          inset: 0;
          border-radius: inherit;
          padding: 1.5px;
          pointer-events: none;
          opacity: 0;
          z-index: -1;
          /* Dimmer palette than the Philosophy/Engagement ring. This one sits
             on the side opposite the row's copy and shouldn't compete with it
             for attention — peak alpha dropped from 1.0 → 0.55, secondary
             stops likewise softened. */
          background: conic-gradient(
            from var(--orx-card-load-angle),
            rgba(255,106,10, 0)       0deg,
            rgba(255,106,10, 0)      30deg,
            rgba(255,106,10, 0.55)   60deg,
            rgba(255,165,102, 0.45)  90deg,
            rgba(220,110, 40, 0.28) 125deg,
            rgba(255,106,10, 0)    160deg,
            rgba(255,106,10, 0)    360deg
          );
          -webkit-mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
          -webkit-mask-composite: xor;
                  mask:
            linear-gradient(#000 0 0) content-box,
            linear-gradient(#000 0 0);
                  mask-composite: exclude;
        }
        /* Persistent slow rotation only — no fast opening sweep. There's
           no hover intent here to incentivize, so the aggressive jump-start
           felt excessive. The ring simply fades in and drifts at a constant
           pace while the row is in view. Two parallel animations: a one-shot
           opacity fade so it doesn't pop in, plus an infinite 9s rotation
           that stays at a steady rate from the moment the row lights up. */
        .orx-case-row.is-live .orx-case__graphic::after {
          animation:
            orx-case-ring-fade 600ms cubic-bezier(0.22,1,0.36,1) forwards,
            orx-case-ring-spin 18000ms linear infinite;
        }
        @keyframes orx-case-ring-fade {
          from { opacity: 0; }
          to   { opacity: 1; }
        }
        @keyframes orx-case-ring-spin {
          from { --orx-card-load-angle: 0deg; }
          to   { --orx-card-load-angle: 360deg; }
        }

        @media (max-width: 900px) {
          .orx-case-row {
            grid-template-columns: 1fr !important;
            gap: 24px !important;
            padding: 36px 0 !important;
          }
          .orx-case-row .orx-case__graphic {
            order: -1 !important;
            aspect-ratio: 16 / 10 !important;
            min-height: 0 !important;
          }
        }
        @media (max-width: 600px) {
          .orx-case__headline {
            font-size: clamp(24px, 7vw, 32px) !important;
          }
          /* On narrow screens, drop the forced line break for case 04 so
             the headline reflows naturally instead of producing a stub
             short line. */
          .orx-case-04-break { display: none !important; }
          /* Mobile reads better without the big empty typographic panels
             next to the copy — the abstract glyph ("brand.", "render.",
             etc.) isn't adding enough to justify the vertical cost on a
             phone. Hide the graphic; show only the numbered copy block. */
          .orx-case-row .orx-case__graphic { display: none !important; }
          .orx-case-row {
            padding: 24px 0 !important;
            gap: 0 !important;
          }
        }
      `}</style>
    </section>
  );
};

window.CaseStudy = CaseStudy;
window.CaseRow = CaseRow;