/* ============================================================
   FluentMe — product page + homepage spotlight
   ============================================================ */
const { useMemo: useFM } = React;

const FmIc = {
  mic: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><path d="M12 18v3"/></svg>,
  chat: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M21 12a8 8 0 0 1-8 8H4l2-3a8 8 0 1 1 15-5Z"/></svg>,
  wave: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 12h2l2-7 4 14 3-10 2 5 2-2h3"/></svg>,
  flame: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 3s5 4.5 5 9a5 5 0 0 1-10 0c0-1.5.5-3 1.5-4.5C9 9 10 10 11 10c0-3 1-7 1-7Z"/></svg>,
  globe: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18"/></svg>,
  spark: <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M18.4 5.6l-2.8 2.8M8.4 15.6l-2.8 2.8"/></svg>,
  check: <svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2"><path d="m3 8 3.5 3.5L13 4.5"/></svg>,
};

/* ---------- phone mock ---------- */
function FmPhone() {
  return (
    <div className="fm-phone-wrap">
      <div className="fm-phone">
        <div className="fm-screen">
          <div className="fm-app-head">
            <span className="fm-app-logo">fluentme</span>
            <span className="fm-streak">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor"><path d="M12 3s5 4.5 5 9a5 5 0 0 1-10 0c0-1.5.5-3 1.5-4.5C9 9 10 10 11 10c0-3 1-7 1-7Z"/></svg>
              12-day streak
            </span>
          </div>
          <div className="fm-bubble ai">
            <span className="who">AI partner · Spanish</span>
            ¿Qué hiciste este fin de semana?
          </div>
          <div className="fm-bubble user">
            <span className="who">You</span>
            Fui al mercado con mi hermana.
          </div>
          <div className="fm-score">
            <span className="pct">94%</span>
            <span className="lbl">Pronunciation score<br/>Great rolled "r" — keep it up!</span>
          </div>
          <div className="fm-mic-row">
            <div className="fm-mic">
              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><path d="M12 18v3"/></svg>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ---------- homepage spotlight section ---------- */
function FluentMeSpotlight({ setPage }) {
  return (
    <section className="fin-section" id="fluentme" style={{ paddingTop: 24 }}>
      <div className="wrap">
        <div className="fin-section-head">
          <span className="eyebrow">Consumer AI</span>
          <h2>Our AI isn't just for markets.</h2>
          <p>FluentMe is Vyovam's consumer product — the same AI engineering discipline, applied to language learning.</p>
        </div>
        <div className="fm-spot">
          <div>
            <span className="fm-tag">
              <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M18.4 5.6l-2.8 2.8M8.4 15.6l-2.8 2.8"/></svg>
              FluentMe · by Vyovam
            </span>
            <h2>Speak a new language, <span className="fm-grad">10 minutes a day.</span></h2>
            <p className="d">
              Practice real conversations with an AI partner, get instant pronunciation feedback, and build a daily habit — in 11 languages. Start free, no card needed.
            </p>
            <div className="fm-chips">
              <span className="fm-chip">{FmIc.chat} Real AI conversations</span>
              <span className="fm-chip">{FmIc.wave} Pronunciation feedback</span>
              <span className="fm-chip">{FmIc.flame} Daily streaks</span>
              <span className="fm-chip">{FmIc.globe} 11 languages</span>
            </div>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <a className="btn-coral" href="https://fluentme.ai" target="_blank" rel="noopener">
                Try FluentMe free
                <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 7h8m-3-3 3 3-3 3"/></svg>
              </a>
              <a className="btn-secondary-glass" href="#/fluentme" onClick={(e) => { e.preventDefault(); setPage('fluentme'); }}>
                Learn more
              </a>
            </div>
          </div>
          <FmPhone />
        </div>
      </div>
    </section>
  );
}

/* ---------- full product page ---------- */
function FluentMePage({ setPage }) {
  return (
    <main className="page-enter">
      <section className="ip-hero">
        <div className="wrap">
          <div className="fin-hero-grid" style={{ alignItems: 'center' }}>
            <div className="inner" style={{ position: 'relative', zIndex: 1 }}>
              <span className="fm-tag">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8"><path d="M12 3v4M12 17v4M3 12h4M17 12h4M5.6 5.6l2.8 2.8M15.6 15.6l2.8 2.8M18.4 5.6l-2.8 2.8M8.4 15.6l-2.8 2.8"/></svg>
                FluentMe · A Vyovam product
              </span>
              <h1>Speak a new language, <span className="grad" style={{ backgroundImage: 'linear-gradient(135deg, #F0705B, #F59E0B)' }}>10 minutes a day.</span></h1>
              <p className="sub">
                FluentMe is Vyovam's consumer AI application — a language-speaking practice app built on the same real-time AI infrastructure that powers our trading systems. Real conversations, instant feedback, daily habit loops.
              </p>
              <div className="fm-hero-badge-row">
                <a className="btn-coral" href="https://fluentme.ai" target="_blank" rel="noopener">
                  Start free at fluentme.ai
                  <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 7h8m-3-3 3 3-3 3"/></svg>
                </a>
                <span className="fm-chip" style={{ alignSelf: 'center' }}>{FmIc.check} No card needed</span>
              </div>
            </div>
            <FmPhone />
          </div>
        </div>
      </section>

      {/* features */}
      <section className="fin-section">
        <div className="wrap">
          <div className="fin-section-head">
            <span className="eyebrow" style={{ color: 'var(--fm-coral-bright)' }}>How it works</span>
            <h2>Built around one habit: speaking out loud.</h2>
            <p>Most apps teach you to read a language. FluentMe gets you talking from the first session.</p>
          </div>
          <FinReveal>
          <div className="fm-feat-grid">
            {[
              { i: FmIc.chat,  t: 'Real AI conversations',       d: 'Talk with an AI partner that responds naturally, adapts to your level, and keeps the conversation going.' },
              { i: FmIc.wave,  t: 'Instant pronunciation feedback', d: 'Every sentence is scored in real time, with specific guidance on the sounds you missed.' },
              { i: FmIc.flame, t: 'Daily streaks',               d: 'Ten focused minutes a day. Streaks and gentle nudges keep the habit alive without guilt trips.' },
              { i: FmIc.globe, t: '11 languages',                d: 'Spanish, French, German, Japanese, and more — switch languages anytime on one account.' },
              { i: FmIc.mic,   t: 'Speech-first design',         d: 'No endless tap-the-word drills. You speak, the AI listens, and you improve where it counts.' },
              { i: FmIc.spark, t: 'Free to start',               d: 'Try full conversations before paying anything. No card required to begin.' },
            ].map((f, i) => (
              <div key={i} className="fm-feat">
                <div className="ic">{f.i}</div>
                <h4>{f.t}</h4>
                <p>{f.d}</p>
              </div>
            ))}
          </div>
          </FinReveal>
        </div>
      </section>

      {/* languages */}
      <section className="fin-section" style={{ background: 'var(--bg-elev)', borderTop: '1px solid var(--line)', borderBottom: '1px solid var(--line)' }}>
        <div className="wrap">
          <div className="fin-section-head">
            <span className="eyebrow" style={{ color: 'var(--fm-coral-bright)' }}>Languages</span>
            <h2>11 languages. One AI partner.</h2>
          </div>
          <div className="fm-langs">
            {['Spanish', 'French', 'German', 'Italian', 'Portuguese', 'Japanese', 'Korean', 'Mandarin', 'Hindi', 'Arabic', 'English'].map((l, i) => (
              <span key={i} className="fm-lang">{l}</span>
            ))}
          </div>
        </div>
      </section>

      {/* shared DNA */}
      <section className="fin-section">
        <div className="wrap">
          <div className="fin-section-head">
            <span className="eyebrow">Why Vyovam builds this</span>
            <h2>Same engineering DNA, different market.</h2>
            <p>The systems behind FluentMe — real-time speech pipelines, low-latency AI inference, habit analytics — run on the same cloud infrastructure discipline as our trading platform.</p>
          </div>
          <FinReveal>
          <div className="sec-grid">
            {[
              { i: Ic.bolt,   t: 'Real-time AI pipelines', d: 'Sub-second speech recognition and response generation, engineered like an execution engine.' },
              { i: Ic.cloud,  t: 'Cloud-native scale',     d: 'The same auto-scaling, multi-region deployment patterns as our trading infrastructure.' },
              { i: Ic.shield, t: 'Privacy-first',          d: 'Voice data handled with the same security rigor we apply to broker credentials.' },
            ].map((s, i) => (
              <div key={i} className="sec-card">
                <span className="ic">{s.i}</span>
                <div>
                  <h4>{s.t}</h4>
                  <p>{s.d}</p>
                </div>
              </div>
            ))}
          </div>
          </FinReveal>
        </div>
      </section>

      {/* CTA */}
      <div className="wrap">
        <div className="fm-cta-band">
          <h2>Ten minutes a day. That's the whole ask.</h2>
          <p>Start a real conversation in a new language today — free, in your browser, no card needed.</p>
          <a className="btn-coral" href="https://fluentme.ai" target="_blank" rel="noopener">
            Open fluentme.ai
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M3 7h8m-3-3 3 3-3 3"/></svg>
          </a>
        </div>
      </div>
    </main>
  );
}

Object.assign(window, { FluentMeSpotlight, FluentMePage, FmPhone });