/* Courted landing — product mockups */
const { useState, useEffect, useRef } = React;

// —— MATCH CARD MOCKUP (step 1) ——
function MatchCardMock() {
  const [flip, setFlip] = useState(false);
  useEffect(() => {
    const t = setInterval(() => setFlip(f => !f), 3800);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="mock-match">
      <div className="mock-head">
        <span className="mock-tag">TODAY'S MATCH</span>
        <span className="mock-dot" />
      </div>
      <div className="mock-photo">
        <div className="mock-photo-inner">
          <div className="photo-stripe" />
          <div className="photo-label">
            Maya, 29
            <span className="photo-verified" title="ID verified">
              <svg width="9" height="9" viewBox="0 0 12 12" fill="none" aria-hidden="true">
                <path d="M6 1L2 2.5V6c0 2.2 1.7 4 4 5 2.3-1 4-2.8 4-5V2.5L6 1z" stroke="currentColor" strokeWidth="1.1" fill="none"/>
                <path d="M4.2 6l1.3 1.3L8 4.8" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </span>
          </div>
          <div className="photo-sub">Cartographer · East Austin</div>
        </div>
      </div>
      <div className="mock-reason">
        <span className="reason-tag">WHY</span>
        You both light up over <em>vinyl crate-digging</em> and <em>indie bookstores</em>. Similar communication styles, conflict resolution, and long-term goals.
      </div>
      <div className="mock-actions">
        <button className={`btn-pass ${flip ? '' : 'active'}`}>Pass</button>
        <button className={`btn-approve ${flip ? 'active' : ''}`}>Match →</button>
      </div>
    </div>
  );
}

// —— DATE PLAN CARD (step 2) ——
function DatePlanMock() {
  const [sel, setSel] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setSel(s => (s + 1) % 4), 2000);
    return () => clearInterval(t);
  }, []);
  const options = [
    { name: 'Hillside Hike + Coffee', time: 'Sat · 10:00 AM', deal: 'First coffee on us' },
    { name: 'Wine Flight at Halcyon', time: 'Fri · 7:30 PM', deal: 'Free starter flight' },
    { name: 'Night Market Stroll', time: 'Sat · 8:00 PM', deal: null },
    { name: 'Video Date', time: 'Thu · 8:00 PM', deal: null, video: true },
  ];
  return (
    <div className="mock-plan">
      <div className="mock-head">
        <span className="mock-tag">DATE OPTIONS</span>
        <span className="mock-mono">4 PICKS</span>
      </div>
      {options.map((o, i) => (
        <div key={i} className={`plan-row ${sel === i ? 'sel' : ''} ${o.video ? 'video' : ''}`}>
          <div className="plan-check">{sel === i ? '✓' : ''}</div>
          <div className="plan-body">
            <div className="plan-name">
              {o.video && (
                <svg className="plan-video-ico" width="11" height="11" viewBox="0 0 16 16" fill="none" aria-hidden="true">
                  <rect x="1" y="3.5" width="10" height="9" rx="1.5" stroke="currentColor" strokeWidth="1.3"/>
                  <path d="M11 7l4-2v6l-4-2z" stroke="currentColor" strokeWidth="1.3" strokeLinejoin="round"/>
                </svg>
              )}
              {o.name}
            </div>
            <div className="plan-time">{o.time}</div>
            {o.deal && <div className="plan-deal">● {o.deal}</div>}
          </div>
        </div>
      ))}
      <div className="plan-foot">
        <span>Spend 1 first date token</span>
        <span className="token">🪙</span>
      </div>
    </div>
  );
}

// —— SAFETY / ICE-BREAKER (step 3) ——
function SafetyMock() {
  const prompts = [
    "You both love books. What's on your Goodreads today?",
    "Jordan loves to travel. Favorite destination so far?",
    "Maya runs vinyl nights. What's on the turntable now?",
    "You both grew up on indie films. A scene you can't shake?",
  ];
  const [idx, setIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setIdx(i => (i + 1) % prompts.length), 3200);
    return () => clearInterval(t);
  }, []);
  return (
    <div className="mock-safety">
      <div className="mock-head">
        <span className="mock-tag">ON YOUR DATE</span>
        <span className="mock-mono">CARD {idx + 1}/24</span>
      </div>
      <div className="verified-row">
        <span className="verified-badge">
          <svg width="9" height="9" viewBox="0 0 12 12" fill="none" aria-hidden="true">
            <path d="M6 1L2 2.5V6c0 2.2 1.7 4 4 5 2.3-1 4-2.8 4-5V2.5L6 1z" stroke="currentColor" strokeWidth="1" fill="none"/>
            <path d="M4.2 6l1.3 1.3L8 4.8" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round"/>
          </svg>
          Maya's ID verified
        </span>
      </div>
      <div className="prompt-deck">
        {prompts.map((p, i) => {
          const offset = (i - idx + prompts.length) % prompts.length;
          return (
            <div
              key={i}
              className={`prompt-card pos-${offset}`}
              style={{ zIndex: prompts.length - offset }}>
              <div className="prompt-label">PERSONALIZED FOR YOU</div>
              <div className="prompt-text">{p}</div>
            </div>
          );
        })}
      </div>
      <div className="safety-row">
        <span className="safety-ico">↗</span>
        <span>Location shared with Jordan</span>
      </div>
      <div className="sos-btn">
        <span className="sos-ico">!</span>
        <span className="sos-text">Emergency</span>
      </div>
    </div>
  );
}

