// Screens for Pepagent

const Icon = {
  recovery: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||20} height={p.size||20} fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M12 21s-7-4.5-7-10.5A4.5 4.5 0 0 1 12 6a4.5 4.5 0 0 1 7 4.5C19 16.5 12 21 12 21z" />
      <path d="M9 11l1.5 1.5L13 9.5l2 2" strokeLinecap="round" />
    </svg>
  ),
  sleep: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||20} height={p.size||20} fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M21 13.5A8.5 8.5 0 1 1 10.5 3a6.5 6.5 0 0 0 10.5 10.5z" />
    </svg>
  ),
  fat: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||20} height={p.size||20} fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M5 12c2-4 5-6 7-6s5 2 7 6c-2 4-5 6-7 6s-5-2-7-6z" />
      <path d="M12 8v8M9 12h6" strokeLinecap="round" />
    </svg>
  ),
  brain: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||20} height={p.size||20} fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M9 4a3 3 0 0 0-3 3v1a3 3 0 0 0-2 5 3 3 0 0 0 2 5v1a3 3 0 0 0 6 0V4a3 3 0 0 0-3-0zM15 4a3 3 0 0 1 3 3v1a3 3 0 0 1 2 5 3 3 0 0 1-2 5v1a3 3 0 0 1-6 0" />
    </svg>
  ),
  longevity: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||20} height={p.size||20} fill="none" stroke="currentColor" strokeWidth="1.4">
      <circle cx="12" cy="12" r="9" />
      <path d="M12 7v5l3 2" strokeLinecap="round" />
    </svg>
  ),
  strength: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||20} height={p.size||20} fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M3 11h2v2H3zM19 11h2v2h-2zM6 8h2v8H6zM16 8h2v8h-2zM8 11h8v2H8z" strokeLinejoin="round" />
    </svg>
  ),
  mic: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill="none" stroke="currentColor" strokeWidth="1.5">
      <rect x="9" y="3" width="6" height="12" rx="3" />
      <path d="M5 11a7 7 0 0 0 14 0M12 18v3M9 21h6" strokeLinecap="round" />
    </svg>
  ),
  send: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M4 12l16-8-6 16-2-7-8-1z" strokeLinejoin="round" />
    </svg>
  ),
  syringe: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M14 4l6 6M16 6l-9 9-3 4 4-3 9-9M11 11l3 3" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  drop: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||16} height={p.size||16} fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M12 3s6 7 6 11a6 6 0 0 1-12 0c0-4 6-11 6-11z" />
    </svg>
  ),
  arrow: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||14} height={p.size||14} fill="none" stroke="currentColor" strokeWidth="1.6">
      <path d="M5 12h14M13 6l6 6-6 6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  check: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||14} height={p.size||14} fill="none" stroke="currentColor" strokeWidth="2">
      <path d="M5 12l5 5L20 7" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  warn: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||14} height={p.size||14} fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M12 3l10 18H2L12 3z" />
      <path d="M12 10v5M12 17.5v.5" strokeLinecap="round" />
    </svg>
  ),
  pulse: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||14} height={p.size||14} fill="none" stroke="currentColor" strokeWidth="1.4">
      <path d="M3 12h4l2-5 4 10 2-5h6" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  ),
  camera: (p) => (
    <svg viewBox="0 0 24 24" width={p.size||18} height={p.size||18} fill="none" stroke="currentColor" strokeWidth="1.5">
      <path d="M4 8h3l2-3h6l2 3h3v11H4V8z" strokeLinejoin="round" />
      <circle cx="12" cy="13" r="3.5" />
    </svg>
  ),
};

