// Problem section + the scroll-driven Invoice → Hinata transformation.

const InvoiceMock = ({ opacity }) => (
  <div style={{
    width: 380,
    background: '#FAFAF7',
    border: '1px solid #DDD',
    fontFamily: 'Courier, monospace',
    fontSize: 11,
    color: '#222',
    padding: 24,
    opacity,
    boxShadow: '0 6px 24px -10px rgba(0,0,0,0.2)',
    borderRadius: 4,
    transition: 'opacity 0.1s linear',
  }}>
    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 16 }}>
      <div style={{ fontWeight: 700, fontSize: 14, letterSpacing: '0.04em' }}>TREATMENT ESTIMATE</div>
      <div style={{ fontSize: 9 }}>FORM 4821-B</div>
    </div>
    <div style={{ fontSize: 10, marginBottom: 4 }}>PATIENT: CHEN, MARCUS J.</div>
    <div style={{ fontSize: 10, marginBottom: 4 }}>DOB: 1981-04-12  CHART: 00821</div>
    <div style={{ fontSize: 10, marginBottom: 16 }}>DATE: 2026-05-12  PROV: HALEVY M.</div>
    <div style={{ borderTop: '1px solid #999', borderBottom: '1px solid #999', padding: '8px 0', marginBottom: 12 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontWeight: 700, fontSize: 10 }}>
        <span style={{ width: '15%' }}>CDA CODE</span>
        <span style={{ width: '40%' }}>DESCRIPTION</span>
        <span style={{ width: '15%' }}>TOOTH</span>
        <span style={{ width: '15%', textAlign: 'right' }}>FEE</span>
      </div>
    </div>
    {[
      ['72211', 'IMPL SURG SINGLE TOOTH', '14', '2850.00'],
      ['72519', 'BONE GRAFT W/MEMBRANE', '14', '1200.00'],
      ['72721', 'HEALING ABUTMENT', '14',  '350.00'],
      ['11101', 'EXAMN — SPEC CONS', '—', '195.00'],
      ['02144', 'RAD — PANORAMIC', '—', '180.00'],
      ['92216', 'IV SEDATION 45 MIN', '—', '440.00'],
      ['66541', 'POST-OP MEDS RX', '—', '85.00'],
    ].map(([c, d, t, f]) => (
      <div key={c} style={{ display: 'flex', justifyContent: 'space-between', padding: '4px 0', fontSize: 10, borderBottom: '1px dotted #CCC' }}>
        <span style={{ width: '15%' }}>{c}</span>
        <span style={{ width: '40%' }}>{d}</span>
        <span style={{ width: '15%' }}>{t}</span>
        <span style={{ width: '15%', textAlign: 'right' }}>${f}</span>
      </div>
    ))}
    <div style={{ marginTop: 12, paddingTop: 12, borderTop: '2px solid #222', display: 'flex', justifyContent: 'space-between', fontWeight: 700, fontSize: 12 }}>
      <span>TOTAL DUE:</span>
      <span>$5,300.00</span>
    </div>
    <div style={{ fontSize: 9, marginTop: 16, color: '#666', lineHeight: 1.4 }}>
      ESTIMATE ONLY. INSURANCE MAY COVER PORTION. PAYMENT DUE AT TIME OF SERVICE.
      QUESTIONS: CONTACT BILLING DEPT.
    </div>
    <div style={{ marginTop: 16, fontSize: 10, fontWeight: 700, color: '#A00' }}>
      ▢ I ACCEPT  ▢ I DECLINE
    </div>
  </div>
);

