/* 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, 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 and into a system that Claude can use to help you grow and scale.</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)' }}>AI 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, invoice automation, 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 or have access to 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 });