// Azlani — Home · Pinned phone scene (kept) + 2nd pinned scene (SMS thread)

const PinnedScene = () => {
  const sectionRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const onScroll = () => {
      if (!sectionRef.current) return;
      const r = sectionRef.current.getBoundingClientRect();
      const total = r.height - window.innerHeight;
      const scrolled = -r.top;
      const p = Math.max(0, Math.min(1, scrolled / total));
      setProgress(p);
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const turns = [
    { who: 'caller', text: 'Hi, we have water coming in near the loading dock.' },
    { who: 'azlani', text: 'Is this a commercial property?' },
    { who: 'caller', text: "Yes, a warehouse." },
    { who: 'azlani', text: 'Are you the property manager, owner, or tenant?' },
    { who: 'caller', text: "Property manager." },
    { who: 'azlani', text: 'Address?' },
    { who: 'caller', text: '124 Main Street.' },
    { who: 'azlani', text: 'Is water actively entering right now?' },
    { who: 'caller', text: 'Yes.' },
    { who: 'azlani', text: "Marking urgent. I'll text for photos and book Tuesday." },
  ];
  const phase1End = 0.7;
  const transcriptP = Math.min(1, progress / phase1End);
  const briefP = Math.max(0, (progress - phase1End) / (1 - phase1End));
  const visibleTurns = Math.floor(transcriptP * turns.length);

  const briefLines = [
    'NEW URGENT LEAD',
    'Contact: John Smith',
    'Role: Property manager',
    'Building: Warehouse',
    'Address: 124 Main Street',
    'Issue: Active leak / loading dock',
    'Urgency: HIGH',
    'Photos: requested by SMS',
    'Appt: Tuesday 10:00 AM',
    '→ Send estimator',
  ];
  const visibleBrief = Math.floor(briefP * briefLines.length);

  return (
    <section
      ref={sectionRef}
      style={{ height: '320vh', position: 'relative', background: 'var(--bg-2)', borderBottom: '1px solid var(--line)' }}
    >
      <div style={{ position: 'sticky', top: 0, height: '100vh', overflow: 'hidden', display: 'flex', alignItems: 'center' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center', width: '100%' }}>
          <div>
            <div className="eyebrow"><span className="dot"></span> Scene 01 · the call</div>
            <h2 className="serif" style={{ fontSize: 'clamp(48px, 6.5vw, 96px)', lineHeight: 0.95, letterSpacing: '-0.03em', margin: '20px 0 0', fontWeight: 400 }}>
              {progress < phase1End ? (
                <>2 AM call →<br/><span className="ital" style={{ color: 'var(--ember)' }}>qualified</span> in 90 sec.</>
              ) : (
                <>Then it becomes<br/>a <span className="ital" style={{ color: 'var(--ember)' }}>clean brief.</span></>
              )}
            </h2>
            <div className="mono" style={{ marginTop: 40, fontSize: 12, color: 'var(--muted)', letterSpacing: '0.12em' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: 360 }}>
                <span>{progress < phase1End ? '▸ LIVE · INTAKE' : '◼ BRIEF READY'}</span>
                <span>{Math.round(progress * 100).toString().padStart(2, '0')}%</span>
              </div>
              <div style={{ height: 1, background: 'var(--line)', marginTop: 8, position: 'relative', maxWidth: 360 }}>
                <div style={{ position: 'absolute', inset: 0, background: 'var(--ember)', transform: `scaleX(${progress})`, transformOrigin: 'left' }}></div>
              </div>
            </div>
          </div>

          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <PhoneFrame>
              <div style={{ padding: '52px 20px 12px', display: 'flex', justifyContent: 'space-between', fontSize: 11 }} className="mono">
                <span>9:41</span><span>•••</span>
              </div>
              <div style={{ padding: '0 20px 14px', borderBottom: '1px solid rgba(0,0,0,0.08)' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--muted)', letterSpacing: '0.12em' }}>
                  {progress < phase1End ? '▸ LIVE CALL · 02:14 AM' : 'JOB BRIEF · ready'}
                </div>
                <div className="serif" style={{ fontSize: 22, marginTop: 4, letterSpacing: '-0.01em' }}>
                  {progress < phase1End ? 'Unknown caller' : '124 Main Street'}
                </div>
              </div>
              <div style={{ flex: 1, padding: '14px 16px', overflow: 'hidden' }}>
                {progress < phase1End ? (
                  <div style={{ display: 'flex', flexDirection: 'column', gap: 8, transform: `translateY(${Math.max(0, (visibleTurns - 6) * -36)}px)`, transition: 'transform .5s ease' }}>
                    {turns.slice(0, visibleTurns).map((t, i) => (
                      <div key={i} style={{
                        alignSelf: t.who === 'azlani' ? 'flex-end' : 'flex-start',
                        maxWidth: '85%', padding: '8px 12px',
                        background: t.who === 'azlani' ? 'var(--ink)' : '#fff',
                        color: t.who === 'azlani' ? 'var(--bg)' : 'var(--ink)',
                        border: t.who === 'caller' ? '1px solid rgba(0,0,0,0.08)' : 'none',
                        borderRadius: t.who === 'azlani' ? '14px 14px 4px 14px' : '14px 14px 14px 4px',
                        fontSize: 12, lineHeight: 1.4, animation: 'bubbleIn .4s ease',
                      }}>{t.text}</div>
                    ))}
                  </div>
                ) : (
                  <div style={{ fontSize: 13, lineHeight: 1.65 }}>
                    {briefLines.slice(0, visibleBrief).map((l, i) => {
                      const isHeader = i === 0;
                      const isCta = l.startsWith('→');
                      return (
                        <div key={i} style={{
                          padding: isHeader ? '0 0 12px' : '4px 0',
                          borderBottom: isHeader ? '1px solid var(--line)' : 'none',
                          marginBottom: isHeader ? 8 : 0,
                          fontFamily: isHeader ? 'Geist, sans-serif' : 'inherit',
                          fontSize: isHeader ? 18 : 13,
                          color: isCta ? 'var(--ember)' : 'var(--ink)',
                          fontWeight: isCta ? 600 : 400,
                          animation: 'lineIn .35s ease',
                        }}>{l}</div>
                      );
                    })}
                  </div>
                )}
              </div>
              <style>{`
                @keyframes bubbleIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
                @keyframes lineIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: translateX(0); } }
              `}</style>
            </PhoneFrame>
          </div>
        </div>
      </div>
    </section>
  );
};

// ── PINNED SCENE 02 — SMS PHOTO COLLECTION ────────────────────
const SMSScene = () => {
  const sectionRef = React.useRef(null);
  const [progress, setProgress] = React.useState(0);
  React.useEffect(() => {
    const onScroll = () => {
      if (!sectionRef.current) return;
      const r = sectionRef.current.getBoundingClientRect();
      const total = r.height - window.innerHeight;
      const scrolled = -r.top;
      setProgress(Math.max(0, Math.min(1, scrolled / total)));
    };
    onScroll();
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  // Sequence: SMS sent → typing → reply → photo 1 → photo 2 → photo 3 → confirmation
  const events = [
    { kind: 'sms-out', time: '02:18', text: 'Hi John — please reply with photos or videos of the leak and the affected roof area. We’ve marked this as urgent.' },
    { kind: 'typing' },
    { kind: 'sms-in', time: '02:21', text: 'On it.' },
    { kind: 'photo', label: 'IMG_4421.jpg · loading dock' },
    { kind: 'photo', label: 'IMG_4422.jpg · ceiling stain' },
    { kind: 'photo', label: 'IMG_4423.jpg · roof access' },
    { kind: 'sms-out', time: '02:24', text: 'Thanks. Photos attached to your file. Estimator confirmed Tuesday 10 AM. You’ll get a reminder.' },
  ];
  const visible = Math.floor(progress * events.length * 1.1);

  return (
    <section
      ref={sectionRef}
      style={{ height: '280vh', position: 'relative', background: 'var(--bg)', borderBottom: '1px solid var(--line)' }}
    >
      <div style={{ position: 'sticky', top: 0, height: '100vh', overflow: 'hidden', display: 'flex', alignItems: 'center' }}>
        <div className="container" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center', width: '100%' }}>
          <div style={{ display: 'flex', justifyContent: 'center', order: 1 }}>
            <PhoneFrame>
              <div style={{ padding: '52px 20px 12px', display: 'flex', justifyContent: 'space-between', fontSize: 11 }} className="mono">
                <span>9:41</span><span>•••</span>
              </div>
              <div style={{ padding: '0 20px 14px', borderBottom: '1px solid rgba(0,0,0,0.08)', textAlign: 'center' }}>
                <div className="mono" style={{ fontSize: 10, color: 'var(--muted)' }}>SMS · Azlani</div>
                <div className="serif" style={{ fontSize: 18, marginTop: 2 }}>Smith Roofing</div>
              </div>
              <div style={{ flex: 1, padding: '14px 14px', overflow: 'hidden', display: 'flex', flexDirection: 'column', gap: 6, transform: `translateY(${Math.max(0, (visible - 5) * -40)}px)`, transition: 'transform .5s ease' }}>
                {events.slice(0, visible).map((e, i) => {
                  if (e.kind === 'typing') {
                    return (
                      <div key={i} style={{ alignSelf: 'flex-start', padding: '10px 14px', background: '#fff', border: '1px solid rgba(0,0,0,0.08)', borderRadius: '14px 14px 14px 4px', display: 'flex', gap: 4 }}>
                        <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--muted)', animation: 'typingDot 1s infinite 0s' }}></span>
                        <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--muted)', animation: 'typingDot 1s infinite 0.2s' }}></span>
                        <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--muted)', animation: 'typingDot 1s infinite 0.4s' }}></span>
                      </div>
                    );
                  }
                  if (e.kind === 'photo') {
                    return (
                      <div key={i} style={{ alignSelf: 'flex-start', maxWidth: '78%', animation: 'bubbleIn .4s ease' }}>
                        <div style={{
                          width: 160, height: 110,
                          background: `repeating-linear-gradient(45deg, #c9c2b4 0 8px, #b8b1a3 8px 16px)`,
                          borderRadius: 14, border: '1px solid rgba(0,0,0,0.08)',
                          display: 'flex', alignItems: 'center', justifyContent: 'center',
                        }}>
                          <span className="mono" style={{ fontSize: 9, color: '#3a342a' }}>📷 photo</span>
                        </div>
                        <div className="mono" style={{ fontSize: 9, color: 'var(--muted)', marginTop: 3 }}>{e.label}</div>
                      </div>
                    );
                  }
                  const out = e.kind === 'sms-out';
                  return (
                    <div key={i} style={{
                      alignSelf: out ? 'flex-end' : 'flex-start',
                      maxWidth: '85%', padding: '8px 12px',
                      background: out ? 'var(--ember)' : '#fff',
                      color: out ? 'var(--bg)' : 'var(--ink)',
                      border: !out ? '1px solid rgba(0,0,0,0.08)' : 'none',
                      borderRadius: out ? '14px 14px 4px 14px' : '14px 14px 14px 4px',
                      fontSize: 12, lineHeight: 1.4, animation: 'bubbleIn .4s ease',
                    }}>{e.text}</div>
                  );
                })}
              </div>
              <style>{`@keyframes typingDot { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }`}</style>
            </PhoneFrame>
          </div>

          <div style={{ order: 2 }}>
            <div className="eyebrow"><span className="dot"></span> Scene 02 · photos by SMS</div>
            <h2 className="serif" style={{ fontSize: 'clamp(48px, 6.5vw, 96px)', lineHeight: 0.95, letterSpacing: '-0.03em', margin: '20px 0 0', fontWeight: 400 }}>
              Estimators show up<br/><span className="ital" style={{ color: 'var(--ember)' }}>knowing what they’ll see.</span>
            </h2>
            <div className="mono" style={{ marginTop: 40, fontSize: 12, color: 'var(--muted)', letterSpacing: '0.12em' }}>
              <div style={{ display: 'flex', justifyContent: 'space-between', maxWidth: 360 }}>
                <span>▸ SMS THREAD</span>
                <span>{Math.round(progress * 100).toString().padStart(2, '0')}%</span>
              </div>
              <div style={{ height: 1, background: 'var(--line)', marginTop: 8, position: 'relative', maxWidth: 360 }}>
                <div style={{ position: 'absolute', inset: 0, background: 'var(--ember)', transform: `scaleX(${progress})`, transformOrigin: 'left' }}></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

window.PinnedScene = PinnedScene;
window.SMSScene = SMSScene;