// ─────────────────────────────────────────────────────────────────────────────
// LANDING / IDLE SCREEN
// ─────────────────────────────────────────────────────────────────────────────
function LandingScreen({ accent, onStart, onOpenVoice }) {
  const [time, setTime] = React.useState(new Date());
  React.useEffect(() => {
    const id = setInterval(() => setTime(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const hh = String(time.getHours()).padStart(2, '0');
  const mm = String(time.getMinutes()).padStart(2, '0');
  const date = time.toLocaleDateString('en-US', { weekday: 'long', month: 'long', day: 'numeric' }).toUpperCase();

  return (
    <div className="screen landing" data-screen-label="01 Landing">
      <div className="landing-hero">
      <div className="landing-top">
        <div className="brand">
          <div className="brand-mark">
            <span className="brand-dot" style={{ background: accent }} />
          </div>
          <div className="brand-text">
            <div className="brand-name">PEPAGENT</div>
            <div className="brand-sub">PEPTIDE INTELLIGENCE / v0.4.2</div>
          </div>
        </div>
        <div className="status-grid">
          <Telemetry label="STATUS" value="ONLINE" dot={accent} />
          <Telemetry label="LATENCY" value="42ms" />
          <Telemetry label="MODEL" value="PEP-3.1" />
        </div>
      </div>

      <div className="landing-center">
        <Orb size={420} intensity={0.35} color={accent} state="idle" />
        <div className="landing-ident">PEPAGENT</div>
        <div className="landing-time">
          <span className="landing-clock">{hh}:{mm}</span>
          <span className="landing-date">{date}</span>
        </div>
      </div>

      <div className="landing-bottom">
        <div style={{ display: 'flex', gap: 12 }}>
          <button className="cta" onClick={onStart} style={{ '--accent': accent }}>
            <span>BEGIN CONSULTATION</span>
            <Icon.arrow />
          </button>
          {onOpenVoice && (
            <button className="ghost" onClick={onOpenVoice} style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <Icon.mic /> TALK
            </button>
          )}
        </div>
        <div className="hint">Press <kbd>SPACE</kbd> or click to start · Voice & text supported</div>
      </div>

      <div className="scroll-cue">
        <span>SCROLL</span>
        <span className="scroll-cue-line" />
      </div>
      <Crosshairs />
      </div>
      <LandingMarketing accent={accent} onStart={onStart} onOpenVoice={onOpenVoice} />
    </div>
  );
}

function LandingMarketing({ accent, onStart, onOpenVoice }) {
  const [openFaq, setOpenFaq] = React.useState(0);
  const peptidesShown = ['BPC-157', 'CJC-1295', 'Ipamorelin', 'GHK-Cu', 'Tesamorelin', 'Semax'];
  const faqs = [
    { q: 'Is Pepagent a replacement for a doctor?', a: 'No. Pepagent is an educational tool that helps you understand peptide protocols, dosing principles, and stack synergies. Every recommendation it generates should be reviewed with a licensed clinician — especially for prescription compounds. We screen for common contraindications, but we are not a medical service.' },
    { q: 'How does the agent decide what to recommend?', a: 'Pepagent matches your stated goal against published mechanisms of action, half-lives, and dosing protocols from peptide research literature. It then weights candidates against your weight, age, and experience level — preferring conservative starting doses for novices and cycling protocols that preserve receptor sensitivity.' },
    { q: 'Can I talk to it instead of typing?', a: 'Yes. Tap the TALK button to enter voice mode. Pepagent listens through your browser, sends your question to its language model, and replies out loud. You can interrupt anytime by tapping the mic again.' },
    { q: 'Does Pepagent track my doses?', a: 'The dosing schedule lets you tap each scheduled injection or dose to log it as taken. We keep your data in your browser only — nothing leaves the device unless you export it. A Health connector is on the roadmap.' },
    { q: 'What about side effects and safety?', a: 'Every protocol page includes a contraindications panel and rotation guidance for injection sites. If you mention a condition, medication, or symptom in conversation, Pepagent flags relevant interactions before continuing. When in doubt, ask the agent — or your clinician.' },
  ];

  return (
    <div className="landing-content">
      <div className="section-eyebrow">// WHAT IT DOES</div>
      <h2 className="section-title">A peptide protocol designer that <em>actually listens</em>.</h2>
      <p className="section-lead">
        Tell Pepagent what you want to improve — recovery, sleep, body composition, focus, longevity — and it engineers a calibrated peptide stack with dosing, cycling, and stack synergies. Talk to it. It talks back.
      </p>

      <div style={{ height: 56 }} />

      <div className="feature-grid">
        <div className="feature-card">
          <span className="feature-num">01</span>
          <div className="feature-icon"><Icon.mic size={22} /></div>
          <h3 className="feature-name">Conversational AI</h3>
          <p className="feature-desc">Voice or text. Ask follow-ups, push back, get explanations. Pepagent replies in real time with citations to mechanism and dose rationale.</p>
        </div>
        <div className="feature-card">
          <span className="feature-num">02</span>
          <div className="feature-icon"><Icon.syringe size={22} /></div>
          <h3 className="feature-name">Personalized Stacks</h3>
          <p className="feature-desc">Doses scale with your weight and age. Cycles factor in your experience level. Stacks are screened for synergies and known interactions.</p>
        </div>
        <div className="feature-card">
          <span className="feature-num">03</span>
          <div className="feature-icon"><Icon.pulse size={22} /></div>
          <h3 className="feature-name">Dosing Calendar</h3>
          <p className="feature-desc">A weekly schedule mapped to your stack. Tap to log each dose. See compliance at a glance and adjust timing without losing the cycle.</p>
        </div>
      </div>

      <div className="section-divider" />

      <div className="section-eyebrow">// HOW IT WORKS</div>
      <h2 className="section-title">From goal to protocol in under <em>two minutes</em>.</h2>
      <p className="section-lead">No appointments, no five-tab research rabbit holes. Speak the goal. Get the stack. Start the cycle.</p>

      <div style={{ height: 56 }} />

      <div className="steps">
        <div className="step">
          <div className="step-num">STEP 01</div>
          <div className="step-bar" />
          <h4 className="step-title">Describe the goal</h4>
          <p className="step-desc">Recovery from a torn rotator cuff. Deeper sleep. Visceral fat loss. Sharper focus during deep work. Be specific — Pepagent is good with nuance.</p>
        </div>
        <div className="step">
          <div className="step-num">STEP 02</div>
          <div className="step-bar" />
          <h4 className="step-title">Confirm your profile</h4>
          <p className="step-desc">Weight, age, experience with peptides. The dosing engine adjusts each recommendation against your stats — novices start lower and ramp.</p>
        </div>
        <div className="step">
          <div className="step-num">STEP 03</div>
          <div className="step-bar" />
          <h4 className="step-title">Receive the stack</h4>
          <p className="step-desc">A two-to-three peptide protocol with mechanism, half-life, dose, frequency, and cycle. Ask follow-ups in voice or text — the agent has full context.</p>
        </div>
        <div className="step">
          <div className="step-num">STEP 04</div>
          <div className="step-bar" />
          <h4 className="step-title">Run the cycle</h4>
          <p className="step-desc">Your dosing calendar maps every injection and intranasal dose to the right day and time. Tap to log. Adjust on the fly. Never miss a window.</p>
        </div>
      </div>

      <div className="section-divider" />

      <div className="section-eyebrow">// THE LIBRARY</div>
      <h2 className="section-title">Trained on the peptides <em>that actually work</em>.</h2>
      <p className="section-lead">Nine peptides across six goal categories, each with full pharmacokinetic profiles, dosing protocols, and stacking guidance.</p>

      <div style={{ height: 56 }} />

      <div className="lib-grid">
        {peptidesShown.map((id) => {
          const p = PEPTIDES[id];
          return (
            <div key={id} className="lib-card" style={{ '--c': p.color }}>
              <div className="lib-head">
                <span className="lib-dot" />
                <span className="lib-name">{p.name}</span>
                <span className="lib-cat">{p.category}</span>
              </div>
              <p className="lib-mech">{p.mechanism}</p>
              <div className="lib-meta">
                <span><b>{p.dose}</b> dose</span>
                <span><b>{p.halfLife}</b> half-life</span>
              </div>
            </div>
          );
        })}
      </div>

      <div className="section-divider" />

      <div className="stats-strip">
        <div className="stat-cell">
          <div className="stat-big">9</div>
          <div className="stat-cap">PEPTIDES</div>
          <div className="stat-cap-detail">Vetted protocols</div>
        </div>
        <div className="stat-cell">
          <div className="stat-big">6</div>
          <div className="stat-cap">GOAL TRACKS</div>
          <div className="stat-cap-detail">Recovery → longevity</div>
        </div>
        <div className="stat-cell">
          <div className="stat-big">42<span style={{ fontSize: 22, opacity: 0.5 }}>ms</span></div>
          <div className="stat-cap">RESPONSE</div>
          <div className="stat-cap-detail">Real-time conversation</div>
        </div>
        <div className="stat-cell">
          <div className="stat-big">100%</div>
          <div className="stat-cap">ON-DEVICE</div>
          <div className="stat-cap-detail">Your data stays local</div>
        </div>
      </div>

      <div className="section-divider" />

      <div className="section-eyebrow">// QUESTIONS</div>
      <h2 className="section-title">Things people <em>actually ask</em>.</h2>

      <div style={{ height: 40 }} />

      <div className="faq">
        {faqs.map((f, i) => (
          <div key={i} className={"faq-item " + (openFaq === i ? 'open' : '')}>
            <button className="faq-q" onClick={() => setOpenFaq(openFaq === i ? -1 : i)}>
              <span>{f.q}</span>
              <span className="faq-q-mark">+</span>
            </button>
            {openFaq === i && <div className="faq-a">{f.a}</div>}
          </div>
        ))}
      </div>

      <div className="section-divider" />

      <div className="cta-section">
        <h2>Ready to design your stack?</h2>
        <p>Two minutes from goal to protocol. Voice or text. Your data stays on your device.</p>
        <div className="cta-row">
          <button className="cta" onClick={onStart} style={{ '--accent': accent }}>
            BEGIN CONSULTATION <Icon.arrow />
          </button>
          {onOpenVoice && (
            <button className="ghost" onClick={onOpenVoice} style={{ display: 'inline-flex', alignItems: 'center', gap: 8 }}>
              <Icon.mic /> TALK TO PEPAGENT
            </button>
          )}
        </div>
      </div>

      <div className="footer">
        <div className="footer-left">
          <div className="footer-brand">PEPAGENT</div>
          <div className="footer-tag">Peptide protocol intelligence. Educational use. Not medical advice. Always consult a licensed clinician before initiating any peptide regimen.</div>
        </div>
        <div className="footer-cols">
          <div className="footer-col">
            <div className="footer-col-head">PRODUCT</div>
            <a>Library</a>
            <a>Protocols</a>
            <a>Roadmap</a>
          </div>
          <div className="footer-col">
            <div className="footer-col-head">RESOURCES</div>
            <a>Research</a>
            <a>Safety</a>
            <a>Glossary</a>
          </div>
          <div className="footer-col">
            <div className="footer-col-head">COMPANY</div>
            <a>About</a>
            <a>Contact</a>
            <a>Press</a>
          </div>
        </div>
      </div>
      <div className="footer-fineprint">
        <span>© 2026 PEPAGENT LABS</span>
        <span>v0.4.2 · BUILD 9241</span>
      </div>
    </div>
  );
}

function Telemetry({ label, value, dot }) {
  return (
    <div className="telem">
      {dot && <span className="telem-dot" style={{ background: dot }} />}
      <span className="telem-label">{label}</span>
      <span className="telem-value">{value}</span>
    </div>
  );
}

function Crosshairs() {
  return (
    <div className="crosshairs">
      <span className="ch ch-tl" /><span className="ch ch-tr" />
      <span className="ch ch-bl" /><span className="ch ch-br" />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────────────────────
// ONBOARDING — goal selection
// ─────────────────────────────────────────────────────────────────────────────
function OnboardingScreen({ accent, onSelectGoal }) {
  const [stage, setStage] = React.useState(0); // 0 intro, 1 goal, 2 personal
  const [goal, setGoal] = React.useState(null);
  const [age, setAge] = React.useState(34);
  const [weight, setWeight] = React.useState(82);
  const [experience, setExperience] = React.useState('intermediate');

  const goals = Object.entries(GOAL_PROTOCOLS);

  return (
    <div className="screen onboarding" data-screen-label="02 Onboarding">
      <div className="ob-side">
        <Orb size={260} intensity={0.3} color={accent} state="idle" />
        <div className="ob-side-prompt">
          {stage === 0 && (
            <>
              <div className="prompt-eyebrow">PEPAGENT</div>
              <div className="prompt-title">Welcome.</div>
              <div className="prompt-sub">I'll design a peptide protocol calibrated to your body and your goal. Three quick questions.</div>
            </>
          )}
          {stage === 1 && (
            <>
              <div className="prompt-eyebrow">QUESTION 01 / 02</div>
              <div className="prompt-title">What do you want to improve?</div>
              <div className="prompt-sub">Pick the area you want to prioritize. We can stack later.</div>
            </>
          )}
          {stage === 2 && (
            <>
              <div className="prompt-eyebrow">QUESTION 02 / 02</div>
              <div className="prompt-title">A few stats.</div>
              <div className="prompt-sub">Doses scale with weight and age. This stays on-device.</div>
            </>
          )}
        </div>
      </div>

      <div className="ob-main">
        <div className="ob-progress">
          <span className={"ob-step " + (stage >= 0 ? 'on' : '')} style={{ '--accent': accent }} />
          <span className={"ob-step " + (stage >= 1 ? 'on' : '')} style={{ '--accent': accent }} />
          <span className={"ob-step " + (stage >= 2 ? 'on' : '')} style={{ '--accent': accent }} />
        </div>

        {stage === 0 && (
          <div className="ob-stage">
            <ul className="ob-list">
              <li><Icon.check /> Personalized peptide stacks</li>
              <li><Icon.check /> Weight-adjusted dosing protocols</li>
              <li><Icon.check /> Cycling schedules and stack synergy</li>
              <li><Icon.check /> Contraindication & safety screening</li>
            </ul>
            <button className="cta" style={{ '--accent': accent }} onClick={() => setStage(1)}>
              CONTINUE <Icon.arrow />
            </button>
          </div>
        )}

        {stage === 1 && (
          <div className="ob-stage">
            <div className="goal-grid">
              {goals.map(([k, g]) => {
                const active = goal === k;
                const I = Icon[g.icon];
                return (
                  <button
                    key={k}
                    className={"goal-card " + (active ? 'active' : '')}
                    style={{ '--accent': accent }}
                    onClick={() => setGoal(k)}
                  >
                    <div className="goal-icon">{I && <I size={22} />}</div>
                    <div className="goal-text">
                      <div className="goal-label">{g.label}</div>
                      <div className="goal-sub">{g.sub}</div>
                    </div>
                    <div className="goal-tag">{g.stack.length} peptides</div>
                  </button>
                );
              })}
            </div>
            <div className="ob-actions">
              <button className="ghost" onClick={() => setStage(0)}>BACK</button>
              <button
                className="cta"
                style={{ '--accent': accent }}
                disabled={!goal}
                onClick={() => setStage(2)}
              >
                CONTINUE <Icon.arrow />
              </button>
            </div>
          </div>
        )}

        {stage === 2 && (
          <div className="ob-stage">
            <div className="stats-grid">
              <StatField label="AGE" unit="yrs" value={age} setValue={setAge} min={18} max={80} accent={accent} />
              <StatField label="WEIGHT" unit="kg" value={weight} setValue={setWeight} min={40} max={150} accent={accent} />
              <div className="stat-segmented">
                <div className="stat-label">EXPERIENCE</div>
                <div className="seg" style={{ '--accent': accent }}>
                  {['novice', 'intermediate', 'advanced'].map((e) => (
                    <button key={e} className={experience === e ? 'on' : ''} onClick={() => setExperience(e)}>{e.toUpperCase()}</button>
                  ))}
                </div>
              </div>
            </div>
            <div className="ob-actions">
              <button className="ghost" onClick={() => setStage(1)}>BACK</button>
              <button className="cta" style={{ '--accent': accent }} onClick={() => onSelectGoal(goal, { age, weight, experience })}>
                ANALYZE <Icon.arrow />
              </button>
            </div>
          </div>
        )}
      </div>
      <Crosshairs />
    </div>
  );
}

function StatField({ label, unit, value, setValue, min, max, accent }) {
  return (
    <div className="stat-field" style={{ '--accent': accent }}>
      <div className="stat-label">{label}</div>
      <div className="stat-value">
        <span className="stat-num">{value}</span>
        <span className="stat-unit">{unit}</span>
      </div>
      <input type="range" min={min} max={max} value={value} onChange={(e) => setValue(+e.target.value)} />
      <div className="stat-bar"><span style={{ width: ((value - min) / (max - min)) * 100 + '%', background: accent }} /></div>
    </div>
  );
}

window.LandingScreen = LandingScreen;
window.OnboardingScreen = OnboardingScreen;
window.Icon = Icon;
window.Crosshairs = Crosshairs;