// —— COUPLES SECTION (step 4) ——
function CouplesMock() {
  return (
    <div className="mock-couples">
      <div className="mock-head">
        <span className="mock-tag">MAYA & YOU · DAY 12</span>
      </div>
      <div className="couples-msg msg-them">
        Weekend plans?
      </div>
      <div className="couples-msg msg-me">
        Nothing locked in yet
      </div>
      <div className="couples-msg msg-them">
        ATX road trip? 🚙
      </div>
      <div className="ai-prompt">
        <div className="ai-head">
          <span className="ai-label">AI COMPANION</span>
        </div>
        <div className="ai-body">
          You both love outdoor dinners. <strong>Barton Springs + Michelin star tacos</strong> are open in Austin this weekend.
        </div>
        <div className="ai-actions">
          <span className="ai-btn">Plan trip</span>
          <span className="ai-btn ghost">Next →</span>
        </div>
      </div>
    </div>
  );
}

// —— THEM / US ROW ——
function ComparisonRow({ them, us, detail, idx, open, onToggle }) {
  return (
    <div className={`compare-row-wrap ${open ? 'open' : ''}`}>
      <div className={`compare-row ${open ? 'open' : ''}`} onClick={onToggle}>
        <div className="compare-cell them">
          <span className="badge badge-them" aria-hidden="true">
            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3.5 3.5 L10.5 10.5 M10.5 3.5 L3.5 10.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round"/></svg>
          </span>
          <span className="mobile-label mobile-label-them">Typical dating apps:</span>
          <span className="glyph">✕</span>
          <span className="text">{them}</span>
          <span className="expand-icon-them">⌄</span>
        </div>
        <div className="compare-cell us">
          <span className="badge badge-us" aria-hidden="true">
            <svg width="14" height="14" viewBox="0 0 14 14"><path d="M3 7.5 L6 10.5 L11 4.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" fill="none"/></svg>
          </span>
          <span className="mobile-label mobile-label-us">CourtMe.ai:</span>
          <span className="glyph">✓</span>
          <span className="text">{us}</span>
        </div>
        <span className="expand-icon">⌄</span>
      </div>
      <div className={`compare-detail ${open ? 'open' : ''}`}>
        <div className="compare-detail-inner">
          <div className="tag-mono">0{idx + 1} / How we fixed it</div>
          <p>{detail}</p>
        </div>
      </div>
    </div>
  );
}

// —— VOICE CHAT (step 0) ——
const VOICE_LINES = [
  { tag: "ON A GOOD DAY",        quote: "\u201CUp early for a run, then coffee at Blacksmith.\u201D" },
  { tag: "WHAT I'M LOOKING FOR", quote: "\u201CSomeone adventurous, that loves to travel!\u201D" },
  { tag: "LAST GREAT DATE",      quote: "\u201CA bookstore, then dumplings. Talked until closing.\u201D" },
  { tag: "DEALBREAKERS",         quote: "\u201CBe kind to waiters. Rest we can figure out.\u201D" },
  { tag: "WHY I'M HERE",         quote: "\u201COne real conversation beats fifty dead matches.\u201D" },
];

function VoiceChatMock() {
  const [tick, setTick] = useState(0);
  const [lineIdx, setLineIdx] = useState(0);
  useEffect(() => {
    const t = setInterval(() => setTick(x => x + 1), 140);
    return () => clearInterval(t);
  }, []);
  useEffect(() => {
    const t = setInterval(() => setLineIdx(i => (i + 1) % VOICE_LINES.length), 3400);
    return () => clearInterval(t);
  }, []);
  const bars = Array.from({ length: 18 }, (_, i) => {
    const phase = (tick * 0.35) + i * 0.55;
    const h = 20 + Math.abs(Math.sin(phase)) * 60;
    return h;
  });
  return (
    <div className="mock-voice">
      <div className="voice-header">
        <span className="voice-label">
          <svg className="voice-mic" width="10" height="12" viewBox="0 0 10 12" aria-hidden="true">
            <rect x="3" y="0.75" width="4" height="6.5" rx="2" fill="currentColor"/>
            <path d="M1.25 6.25 V7 a3.75 3.75 0 0 0 7.5 0 V6.25" fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="round"/>
            <line x1="5" y1="10.25" x2="5" y2="11.5" stroke="currentColor" strokeWidth="1" strokeLinecap="round"/>
          </svg>
          LET'S CHAT
        </span>
        <div className="voice-bars">
          {bars.map((h, i) => (
            <span key={i} className="voice-bar" style={{ height: h + '%' }} />
          ))}
        </div>
      </div>
      <div className="voice-meta-stage">
        {VOICE_LINES.map((l, i) => (
          <div key={i} className={`voice-meta ${i === lineIdx ? 'is-active' : ''}`}>
            {l.tag}
          </div>
        ))}
      </div>
      <div className="voice-quote-stage">
        {VOICE_LINES.map((l, i) => (
          <div
            key={i}
            className={`voice-quote ${i === lineIdx ? 'is-active' : ''}`}
          >
            {l.quote}
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  MatchCardMock, DatePlanMock, SafetyMock, CouplesMock, ComparisonRow, VoiceChatMock,
});