/* Systemiz site — Phone Demo (animated voice → task loop) */

function PhoneDemo() {
  // Internal chat phases (0–5):
  //   0 = idle
  //   1 = voice waveform bubble
  //   2 = + transcript text
  //   3 = + Claude typing dots
  //   4 = typing replaced by Claude reply
  //   5 = + Notion task card
  // The 3-step side list / logo callouts derive from phase:
  //   phase 1–3 → step 1   (voice)
  //   phase 4   → step 2   (Claude)
  //   phase 5   → step 3   (Notion)
  // Clicking step N jumps to its terminal phase (1→2, 2→4, 3→5).
  const [phase, setPhase] = React.useState(0);
  const stageRef = React.useRef(null);
  const timersRef = React.useRef([]);
  const autoplayedRef = React.useRef(false);

  const clearTimers = () => {
    timersRef.current.forEach(clearTimeout);
    timersRef.current = [];
  };

  // Start auto-play exactly once when scrolled into view.
  // Evenly spaced 1.8s gaps between each of the 5 phases.
  React.useEffect(() => {
    const el = stageRef.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting && !autoplayedRef.current) {
          autoplayedRef.current = true;
          io.disconnect();
          const start = 600;
          const gap = 1500;
          // Phase 1→2 (voice bubble → transcript) is a tight 900ms;
          // everything after keeps the 1.5s spacing.
          const offsets = [0, 900, 900 + gap, 900 + gap * 2, 900 + gap * 3];
          const t = timersRef.current;
          offsets.forEach((off, i) => {
            t.push(setTimeout(() => setPhase(i + 1), start + off));
          });
        }
      });
    }, { threshold: 0.35 });
    io.observe(el);
    return () => {io.disconnect();clearTimers();};
  }, []);

  // Step click → terminal phase for that step.
  // Step 1 = voice transcript (phase 2), Step 2 = Claude reply visible (phase 4),
  // Step 3 = Notion task card (phase 5).
  const stepToPhase = [2, 4, 5];
  const jumpTo = (stepIdx /* 1-based */) => {
    clearTimers();
    autoplayedRef.current = true;
    setPhase(stepToPhase[stepIdx - 1]);
  };

  const steps = [
  { ttl: "Send a voice note", desc: "New task or idea on the go? Just drop Claude a voice note. ", icon: "mic" },
  { ttl: "Claude understands", desc: "It already knows your business, your clients, your team, etc.", icon: "brain-circuit" },
  { ttl: "Task lands in Notion", desc: "Automatically create the right tasks & projects with the correct properties.", icon: "check-circle-2" }];


  // Map phase → viewStep (1, 2, or 3) for callouts + active-pill highlight.
  // Phase 3 is the typing animation — sync the Claude logo callout with it.
  const viewStep = phase === 0 ? 0 : phase >= 5 ? 3 : phase >= 3 ? 2 : 1;
  const activeStep = viewStep - 1;

  return (
    <section className="phone-section section" id="demo" data-screen-label="04 Phone Demo">
      <div className="shell">
        <div className="section-head reveal" style={{ marginBottom: 80 }}>
          <span className="eyebrow">BY DAY 30</span>
          <h2>Run your business <span className="accent">from your phone.</span></h2>
          <p className="lede">Voice note in, structured task out. Claude does the reasoning
based on the business context organized inside Notion.
          </p>
        </div>
        <div className="phone-stage reveal" ref={stageRef}>
          <div className="phone-side">
            <h3>Just talk. <strong>Claude does the rest.</strong></h3>
            <p className="lede">Never context-engineer or re-explain anything to Claude ever again. Claude operates inside your systems and reads your Company Brain on every query.

            </p>
            <ul className="phone-step-list">
              {steps.map((stp, i) =>
              <li
                className={`phone-step ${activeStep === i ? 'active' : ''}`}
                key={i}
                role="button"
                tabIndex={0}
                onClick={() => jumpTo(i + 1)}
                onKeyDown={(e) => {if (e.key === 'Enter' || e.key === ' ') {e.preventDefault();jumpTo(i + 1);}}}>
                
                  <span className="pill">{i + 1}</span>
                  <div>
                    <div className="ttl">{stp.ttl}</div>
                    <div className="desc">{stp.desc}</div>
                  </div>
                </li>
              )}
            </ul>
          </div>

          <div className="phone-stack">
            <Phone phase={phase} />
            <div className={`phone-callout left ${viewStep >= 1 ? 'in' : ''}`}>
              <span className="phone-callout-ic phone-callout-ic-voice" aria-label="Voice memo">
                <svg viewBox="0 0 36 36" width="36" height="36" aria-hidden="true">
                  <g fill="#ee5266" stroke="none">
                    <rect x="2" y="15" width="1.5" height="6" rx="0.75" />
                    <rect x="5" y="11" width="1.5" height="14" rx="0.75" />
                    <rect x="8" y="7" width="1.5" height="22" rx="0.75" />
                    <rect x="11" y="4" width="1.5" height="28" rx="0.75" />
                    <rect x="14" y="9" width="1.5" height="18" rx="0.75" />
                  </g>
                  <line x1="18" y1="5" x2="18" y2="31" stroke="#2f8df0" strokeWidth="1.2" strokeLinecap="round" />
                  <circle cx="18" cy="5" r="1.6" fill="#2f8df0" />
                  <circle cx="18" cy="31" r="1.6" fill="#2f8df0" />
                  <g fill="#ffffff" stroke="none">
                    <rect x="21" y="14" width="1.2" height="8" rx="0.6" />
                    <rect x="23.5" y="12" width="1.2" height="12" rx="0.6" />
                    <rect x="26" y="15" width="1.2" height="6" rx="0.6" />
                    <rect x="28.5" y="13" width="1.2" height="10" rx="0.6" />
                    <rect x="31" y="16" width="1.2" height="4" rx="0.6" />
                    <rect x="33.5" y="15" width="1.2" height="6" rx="0.6" />
                  </g>
                </svg>
              </span>
            </div>
            <div className={`phone-callout right ${viewStep >= 2 ? 'in' : ''}`}>
              <img src="assets/claude-logo.svg" alt="Claude" className="phone-callout-ic phone-callout-ic-claude" />
            </div>
            <div className={`phone-callout left2 ${viewStep >= 3 ? 'in' : ''}`}>
              <img src="assets/notion-logo-white-cropped.png" alt="Notion" className="phone-callout-ic phone-callout-ic-notion" />
            </div>
            <div className="phone-step-hint">
              <i data-lucide="mouse-pointer-click"></i>
              <span>Click through the steps</span>
            </div>
          </div>

          <div className="phone-side right">
            <h3>Trained on <strong>your context.</strong></h3>
            <p className="lede"><span style={{ color: "rgb(255, 255, 255)" }}>Our step-by-step Context Extraction process will help you get all your business context, knowledge and experience out of your head, so Claude knows your business better than you and can help you grow.</span>

            </p>
            <ul className="feature-list">
              <li><span className="ic"><i data-lucide="file-text"></i></span><span><strong style={{ color: 'var(--fg-1)' }}>CLAUDE.md: </strong>the instructions and operating manual Claude reads on every prompt.</span></li>
              <li><span className="ic"><i data-lucide="layers"></i></span><span><strong style={{ color: 'var(--fg-1)' }}>MCP</strong> connections to Notion, Gmail, Drive, Shopify, Slack, Stripe, etc.</span></li>
              <li><span className="ic"><i data-lucide="cpu"></i></span><span><strong style={{ color: 'var(--fg-1)' }}>Claude Code</strong> & Dispatch setup and running.</span></li>
              <li><span className="ic"><i data-lucide="zap"></i></span><span><strong style={{ color: 'var(--fg-1)' }}>3 to 5 automations</strong> from your real data sources.</span></li>
              <li><span className="ic"><i data-lucide="message-circle"></i></span><span><strong style={{ color: 'var(--fg-1)' }}>Skills</strong> tailored to you, such as daily briefs, weekly reviews, meeting prep, etc.</span></li>
              <li><span className="ic"><i data-lucide="lock"></i></span><span><strong style={{ color: 'var(--fg-1)' }}>Your data</strong> stays in your Notion. We don't host it.</span></li>
            </ul>
          </div>
        </div>
      </div>
    </section>);

}

