import { useState } from "react";

export default function EliteTrial() {
  const [tab, setTab] = useState("login");

  return (
    <div style={styles.wrapper}>
      <div style={styles.card}>
        
        <div style={styles.header}>
          <h3 style={{color:"#4da3ff"}}>NDSP</h3>
          <h1 style={styles.title}>Elite Trial Access</h1>
          <p style={styles.subtitle}>
            Restricted access. Authorized personnel only.
          </p>
        </div>

        <div style={styles.tabs}>
          <button
            onClick={() => setTab("login")}
            style={tab === "login" ? styles.activeTab : styles.tab}
          >
            Sign In
          </button>
          <button
            onClick={() => setTab("register")}
            style={tab === "register" ? styles.activeTab : styles.tab}
          >
            Register Trial
          </button>
        </div>

        <div style={styles.form}>
          <input placeholder="Full Name" style={styles.input} />
          <input placeholder="Email Address" style={styles.input} />
          <input placeholder="Organization (Optional)" style={styles.input} />
          <input
            placeholder="NDSP-ELITE-XXXX-XXXX"
            style={styles.input}
          />

          <button style={styles.button}>
            {tab === "login" ? "Access Dashboard" : "Request Access"}
          </button>
        </div>
      </div>
    </div>
  );
}

const styles = {
  wrapper: {
    height: "100vh",
    background: "#0a0f1c",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    fontFamily: "sans-serif",
  },
  card: {
    width: "400px",
    background: "#111827",
    padding: "30px",
    borderRadius: "12px",
    border: "1px solid #1f2937",
    boxShadow: "0 0 40px rgba(0,0,0,0.6)",
  },
  header: {
    textAlign: "center",
    marginBottom: "20px",
  },
  title: {
    color: "#fff",
    margin: "10px 0",
  },
  subtitle: {
    color: "#6b7280",
    fontSize: "14px",
  },
  tabs: {
    display: "flex",
    marginBottom: "20px",
  },
  tab: {
    flex: 1,
    padding: "10px",
    background: "#1f2937",
    color: "#9ca3af",
    border: "none",
    cursor: "pointer",
  },
  activeTab: {
    flex: 1,
    padding: "10px",
    background: "#2563eb",
    color: "#fff",
    border: "none",
    cursor: "pointer",
  },
  form: {
    display: "flex",
    flexDirection: "column",
    gap: "10px",
  },
  input: {
    padding: "10px",
    background: "#0f172a",
    border: "1px solid #1f2937",
    color: "#fff",
    borderRadius: "6px",
  },
  button: {
    marginTop: "10px",
    padding: "12px",
    background: "#2563eb",
    color: "#fff",
    border: "none",
    borderRadius: "6px",
    cursor: "pointer",
  },
};