// FAQ + Final CTA — no fundraising content

const DEMO_FORM_URL = 'https://docs.google.com/forms/d/e/1FAIpQLSfQtERCizMwuMVVraIIKNbNcsqO0ogKcJtOEINXbxERgoucDQ/viewform';

const faqs = [
  {
    q: 'What is Model OS?',
    a: 'Model OS is a platform that helps companies build their own custom AI models. You get better performance at lower cost, without sharing your proprietary data with frontier AI providers.',
  },
  {
    q: 'Why not just use the big AI labs?',
    a: 'Using a frontier lab means sending them your proprietary data, and labs can use what they learn to build products that compete with their customers. OpenAI launched its own legal AI, and Anthropic launched Claude Design. With Model OS, you keep your data and own the model.',
  },
  {
    q: 'Do I need an AI team to use it?',
    a: 'No. Model OS picks the right model for your use case, helps you manage and clean up your data, fine-tunes and evaluates the model, and deploys it. Routing, retraining, and evaluations run on autopilot.',
  },
  {
    q: 'Which models can I start from?',
    a: 'More than 10,000 open-source models are ready to be fine-tuned, or you can bring your own custom AI.',
  },
  {
    q: 'What does continual learning mean?',
    a: 'Every deployed model keeps improving from real usage. Ratings, edits, retries, and other feedback become training data, and Model OS uses it to fine-tune, evaluate, and upgrade the model.',
  },
  {
    q: 'How is Model OS different from cloud providers or post-training firms?',
    a: 'Cloud providers, post-training firms, open-source platforms, and frontier labs each cover part of the job. Model OS combines customization, training, privacy, and quality in one platform, at a lower price, and it is the only option where models keep learning after launch.',
  },
  {
    q: 'How much does it cost?',
    a: 'Self-service plans start at $200 per month. Enterprise licenses start at $0.5M. Compute and data are billed by usage.',
  },
  {
    q: 'Which industries do you work with?',
    a: 'Our initial focus is legal, finance, healthcare, and manufacturing.',
  },
  {
    q: 'Who is behind Model OS?',
    a: 'Model OS is led by Fernando Jia (CEO), Dr. Tianqin Li (Chief Scientist), Florence Li (CTO), and Prof. Tai Sing Lee, CMU Director of Biological & Machine Intelligence, with 14 more teammates from OpenAI, Google, Meta, Stanford, and MIT. We are US-based, with our core team in Silicon Valley.',
  },
  {
    q: 'What is the Model Dev Initiative?',
    a: 'An initiative with the CMU School of Computer Science: a collaborative research ecosystem pioneering cost-effective AI development.',
  },
];

const FAQ = () => {
  const [open, setOpen] = React.useState(null);
  return (
    <section className="section" id="faq" data-screen-label="13 FAQ">
      <div className="wrap">
        <div className="s-head">
          <span className="label">/ 07 — FAQ</span>
          <h2>Common questions.</h2>
        </div>
        <div className="faq-list">
          {faqs.map((item, i) => (
            <div key={i} className={`faq-item ${open === i ? 'open' : ''}`}>
              <button className="faq-q" onClick={() => setOpen(open === i ? null : i)}>
                <span>{item.q}</span>
                <span className="faq-icon">{open === i ? '−' : '+'}</span>
              </button>
              {open === i && (
                <div className="faq-a">{item.a}</div>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const FinalCTA = () => {
  const [copied, setCopied] = React.useState(false);
  const copy = () => {
    navigator.clipboard?.writeText('contact@modelos.technology');
    setCopied(true);
    setTimeout(() => setCopied(false), 1800);
  };

  return (
    <section className="cta" id="contact" data-screen-label="14 CTA">
      <div className="cta-glow" />
      <div className="wrap" style={{maxWidth:'var(--maxw)', margin:'0 auto'}}>
        <span className="label" style={{display:'block', marginBottom:32}}>/ 13 — Get started</span>
        <h2>
          The next control point in AI is not one more model.<br />
          <span className="gradient">It is the layer that runs all of them.</span>
        </h2>
        <p className="lede" style={{marginTop:24, marginBottom:16}}>
          Model OS makes the multi-model era operational.
        </p>
        <div className="cta-capabilities">
          {['Route the right model.','Orchestrate the right workflow.','Benchmark in production.','Control execution.','Scale intelligence as a system.'].map((line, i) => (
            <div key={i} className="cta-cap-line">{line}</div>
          ))}
        </div>

        <div className="cta-btns" style={{marginTop:48}}>
          <a className="btn btn-primary" href="mailto:contact@modelos.technology">
            Request Access
            <span className="arrow">→</span>
          </a>
        </div>

        <div className="cta-contacts">
          <button className="cta-contact-item" onClick={copy}>
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width="16" height="16"><path strokeLinecap="round" strokeLinejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" /></svg>
            {copied ? '✓ Copied' : 'contact@modelos.technology'}
          </button>
          <a className="cta-contact-item" href="https://www.linkedin.com/company/modelosinc/" target="_blank" rel="noopener noreferrer">
            <svg viewBox="0 0 24 24" fill="currentColor" width="16" height="16"><path d="M16 8a6 6 0 016 6v7h-4v-7a2 2 0 00-2-2 2 2 0 00-2 2v7h-4v-7a6 6 0 016-6zM2 9h4v12H2z"/><circle cx="4" cy="4" r="2"/></svg>
            LinkedIn
          </a>
          <a className="cta-contact-item" href="https://t.me/modelosai" target="_blank" rel="noopener noreferrer">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" width="16" height="16"><path strokeLinecap="round" strokeLinejoin="round" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" /></svg>
            Telegram
          </a>
        </div>
      </div>
    </section>
  );
};

window.FAQ = FAQ;
window.FinalCTA = FinalCTA;