/* Platform — Class 42 specimen page.
 * Names the SaaS / AI software / cloud-based health platform services so
 * the trademark filing has a clean URL pointing at Class 42 coverage:
 *   - AI-powered health-assessment software
 *   - Software as a service (SaaS) featuring AI for personalized wellness
 *     planning
 *   - Health-data analytics
 *   - Cloud-based health platform services
 *   - Scientific research services in the field of health and wellness */

const Hero = () => (
  <section style={{ background: "var(--paper)", paddingTop: 60, paddingBottom: 32 }}>
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr", gap: 64, alignItems: "start" }} className="m-grid-2">
        <div>
          <div style={{ display: "flex", gap: 8, marginBottom: 22, alignItems: "center", flexWrap: "wrap" }}>
            <span className="eyebrow-lime">★ THE PLATFORM</span>
            <span className="eyebrow">AI · SaaS · CLOUD</span>
          </div>
          <h1 style={{ fontFamily: "var(--font-display)", fontWeight: 900, fontSize: "clamp(48px, 7vw, 92px)", letterSpacing: "-0.04em", lineHeight: 0.96, margin: "0 0 18px" }}>
            AI for what<br/>your body actually<br/>
            <span style={{
              background: "linear-gradient(180deg, var(--ink) 62%, var(--lime) 62%)",
              WebkitBackgroundClip: "text",
              WebkitTextFillColor: "transparent",
              backgroundClip: "text",
              paddingRight: 4,
            }}>needs.</span>
          </h1>
          <p style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 19, marginTop: 8, marginBottom: 18, maxWidth: 520 }}>
            AI-powered health-assessment software. Cloud-based. MD-reviewed.
          </p>
          <div style={{ display: "flex", gap: 12, flexWrap: "wrap" }}>
            <a href="/bioreveal.html?start=1" className="btn btn-dark btn-lg">Run the assessment →</a>
            <a href="#login" className="btn btn-ghost btn-lg">Sign in to your dashboard</a>
          </div>
        </div>
        <p style={{ fontSize: 16, lineHeight: 1.6, color: "var(--muted)", maxWidth: 380 }}>
          Superstar Peptides is a software-as-a-service (SaaS) platform featuring artificial intelligence for personalized wellness planning, health-data analytics, and cloud-based health platform services — backed by ongoing scientific research in the field of health and wellness.
        </p>
      </div>
    </div>
  </section>
);

const Capabilities = () => {
  const items = [
    {
      eyebrow: "AI Software",
      h: "AI-powered health-assessment",
      p: "BioReveal scans your goals, vitals from a 25-second face capture, biomarkers, and lifestyle answers — then maps you against 47,000+ outcomes to surface a personalized peptide stack.",
    },
    {
      eyebrow: "SaaS",
      h: "Personalized wellness planning",
      p: "Software as a service featuring artificial intelligence. Each member gets a cloud-hosted protocol: peptide stack, dosing schedule, week-by-week milestones, and refill cadence — synced across devices.",
    },
    {
      eyebrow: "Analytics",
      h: "Health-data analytics",
      p: "Connect Oura, Apple Health, Whoop, Garmin, and other wearables. We surface trends in sleep, recovery, HRV, and skin metrics — and adjust your plan as the data moves.",
    },
    {
      eyebrow: "Cloud Platform",
      h: "Cloud-based health platform services",
      p: "Your intake, protocols, lab uploads, MD notes, and order history live in one secure cloud account. Access from any browser or our native iOS app. HIPAA-compliant storage.",
    },
    {
      eyebrow: "Research",
      h: "Scientific research services",
      p: "Our research team continuously reviews Europe PMC, ClinicalTrials.gov, and peer-reviewed peptide literature to keep every protocol grounded in current evidence — surfacing studies inside each peptide brief.",
    },
    {
      eyebrow: "Companion AI",
      h: "Always-on wellness chat",
      p: "Ask the AI anything about your stack, dosing, side effects, or how to read your own labs. Streaming responses, memory across visits, and escalation to a human MD when it matters.",
    },
  ];
  return (
    <section style={{ background: "var(--paper-2)", padding: "72px 0" }}>
      <div className="container">
        <div className="br-section-head" style={{ marginBottom: 36 }}>
          <div className="eyebrow">★ WHAT THE PLATFORM DOES</div>
          <h2>Software that thinks<br/>about your body.</h2>
        </div>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(280px, 1fr))", gap: 16 }}>
          {items.map((it, i) => (
            <div key={i} style={{ background: "white", border: "1px solid var(--paper-3)", borderRadius: "var(--r-lg)", padding: 28 }}>
              <div className="mono" style={{ fontSize: 11, letterSpacing: "0.18em", color: "var(--muted)", textTransform: "uppercase", marginBottom: 12 }}>★ {it.eyebrow}</div>
              <h3 style={{ fontFamily: "var(--font-display)", fontWeight: 800, fontSize: 22, letterSpacing: "-0.02em", lineHeight: 1.1, marginBottom: 12 }}>{it.h}</h3>
              <p style={{ fontSize: 14, lineHeight: 1.55, color: "var(--muted)", margin: 0 }}>{it.p}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

const LoginStrip = () => (
  <section id="login" style={{ background: "var(--ink)", color: "var(--paper)", padding: "72px 0" }}>
    <div className="container" style={{ maxWidth: 760, textAlign: "center" }}>
      <div className="eyebrow" style={{ color: "#aaa", marginBottom: 18 }}>★ CLOUD ACCOUNT</div>
      <h2 className="display-lg" style={{ marginBottom: 18 }}>Sign in to your dashboard.</h2>
      <p style={{ opacity: 0.8, fontSize: 16, lineHeight: 1.6, marginBottom: 28 }}>
        Every Superstar Peptides member gets a cloud-hosted account: protocol, dosing schedule, refill cadence, MD notes, lab uploads, and AI chat history. Available on the web and in our native iOS app.
      </p>
      <div style={{ display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
        <a href="/bioreveal.html?start=1" className="btn btn-primary btn-lg">Create an account →</a>
        <a href="#" className="btn btn-ghost-light btn-lg">Log in</a>
      </div>
    </div>
  </section>
);

const App = () => (
  <>
    <Header active="platform" />
    <Hero />
    <Capabilities />
    <LoginStrip />
    <Footer />
  </>
);

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