// scenes-search.jsx — Search/Ask + Home Transfer scenes

// ── SCENE 5: ASK / SEARCH ───────────────────────────────────────────────────
function Scene5Ask() {
  const { localTime } = useSprite();

  // 0.0-0.6: phone slides in
  // 0.6-3.0: typing query
  // 3.0-4.0: thinking
  // 4.0-end: answer card appears

  const fullQuery = "What size HVAC filter do we use?";
  const typeStart = 0.6;
  const typeEnd = 2.6;
  const typed = (() => {
    if (localTime < typeStart) return '';
    const t = clamp((localTime - typeStart) / (typeEnd - typeStart), 0, 1);
    const len = Math.floor(t * fullQuery.length);
    return fullQuery.slice(0, len);
  })();
  const showCursor = localTime > typeStart && localTime < typeEnd + 0.3 && Math.floor(localTime * 2) % 2 === 0;
  const showAnswer = localTime > 3.2;
  const answerT = clamp((localTime - 3.2) / 0.6, 0, 1);

  // Caption
  const capT = clamp(localTime / 0.5, 0, 1);
  const capOut = clamp((localTime - 11.5) / 0.5, 0, 1);

  return (
    <>
      <div style={{
        position: 'absolute', right: 80, top: 200, width: 460,
        textAlign: 'right',
        opacity: capT * (1 - capOut),
        transform: `translateY(${(1 - capT) * 12}px)`,
      }}>
        <div style={{ color: COLORS.primary, fontSize: 13, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase', marginBottom: 16 }}>
          Step 3 · Find
        </div>
        <div style={{ color: COLORS.text, fontSize: 50, fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.05, textWrap: 'pretty' }}>
          Ask in plain English. Get the answer.
        </div>
        <div style={{ color: COLORS.textSec, fontSize: 17, marginTop: 20, lineHeight: 1.5, fontWeight: 400 }}>
          Filter sizes, serial numbers, warranty dates — searchable the moment you need them.
        </div>
      </div>

      <Phone x={440} y={395}>
        <ScreenAskAnimated typed={typed} showCursor={showCursor} showAnswer={showAnswer} answerT={answerT} />
      </Phone>
    </>
  );
}

function ScreenAskAnimated({ typed, showCursor, showAnswer, answerT }) {
  return (
    <div style={{ position: 'absolute', inset: 0, color: COLORS.text }}>
      <div style={{ padding: '14px 20px 0' }}>
        <div style={{ fontSize: 32, fontWeight: 800, letterSpacing: '-0.02em', marginBottom: 18 }}>Ask HomeMind</div>

        <div style={{
          background: COLORS.surface,
          borderRadius: 12,
          padding: '12px 14px',
          display: 'flex', alignItems: 'center', gap: 10,
          border: `1px solid ${typed ? COLORS.primary : 'transparent'}`,
        }}>
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none">
            <circle cx="11" cy="11" r="6" stroke={typed ? COLORS.primary : COLORS.textSec} strokeWidth="2"/>
            <path d="M16 16l4 4" stroke={typed ? COLORS.primary : COLORS.textSec} strokeWidth="2" strokeLinecap="round"/>
          </svg>
          <span style={{ color: typed ? COLORS.text : COLORS.textMuted, fontSize: 14 }}>
            {typed || 'Ask HomeMind about your ho…'}
            {showCursor && <span style={{ color: COLORS.primary }}>|</span>}
          </span>
        </div>

        {!showAnswer ? (
          <div style={{
            marginTop: 14,
            background: COLORS.surface,
            borderRadius: 14, padding: 18,
            textAlign: 'center',
          }}>
            <div style={{ fontSize: 17, fontWeight: 700, marginBottom: 8 }}>Ask HomeMind about your home</div>
            <div style={{ color: COLORS.textSec, fontSize: 13, lineHeight: 1.5 }}>
              Try: "When did we replace the water heater?" "Find the roof repair receipt."
            </div>
          </div>
        ) : (
          <div style={{
            marginTop: 14,
            opacity: answerT,
            transform: `translateY(${(1 - answerT) * 14}px)`,
          }}>
            <div style={{
              background: COLORS.surface,
              border: `1.5px solid ${COLORS.primary}`,
              borderRadius: 14,
              padding: 16,
            }}>
              <div style={{
                color: COLORS.primary, fontSize: 10, fontWeight: 700,
                letterSpacing: '0.12em', marginBottom: 10,
              }}>ANSWER</div>

              <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 12 }}>
                <div style={{
                  width: 56, height: 56, borderRadius: 8,
                  background: 'linear-gradient(180deg, #d8dde6 0%, #9aa3b3 100%)',
                  position: 'relative',
                  flexShrink: 0,
                }}>
                  <div style={{
                    position: 'absolute', inset: 6,
                    border: '2px solid #5b6577',
                    borderRadius: 4,
                  }} />
                </div>
                <div>
                  <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-0.01em', color: COLORS.text }}>16×20×1</div>
                  <div style={{ color: COLORS.textSec, fontSize: 12, marginTop: 2 }}>HVAC filter · Utility closet</div>
                </div>
              </div>

              <div style={{
                background: COLORS.surface2,
                borderRadius: 8, padding: '8px 12px',
                fontSize: 12, color: COLORS.textSec,
                lineHeight: 1.5,
              }}>
                <div>Replace every <span style={{ color: COLORS.text, fontWeight: 600 }}>90 days</span></div>
                <div>Last replaced <span style={{ color: COLORS.text, fontWeight: 600 }}>Mar 12, 2026</span></div>
                <div>Brand <span style={{ color: COLORS.text, fontWeight: 600 }}>Filtrete MPR 1500</span></div>
              </div>
            </div>

            <div style={{
              marginTop: 12, display: 'flex', gap: 8, flexWrap: 'wrap',
              opacity: clamp((answerT - 0.5) * 2, 0, 1),
            }}>
              {['Reorder', 'Set reminder', 'View receipt'].map(label => (
                <div key={label} style={{
                  background: COLORS.surface,
                  border: `1px solid ${COLORS.border}`,
                  color: COLORS.text,
                  padding: '8px 14px',
                  borderRadius: 999,
                  fontSize: 12, fontWeight: 600,
                }}>{label}</div>
              ))}
            </div>
          </div>
        )}
      </div>
      <TabBar active="Search" />
    </div>
  );
}

