// scenes-pro.jsx — Realtor/inspector/title pro pitch scenes

// ── Mini app screen: Partner Profile (used in Scene 3) ──────────────────────
function ScreenPartnerProfile({ filled = false }) {
  return (
    <div style={{ position: 'absolute', inset: 0, color: COLORS.text, padding: '14px 20px' }}>
      <div style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-0.02em' }}>Partner Profile</div>
      <div style={{ color: COLORS.textSec, fontSize: 13, lineHeight: 1.5, marginTop: 6 }}>
        Set up the simple profile homeowners see when you start a record for them.
      </div>
      <div style={{ background: COLORS.surface, borderRadius: 14, padding: 14, marginTop: 14 }}>
        <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 8 }}>Role</div>
        <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', marginBottom: 12 }}>
          {[['Realtor', true], ['Inspector', false], ['Title', false]].map(([l, a], i) => (
            <div key={i} style={{
              padding: '6px 14px', borderRadius: 999,
              background: a ? COLORS.primary : COLORS.surface2,
              color: a ? '#06222a' : COLORS.text,
              fontSize: 12, fontWeight: 700,
            }}>{l}</div>
          ))}
        </div>
        <Field label="Name" value={filled ? 'Blake Snider' : ''} placeholder="Your name" auto={filled} />
        <Field label="Company" value={filled ? 'Snider Realty' : ''} placeholder="Company" auto={filled} />
      </div>
    </div>
  );
}

// ── Scene 1: Hook ───────────────────────────────────────────────────────────
function PScene1Hook() {
  const { localTime } = useSprite();
  const t1 = clamp(localTime / 0.6, 0, 1);
  const t2 = clamp((localTime - 0.5) / 0.6, 0, 1);
  const t3 = clamp((localTime - 1.4) / 0.6, 0, 1);

  return (
    <div style={{ position: 'absolute', inset: 0, padding: '0 100px',
      display: 'flex', flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'center' }}>
      <div style={{
        color: COLORS.primary, fontSize: 14, fontWeight: 700, letterSpacing: '0.2em',
        textTransform: 'uppercase', marginBottom: 22,
        opacity: t1, transform: `translateY(${(1 - t1) * 12}px)`,
      }}>For Realtors · Inspectors · Title</div>
      <div style={{
        color: COLORS.text, fontSize: 76, fontWeight: 800,
        letterSpacing: '-0.025em', lineHeight: 1.0,
        opacity: t2, transform: `translateY(${(1 - t2) * 14}px)`,
      }}>
        The deal already has<br/>
        a hidden asset.
      </div>
      <div style={{
        color: COLORS.textSec, fontSize: 22, marginTop: 26, lineHeight: 1.45, maxWidth: 780,
        opacity: t3, transform: `translateY(${(1 - t3) * 8}px)`,
      }}>
        Help your client document their home over time — and hand the buyer a Home Transfer Report at closing.
      </div>
    </div>
  );
}

