/* ================= Coming Soon ================= */

const ComingSoon = () => {
  const [email, setEmail] = React.useState("");
  const [done, setDone] = React.useState(false);
  const submit = (e) => { e.preventDefault(); if (email.trim()) setDone(true); };

  return (
    <div className="cs-body">
      <div className="cs-bg" />
      <div className="cs-grid" />
      <div className="cs-orbit" aria-hidden="true">
        <svg viewBox="0 0 900 900" fill="none">
          <g stroke="rgba(38,103,216,.14)" strokeWidth="1.2">
            <circle cx="450" cy="450" r="200" />
            <ellipse cx="450" cy="450" rx="330" ry="150" />
            <ellipse cx="450" cy="450" rx="330" ry="150" transform="rotate(60 450 450)" />
            <ellipse cx="450" cy="450" rx="330" ry="150" transform="rotate(-60 450 450)" />
          </g>
          <circle cx="650" cy="450" r="7" fill="#2667D8">
            <animateTransform attributeName="transform" type="rotate" from="0 450 450" to="360 450 450" dur="16s" repeatCount="indefinite" />
          </circle>
          <circle cx="450" cy="250" r="6" fill="#5ACC9B">
            <animateTransform attributeName="transform" type="rotate" from="0 450 450" to="-360 450 450" dur="22s" repeatCount="indefinite" />
          </circle>
        </svg>
      </div>

      <header className="cs-top">
        <a className="logo" href="/" aria-label="Tenetic home"><img src="assets/tenetic-logo.png" alt="Tenetic" /></a>
        <a className="link" href="https://www.tenetic.com/contact">Contact us <Icon name="arrow" size={13} /></a>
      </header>

      <main className="cs-center">
        <div className="cs-inner">
          <div className="cs-pill"><span className="eyebrow-pill"><span className="dot" /> Coming soon</span></div>
          <h1 className="cs-h1"><span className="grad-text">Coming soon.</span></h1>
          <p className="cs-sub">
            We're building the next version of Tenetic Intelligence. Thanks for your patience — we'll be back soon.
          </p>

          <div className="cs-note">© 2026 Tenetic, LLC.</div>
        </div>
      </main>

      <footer className="cs-foot">
        <div>© 2026 Tenetic, LLC. All Rights Reserved.</div>
        <div className="socials">
          <a href="https://www.linkedin.com/company/tenetic" target="_blank" rel="noopener" aria-label="LinkedIn"><Icon name="linkedin" size={16} /></a>
          <a href="https://www.youtube.com/@Take5withTenetic" target="_blank" rel="noopener" aria-label="YouTube"><Icon name="youtube" size={16} /></a>
        </div>
      </footer>
    </div>
  );
};

ReactDOM.createRoot(document.getElementById("root")).render(<ComingSoon />);