const HinataMock = ({ opacity }) => (
  <div style={{
    width: 380,
    opacity,
    transition: 'opacity 0.1s linear',
  }}>
    <div className="phone" style={{ width: 320, margin: '0 auto', boxShadow: '0 30px 60px -20px rgba(40,30,10,0.35)' }}>
      <div className="phone-notch"></div>
      <div className="phone-screen">
        <div style={{
          background: 'linear-gradient(180deg, #FBF6EC 0%, #F6EEDC 100%)',
          padding: '46px 18px 18px',
        }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <div style={{ width: 38, height: 38, borderRadius: 10, background: '#1A1A1A', color: '#E6CC8A', display: 'flex', alignItems: 'center', justifyContent: 'center', fontFamily: 'Noto Sans JP', fontWeight: 600, fontSize: 18 }}>R</div>
            <div style={{ lineHeight: 1.2 }}>
              <div style={{ fontWeight: 600, fontSize: 13 }}>Riverside Oral Surgery</div>
              <div style={{ fontSize: 11, color: '#8A8170' }}>Dr. Mira Halevy, DDS</div>
            </div>
          </div>
          <div style={{ marginTop: 14, fontSize: 11, color: '#8A8170', fontFamily: 'Geist Mono' }}>HI MARCUS —</div>
          <div style={{ marginTop: 4, fontWeight: 500, fontSize: 17 }}>Here's what we'd like to do, and why.</div>
        </div>
        <div className="pv-section">
          <h5>YOUR PROCEDURE</h5>
          <div style={{ fontWeight: 500, fontSize: 14, marginBottom: 8, color: '#1A1A1A' }}>Dental implant · tooth #14</div>
          <div style={{ height: 110, borderRadius: 10, background: 'radial-gradient(circle at 30% 30%, #F2E7D0 0%, #E6D2A8 100%)', position: 'relative', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg viewBox="0 0 200 110" width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
              <path d="M0 60 Q50 56, 100 58 T200 60 L200 110 L0 110 Z" fill="#E8B89C" opacity="0.55" />
              <path d="M0 76 Q50 73, 100 74 T200 76 L200 110 L0 110 Z" fill="#C99B6A" opacity="0.5" />
              <rect x="92" y="50" width="16" height="40" rx="2" fill="#7A7A7A" />
              {[55, 61, 67, 73, 79].map((y) => <rect key={y} x="92" y={y} width="16" height="2" fill="rgba(0,0,0,0.2)" />)}
              <path d="M86 50 L88 40 Q92 32 100 32 Q108 32 112 40 L114 50 Z" fill="#FAFAFA" stroke="rgba(0,0,0,0.1)" />
              <circle cx="160" cy="18" r="11" fill="rgba(255,255,255,0.9)" />
              <path d="M158 13 L164 18 L158 23 Z" fill="#1A1A1A" />
            </svg>
          </div>
        </div>
        <div className="pv-section">
          <h5>WHAT IT IS</h5>
          <p style={{ fontSize: 13, lineHeight: 1.5, color: '#3a3a3a', margin: 0 }}>
            A titanium post replaces the root of your missing tooth. Over a few
            months, your bone grows around it — making it strong enough to support
            a permanent crown that looks and feels real.
          </p>
        </div>
        <div className="pv-section">
          <h5>YOUR INVESTMENT</h5>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13, marginBottom: 8 }}>
            <span style={{ color: '#3a3a3a' }}>Implant + bone graft</span>
            <span style={{ fontWeight: 500, color: '#1A1A1A' }}>$5,300</span>
          </div>
          <div style={{ fontSize: 11, color: '#8A8170' }}>Includes consultation, sedation, and follow-ups.</div>
        </div>
      </div>
    </div>
  </div>
);

const Problem = () => {
  const ref = useRef(null);
  const p = useScrollProgress(ref, { start: 0.6, end: 0.4 });
  // Two-phase: 0..0.5 invoice fades, 0.5..1 hinata fades in
  const invoiceOp = clamp(1 - p * 1.8, 0, 1);
  const hinataOp = clamp((p - 0.45) * 2.2, 0, 1);
  const rotate = (1 - p) * 6 - 3; // -3 to 3
  const yShift = (0.5 - p) * 40;

  return (
    <section ref={ref} id="problem" style={{ background: 'var(--bg-soft)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
      <div className="container">
        <div style={{ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) minmax(0,1fr)', gap: 80, alignItems: 'start' }}>
          {/* Left — copy + stats (scrolls naturally) */}
          <div className="reveal">
            <div className="eyebrow" style={{ marginBottom: 24 }}>The problem</div>
            <h2 style={{ marginBottom: 28 }}>
              Your treatment plan looks like an invoice. Patients judge it like one.
            </h2>
            <p className="lede" style={{ marginBottom: 48 }}>
              Specialist plans arrive as a list of billing codes and a number at
              the bottom. Patients with no clinical relationship and no context to
              the procedure default to the only thing they can evaluate — the price.
            </p>

            <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
              {[
                { stat: '35%', label: 'of referred patients never schedule with the specialist.' },
                { stat: '40%', label: 'of complex treatment plans get declined after consultation.' },
                { stat: '57%', label: 'of patients open their treatment plan on a mobile phone first.' },
                { stat: '$5K+', label: 'is the average ticket walked away from. Per patient. Per month.' },
              ].map((s) => (
                <div key={s.stat} style={{ display: 'flex', alignItems: 'baseline', gap: 24, paddingBottom: 24, borderBottom: '1px solid var(--line)' }}>
                  <div className="serif" style={{ fontSize: 56, lineHeight: 1, color: 'var(--gold-deep)', minWidth: 100 }}>
                    {s.stat}
                  </div>
                  <div style={{ fontSize: 16, color: 'var(--fg-mute)', lineHeight: 1.5, maxWidth: '32ch' }}>
                    {s.label}
                  </div>
                </div>
              ))}
            </div>

            <p className="small" style={{ marginTop: 16 }}>
              Sources: ADA case-acceptance reports, internal interviews with 24 Canadian specialist practices.
            </p>
          </div>

          {/* Right — sticky morphing visual */}
          <div style={{ position: 'sticky', top: 100, height: 'min(720px, 80vh)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <div style={{ position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}>

              {/* Invoice — fades + tilts away */}
              <div style={{
                position: 'absolute',
                transform: `translateY(${yShift}px) rotate(${rotate}deg) scale(${0.95 + invoiceOp * 0.05})`,
                transition: 'transform 0.1s linear',
              }}>
                <InvoiceMock opacity={invoiceOp} />
              </div>

              {/* Hinata — fades + scales in */}
              <div style={{
                position: 'absolute',
                transform: `scale(${0.85 + hinataOp * 0.15})`,
                transition: 'transform 0.1s linear',
              }}>
                <HinataMock opacity={hinataOp} />
              </div>

              {/* progress dot indicator */}
              <div style={{
                position: 'absolute',
                bottom: -10,
                left: '50%',
                transform: 'translateX(-50%)',
                display: 'flex',
                gap: 6,
              }}>
                <div style={{
                  width: 32, height: 4, borderRadius: 2,
                  background: invoiceOp > 0.5 ? 'var(--gold)' : 'var(--line-strong)',
                  transition: 'background 0.3s',
                }}></div>
                <div style={{
                  width: 32, height: 4, borderRadius: 2,
                  background: hinataOp > 0.5 ? 'var(--gold)' : 'var(--line-strong)',
                  transition: 'background 0.3s',
                }}></div>
              </div>

              {/* arrow + label between */}
              <div style={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: `translate(-50%, -50%)`,
                opacity: p > 0.35 && p < 0.65 ? 1 : 0,
                transition: 'opacity 0.3s ease',
                background: 'var(--card-solid)',
                border: '1px solid var(--line)',
                padding: '10px 16px',
                borderRadius: 999,
                fontFamily: 'Geist Mono',
                fontSize: 11,
                letterSpacing: '0.06em',
                textTransform: 'uppercase',
                color: 'var(--gold-deep)',
                boxShadow: 'var(--shadow-md)',
                whiteSpace: 'nowrap',
              }}>
                Hinata is generating · 0:47
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Problem });