// ── Scene 2: Friction at closing ────────────────────────────────────────────
function PScene2Friction() {
  const { localTime } = useSprite();
  const lines = [
    { t: 0.6, who: 'Buyer',     text: '"What size is the HVAC filter?"' },
    { t: 1.7, who: 'Buyer',     text: '"Where\'s the water heater warranty?"' },
    { t: 2.8, who: 'Inspector', text: '"Last service date on the AC?"' },
    { t: 3.9, who: 'Title',     text: '"Disclosure missing serial numbers."' },
    { t: 5.0, who: 'Seller',    text: '"It\'s in a drawer somewhere."' },
  ];
  const headT = clamp(localTime / 0.6, 0, 1);
  const headOut = clamp((localTime - 11.5) / 0.5, 0, 1);
  return (
    <>
      <div style={{
        position: 'absolute', left: 100, top: 100, width: 480,
        opacity: headT * (1 - headOut), transform: `translateY(${(1 - headT) * 12}px)`,
      }}>
        <div style={{ color: COLORS.warning, fontSize: 13, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 16 }}>
          The closing scramble
        </div>
        <div style={{ color: COLORS.text, fontSize: 50, fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.05 }}>
          Disclosure shouldn't be a treasure hunt.
        </div>
        <div style={{ color: COLORS.textSec, fontSize: 17, marginTop: 18, lineHeight: 1.5 }}>
          Last-minute serial numbers, warranties, repair receipts — chasing them adds days and risk to every deal.
        </div>
      </div>

      <div style={{ position: 'absolute', right: 80, top: 110, width: 480 }}>
        {lines.map((l, i) => {
          const t = clamp((localTime - l.t) / 0.5, 0, 1);
          if (t <= 0) return null;
          const e = Easing.easeOutBack(t);
          return (
            <div key={i} style={{
              background: COLORS.surface,
              border: `1px solid ${COLORS.border}`,
              borderRadius: 18,
              padding: '12px 18px',
              marginBottom: 10,
              opacity: t,
              transform: `translateX(${(1 - e) * 30}px)`,
              boxShadow: '0 6px 20px rgba(0,0,0,0.3)',
            }}>
              <div style={{ color: COLORS.warning, fontSize: 10, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', marginBottom: 3 }}>{l.who}</div>
              <div style={{ color: COLORS.text, fontSize: 17, fontWeight: 500 }}>{l.text}</div>
            </div>
          );
        })}
      </div>
    </>
  );
}

// ── Scene 3: Introduce HomeMind early ───────────────────────────────────────
function PScene3Intro() {
  const { localTime } = useSprite();
  const filled = localTime > 2.5;
  const headT = clamp(localTime / 0.6, 0, 1);
  const headOut = clamp((localTime - 11.5) / 0.5, 0, 1);
  return (
    <>
      <div style={{
        position: 'absolute', left: 80, top: 160, width: 540,
        opacity: headT * (1 - headOut), transform: `translateY(${(1 - headT) * 12}px)`,
      }}>
        <div style={{ color: COLORS.primary, fontSize: 13, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 16 }}>
          The fix · introduce at listing
        </div>
        <div style={{ color: COLORS.text, fontSize: 48, fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.05 }}>
          Set up a starter record. Hand it to your client.
        </div>
        <div style={{ color: COLORS.textSec, fontSize: 17, marginTop: 18, lineHeight: 1.5 }}>
          Two minutes at listing or inspection. Your client picks it up from there — and the inventory builds itself over the next six months.
        </div>
        <div style={{ marginTop: 22, display: 'flex', gap: 10, flexWrap: 'wrap' }}>
          {['Realtor', 'Inspector', 'Title', 'Contractor'].map((r, i) => (
            <div key={r} style={{
              padding: '8px 16px', borderRadius: 999,
              background: COLORS.primaryDim, color: COLORS.primary,
              fontSize: 13, fontWeight: 700,
              opacity: clamp((localTime - 1.2 - i * 0.15) / 0.4, 0, 1),
            }}>{r}</div>
          ))}
        </div>
      </div>
      <Phone x={920} y={395}>
        <ScreenPartnerProfile filled={filled} />
      </Phone>
    </>
  );
}

// ── Scene 4: Inventory builds over time ─────────────────────────────────────
function PScene4Inventory() {
  const { localTime } = useSprite();
  const months = ['Listing', 'Month 1', 'Month 3', 'Month 6'];
  const counts = [1, 7, 18, 32];
  const stage = (() => {
    if (localTime < 1.5) return 0;
    if (localTime < 3.5) return 1;
    if (localTime < 6.0) return 2;
    return 3;
  })();
  const headT = clamp(localTime / 0.6, 0, 1);
  const headOut = clamp((localTime - 11.5) / 0.5, 0, 1);

  return (
    <>
      <div style={{
        position: 'absolute', left: 80, top: 100, width: 540,
        opacity: headT * (1 - headOut), transform: `translateY(${(1 - headT) * 12}px)`,
      }}>
        <div style={{ color: COLORS.primary, fontSize: 13, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 16 }}>
          What your client does
        </div>
        <div style={{ color: COLORS.text, fontSize: 48, fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.05 }}>
          Snap. Save. Search.
        </div>
        <div style={{ color: COLORS.textSec, fontSize: 17, marginTop: 18, lineHeight: 1.5 }}>
          Appliances, warranties, paint colors, repair receipts — organized by room, automatically.
        </div>

        {/* Timeline */}
        <div style={{ marginTop: 36 }}>
          <div style={{ display: 'flex', gap: 12, marginBottom: 14 }}>
            {months.map((m, i) => (
              <div key={m} style={{
                flex: 1, height: 4, borderRadius: 2,
                background: i <= stage ? COLORS.primary : COLORS.border,
                transition: 'background 400ms',
              }} />
            ))}
          </div>
          <div style={{ display: 'flex', gap: 12 }}>
            {months.map((m, i) => (
              <div key={m} style={{
                flex: 1, fontSize: 12, fontWeight: 700,
                color: i === stage ? COLORS.primary : (i < stage ? COLORS.text : COLORS.textMuted),
              }}>{m}</div>
            ))}
          </div>
          <div style={{ marginTop: 20, fontSize: 17, color: COLORS.textSec }}>
            <span style={{ color: COLORS.text, fontWeight: 700, fontSize: 36, fontVariantNumeric: 'tabular-nums' }}>
              {counts[stage]}
            </span>
            <span style={{ marginLeft: 10 }}>records saved</span>
          </div>
        </div>
      </div>

      <Phone x={920} y={395}>
        <PInventoryScreen stage={stage} localTime={localTime} />
      </Phone>
    </>
  );
}

function PInventoryScreen({ stage, localTime }) {
  const allRooms = [
    { name: 'Garage',       icon: '🔧' },
    { name: 'Kitchen',      icon: '🍳' },
    { name: 'Living Room',  icon: '🛋' },
    { name: 'Utility Room', icon: '⚡' },
    { name: 'Primary Bath', icon: '🚿' },
    { name: 'Outdoor',      icon: '🌳' },
  ];
  const roomCounts = [
    [1, 0, 0, 0, 0, 0],
    [3, 2, 1, 1, 0, 0],
    [5, 5, 3, 3, 1, 1],
    [7, 8, 5, 6, 3, 3],
  ];
  return (
    <div style={{ position: 'absolute', inset: 0, color: COLORS.text }}>
      <div style={{ padding: '12px 20px 0' }}>
        <div style={{ fontSize: 28, fontWeight: 800, letterSpacing: '-0.02em', marginBottom: 14 }}>Home Memory</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
          {allRooms.map((r, i) => {
            const count = roomCounts[stage][i];
            return (
              <div key={r.name} style={{
                background: COLORS.surface,
                border: count > 0 && stage > 0 ? `1px solid ${COLORS.primaryDim}` : '1px solid transparent',
                borderRadius: 12, padding: 10,
                opacity: count > 0 ? 1 : 0.4,
                transition: 'opacity 400ms, border 400ms',
              }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
                  <div style={{
                    width: 24, height: 24, borderRadius: 6,
                    background: COLORS.primaryDim, color: COLORS.primary,
                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                    fontSize: 12,
                  }}>{r.icon}</div>
                  <div style={{ fontSize: 12, fontWeight: 700 }}>{r.name}</div>
                </div>
                <div style={{ color: COLORS.textSec, fontSize: 11 }}>
                  {count > 0 ? `${count} ${count === 1 ? 'record' : 'records'}` : '—'}
                </div>
              </div>
            );
          })}
        </div>
      </div>
      <TabBar active="Browse" />
    </div>
  );
}

// ── Scene 5: Home Transfer Report at closing ────────────────────────────────
function PScene5Transfer() {
  const { localTime } = useSprite();
  const sections = [
    { t: 1.0, title: 'Home Summary',          rows: ['Oak Hill House · Austin, TX', '3 bed · 2 bath · Built 2008'] },
    { t: 2.0, title: 'Emergency Essentials',  rows: ['Main water shutoff', 'Breaker panel · utility closet'] },
    { t: 3.0, title: 'Appliances & Systems',  rows: ['Water heater — Rheem · 2021', 'HVAC — Carrier · serviced 03/26'] },
    { t: 4.0, title: 'Warranties on file',    rows: ['Washer · Dishwasher · Roof'] },
    { t: 5.0, title: 'Maintenance history',   rows: ['12 receipts · 4 repairs · paint colors'] },
  ];
  const headT = clamp(localTime / 0.6, 0, 1);
  const headOut = clamp((localTime - 14.5) / 0.5, 0, 1);

  // Handoff arrow / transfer animation 6.5+
  const transferT = clamp((localTime - 6.5) / 1.5, 0, 1);

  return (
    <>
      <div style={{
        position: 'absolute', left: 80, top: 100, width: 540,
        opacity: headT * (1 - headOut), transform: `translateY(${(1 - headT) * 12}px)`,
      }}>
        <div style={{
          display: 'inline-flex', alignItems: 'center', gap: 8,
          background: COLORS.primaryDim, color: COLORS.primary,
          padding: '6px 14px', borderRadius: 999,
          fontSize: 12, fontWeight: 700,
          letterSpacing: '0.12em', textTransform: 'uppercase',
          marginBottom: 18,
        }}>At closing</div>
        <div style={{ color: COLORS.text, fontSize: 48, fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.05 }}>
          The whole home, transferred to the buyer.
        </div>
        <div style={{ color: COLORS.textSec, fontSize: 17, marginTop: 18, lineHeight: 1.5 }}>
          One Home Transfer Report. Every system, warranty, and serial number — already documented, ready to hand off.
        </div>

        <div style={{ marginTop: 30, display: 'flex', alignItems: 'center', gap: 18, fontSize: 16 }}>
          <span style={{ color: COLORS.textSec }}>Seller</span>
          <div style={{
            flex: 1, height: 2, background: COLORS.border, position: 'relative',
            maxWidth: 200,
          }}>
            <div style={{
              position: 'absolute', left: 0, top: 0, height: 2,
              width: `${transferT * 100}%`,
              background: COLORS.primary,
            }} />
            <div style={{
              position: 'absolute', top: -6,
              left: `${transferT * 100}%`,
              transform: 'translateX(-50%)',
              width: 14, height: 14, borderRadius: 7,
              background: COLORS.primary,
              boxShadow: `0 0 16px ${COLORS.primary}`,
              opacity: transferT > 0 ? 1 : 0,
            }} />
          </div>
          <span style={{ color: transferT >= 1 ? COLORS.primary : COLORS.textSec, fontWeight: 700, transition: 'color 300ms' }}>Buyer</span>
        </div>
      </div>

      <Phone x={920} y={395}>
        <PacketScreen sections={sections} localTime={localTime} />
      </Phone>
    </>
  );
}

// ── Scene 6: Value props for the pro ────────────────────────────────────────
function PScene6Value() {
  const { localTime } = useSprite();
  const props = [
    { t: 0.4, title: 'Look proactive',        sub: 'Recommend it at listing — clients see you thinking ahead.' },
    { t: 1.4, title: 'Speed up disclosure',   sub: 'Serial numbers, warranties, dates — already documented.' },
    { t: 2.4, title: 'Differentiate',         sub: 'A tool buyers remember long after the sale.' },
    { t: 3.4, title: 'Build buyer confidence',sub: 'Documented homes close faster — and renegotiate less.' },
  ];
  const headT = clamp(localTime / 0.6, 0, 1);
  const headOut = clamp((localTime - 11.5) / 0.5, 0, 1);
  return (
    <>
      <div style={{
        position: 'absolute', left: 100, top: 90, right: 100,
        opacity: headT * (1 - headOut), transform: `translateY(${(1 - headT) * 12}px)`,
      }}>
        <div style={{ color: COLORS.primary, fontSize: 13, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 14 }}>
          What's in it for you
        </div>
        <div style={{ color: COLORS.text, fontSize: 52, fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.05 }}>
          A tool that makes you look thorough — without adding work.
        </div>
      </div>
      <div style={{
        position: 'absolute', left: 100, right: 100, top: 360,
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20,
      }}>
        {props.map((p, i) => {
          const t = clamp((localTime - p.t) / 0.5, 0, 1);
          const e = Easing.easeOutCubic(t);
          return (
            <div key={i} style={{
              background: COLORS.surface,
              border: `1px solid ${COLORS.border}`,
              borderRadius: 16, padding: 22,
              opacity: t, transform: `translateY(${(1 - e) * 16}px)`,
            }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 8 }}>
                <div style={{
                  width: 26, height: 26, borderRadius: 6,
                  background: COLORS.primary, color: '#0a1620',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  fontSize: 14, fontWeight: 800,
                }}>{i+1}</div>
                <div style={{ fontSize: 22, fontWeight: 800, color: COLORS.text, letterSpacing: '-0.01em' }}>{p.title}</div>
              </div>
              <div style={{ color: COLORS.textSec, fontSize: 15, lineHeight: 1.5 }}>{p.sub}</div>
            </div>
          );
        })}
      </div>
    </>
  );
}

// ── Scene 7: CTA ────────────────────────────────────────────────────────────
function PScene7CTA() {
  const { localTime } = useSprite();
  const t1 = clamp(localTime / 0.6, 0, 1);
  const t2 = clamp((localTime - 0.4) / 0.6, 0, 1);
  const t3 = clamp((localTime - 1.0) / 0.6, 0, 1);
  const t4 = clamp((localTime - 1.5) / 0.6, 0, 1);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      gap: 18, padding: '0 60px',
    }}>
      <div style={{
        opacity: t1, transform: `scale(${0.85 + 0.15 * Easing.easeOutBack(t1)})`,
        display: 'flex', alignItems: 'center', gap: 14,
      }}>
        <div style={{
          width: 56, height: 56, borderRadius: 14,
          background: COLORS.primary,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <svg width="32" height="32" viewBox="0 0 24 24" fill="none">
            <path d="M3 12l9-8 9 8M5 10v10h14V10" stroke="#0a1620" strokeWidth="2.4" strokeLinejoin="round"/>
          </svg>
        </div>
        <div style={{ fontSize: 56, fontWeight: 800, letterSpacing: '-0.025em', color: COLORS.text }}>
          HomeMind
        </div>
      </div>

      <div style={{
        color: COLORS.text, fontSize: 36, fontWeight: 700,
        opacity: t2, transform: `translateY(${(1 - t2) * 8}px)`,
        textAlign: 'center', marginTop: 14, letterSpacing: '-0.015em',
      }}>
        Become a HomeMind Partner.
      </div>
      <div style={{
        color: COLORS.textSec, fontSize: 19,
        opacity: t3, transform: `translateY(${(1 - t3) * 8}px)`,
        textAlign: 'center', maxWidth: 700, lineHeight: 1.45,
      }}>
        Free for licensed pros. Set up starter records, track handoffs, and give every client a Home Transfer Report at closing.
      </div>

      <div style={{
        marginTop: 18, display: 'flex', gap: 12,
        opacity: t4, transform: `translateY(${(1 - t4) * 8}px)`,
      }}>
        <div style={{
          background: COLORS.primary, color: '#0a1620',
          padding: '14px 28px', borderRadius: 999,
          fontSize: 16, fontWeight: 700,
          boxShadow: `0 12px 40px rgba(34, 211, 238, 0.3)`,
        }}>
          partners.homemind.app
        </div>
        <div style={{
          background: 'transparent', color: COLORS.text,
          padding: '14px 28px', borderRadius: 999,
          fontSize: 16, fontWeight: 600,
          border: `1px solid ${COLORS.border}`,
        }}>
          hello@homemind.app
        </div>
      </div>
    </div>
  );
}

Object.assign(window, {
  ScreenPartnerProfile,
  PScene1Hook, PScene2Friction, PScene3Intro, PScene4Inventory,
  PScene5Transfer, PScene6Value, PScene7CTA,
});