function Phone({ phase }) {
  // phase: 0 idle | 1 voice bubble | 2 + transcript | 3 + typing | 4 + reply (typing gone) | 5 + task
  const showVoice = phase >= 1;
  const showTranscript = phase >= 2;
  const showTyping = phase === 3;
  const showReply = phase >= 4;
  const showTask = phase >= 5;

  return (
    <div className="phone">
      <div className="phone-screen">
        <div className="phone-notch"></div>
        <div className="phone-statusbar">
          <span>11:11</span>
          <span className="icons">
            <i data-lucide="signal"></i>
            <i data-lucide="wifi"></i>
            <i data-lucide="battery-full"></i>
          </span>
        </div>
        <div className="phone-app-bar">
          <div className="avatar">
            <img src="assets/claude-logo.svg" alt="Claude" />
          </div>
          <div>
            <div className="name">Claude</div>
            <div className="status">Connected to Notion</div>
          </div>
        </div>
        <div className="phone-chat">
          {showVoice &&
          <div className="bubble user voice">
              <div className="voice-wave">
                <span></span><span></span><span></span><span></span>
                <span></span><span></span><span></span><span></span>
              </div>
              <span className="voice-meta">0:14</span>
            </div>
          }
          {showTranscript &&
          <div className="bubble user" style={{ animationDelay: '0.3s', maxWidth: '95%', fontSize: 11.5, opacity: 0.9 }}>
              <em style={{ fontStyle: 'normal' }}>"Just got off a call with Marcus from Atlas Studios. They want the full package. Follow up Thursday and mention the Acme Inc case study. Add it to the pipeline as 'verbal yes'."</em>
            </div>
          }
          {showTyping &&
          <div className="bubble claude" style={{ animationDelay: '0.1s' }}>
              <div className="typing"><span></span><span></span><span></span></div>
            </div>
          }
          {showReply &&
          <div className="bubble claude" style={{ animationDelay: '0.1s' }}>Got it. Updated Atlas Studios to Verbal Yes, scheduled the follow-up, and pulled the Acme Inc case study into your meeting prep.

          </div>
          }
          {showTask &&
          <div className="task-card" style={{ animationDelay: '0.2s' }}>
              <div className="row">
                <div className="check"></div>
                <div className="ttl">Follow up with Marcus · Atlas Studios</div>
              </div>
              <div className="meta">
                <span className="chip proj">Pipeline</span>
                <span className="chip pri">High</span>
                <span className="chip due">Thu, May 1</span>
              </div>
              <div className="footer-mini">
                <span className="src"><i data-lucide="database" style={{ width: 11, height: 11 }}></i> Notion · CRM</span>
                <span className="ok">✓ Synced</span>
              </div>
              <a className="task-open" href="#" onClick={(e) => e.preventDefault()}>
                <span>Open in Notion</span>
                <i data-lucide="arrow-up-right"></i>
              </a>
            </div>
          }
        </div>
      </div>
    </div>);

}

Object.assign(window, { PhoneDemo, Phone });