const Ask = () => {
  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="cta" data-screen-label="09 CTA">
      <div className="cta-glow" />
      <div className="wrap" style={{maxWidth:'var(--maxw)', margin:'0 auto'}}>
        <span className="label" style={{display:'block', marginBottom:32}}>/ 08 — Get in</span>
        <h2>Own your <span className="gradient">model</span>.</h2>
        <p className="lede">
          Stop renting a prompt wrapper. Model OS turns your production data into
          a model you own and control.
        </p>

        <div style={{display:'flex', alignItems:'center', gap:14, flexWrap:'wrap'}}>
          <div className="contact-row">
            <span className="k">EMAIL</span>
            <span className="v">contact@modelos.technology</span>
            <button className="btn btn-primary" onClick={copy} style={{padding:'9px 16px', fontSize:13}}>
              {copied ? '✓ Copied' : 'Copy'}
            </button>
          </div>
        </div>
      </div>
    </section>
  );
};

window.Ask = Ask;