// ── SCENE 6: HOME TRANSFER REPORT (BONUS) ───────────────────────────────────
function Scene6Transfer() {
  const { localTime } = useSprite();

  // 0.0-0.6: bonus stamp + caption
  // 0.6-1.4: phone slides in (closed packet)
  // 1.4+: rows of the packet add themselves
  const sections = [
    { t: 1.5, title: 'Home Summary',          rows: ['Oak Hill House · Austin, TX', '3 bed · 2 bath · Built 2008', '12 saved records · 6 rooms'] },
    { t: 2.5, title: 'Emergency Essentials',  rows: ['Main water shutoff — garage', 'Breaker panel — utility closet', 'HVAC filter — 16×20×1'] },
    { t: 3.5, title: 'Key Appliances',        rows: ['Water heater — Rheem · 2021', 'Washer — LG WM4000 · warranty', 'Dishwasher — Bosch 500'] },
    { t: 4.5, title: 'Filters & Replacements',rows: ['HVAC — every 90 days', 'Fridge water — every 6 months', 'Range hood — every 12 months'] },
  ];

  const capT = clamp(localTime / 0.5, 0, 1);
  const capOut = clamp((localTime - 13.5) / 0.5, 0, 1);

  return (
    <>
      <div style={{
        position: 'absolute', left: 80, top: 180, width: 460,
        opacity: capT * (1 - capOut),
        transform: `translateY(${(1 - capT) * 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,
        }}>★ Bonus</div>
        <div style={{ color: COLORS.text, fontSize: 50, fontWeight: 800, letterSpacing: '-0.025em', lineHeight: 1.05, textWrap: 'pretty' }}>
          Selling? Hand the buyer your whole home.
        </div>
        <div style={{ color: COLORS.textSec, fontSize: 17, marginTop: 20, lineHeight: 1.5, fontWeight: 400 }}>
          One tap turns your records into a Home Transfer Report — every system, warranty, and serial number, ready at closing.
        </div>

        {/* Building counter */}
        <div style={{
          marginTop: 32,
          display: 'flex', alignItems: 'center', gap: 10,
          color: COLORS.accent, fontSize: 14, fontWeight: 600,
          opacity: clamp((localTime - 1.0) / 0.4, 0, 1) * (1 - capOut),
        }}>
          <div style={{
            width: 8, height: 8, borderRadius: 4,
            background: COLORS.accent,
            boxShadow: `0 0 12px ${COLORS.accent}`,
          }} />
          Building Home Packet…
          <span style={{ color: COLORS.text, fontVariantNumeric: 'tabular-nums' }}>
            {(() => {
              const sectionsBuilt = sections.filter(s => localTime > s.t).length;
              return `${sectionsBuilt}/${sections.length} sections`;
            })()}
          </span>
        </div>
      </div>

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

function PacketScreen({ sections, localTime }) {
  return (
    <div style={{ position: 'absolute', inset: 0, color: COLORS.text, overflow: 'hidden' }}>
      <div style={{ padding: '14px 20px 0' }}>
        <div style={{ color: COLORS.primary, fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', marginBottom: 8 }}>
          HOME PACKET
        </div>
        <div style={{ fontSize: 26, fontWeight: 800, letterSpacing: '-0.02em', lineHeight: 1.1, marginBottom: 14 }}>
          Oak Hill House
        </div>

        {sections.map((sec, i) => {
          const t = clamp((localTime - sec.t) / 0.5, 0, 1);
          if (t <= 0) return null;
          return (
            <div key={i} style={{
              background: COLORS.surface,
              borderRadius: 14,
              padding: 14,
              marginBottom: 10,
              opacity: t,
              transform: `translateY(${(1 - Easing.easeOutCubic(t)) * 16}px)`,
            }}>
              <div style={{ fontSize: 15, fontWeight: 800, marginBottom: 8 }}>{sec.title}</div>
              {sec.rows.map((r, j) => {
                const rowT = clamp((localTime - sec.t - 0.15 - j * 0.1) / 0.3, 0, 1);
                return (
                  <div key={j} style={{
                    display: 'flex', alignItems: 'flex-start', gap: 8,
                    marginBottom: 4,
                    opacity: rowT,
                    transform: `translateX(${(1 - rowT) * 8}px)`,
                  }}>
                    <span style={{
                      width: 5, height: 5, borderRadius: 3,
                      background: COLORS.primary, marginTop: 7, flexShrink: 0,
                    }} />
                    <span style={{ color: COLORS.textSec, fontSize: 12, lineHeight: 1.45 }}>{r}</span>
                  </div>
                );
              })}
            </div>
          );
        })}
      </div>
    </div>
  );
}

// ── SCENE 7: CLOSING ────────────────────────────────────────────────────────
function Scene7Close() {
  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);

  return (
    <div style={{
      position: 'absolute', inset: 0,
      display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
      gap: 18,
    }}>
      {/* Logo mark */}
      <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.textSec, fontSize: 24,
        opacity: t2,
        transform: `translateY(${(1 - t2) * 8}px)`,
        textAlign: 'center',
        fontWeight: 400,
      }}>
        Snap it once. <span style={{ color: COLORS.primary, fontWeight: 600 }}>Find it later.</span>
      </div>

      <div style={{
        marginTop: 14,
        background: COLORS.primary,
        color: '#0a1620',
        padding: '14px 28px',
        borderRadius: 999,
        fontSize: 16, fontWeight: 700,
        opacity: t3,
        transform: `translateY(${(1 - t3) * 8}px)`,
        boxShadow: `0 12px 40px rgba(34, 211, 238, 0.3)`,
      }}>
        Get HomeMind — free
      </div>

      <div style={{
        color: COLORS.textMuted, fontSize: 12,
        opacity: t3, marginTop: 4,
      }}>
        iOS · Android
      </div>
    </div>
  );
}

Object.assign(window, { Scene5Ask, Scene6Transfer, Scene7Close, ScreenAskAnimated, PacketScreen });