"use client";

import React, { useMemo, useState, useEffect } from "react";

export const SEO_DATA = {
  title: "HealthToken | ABHA-Ready Health Records, Insurance Guidance & Wellness Tools",
  description:
    "HealthToken helps doctors, patients, families, and healthcare partners manage digital health identity, clinic intake, wellness records, insurance readiness, and long-term health benefits.",
  keywords: [
    "HealthToken",
    "healthtoken.in",
    "ABHA ready platform",
    "ABDM healthcare software",
    "digital health records India",
    "health insurance guidance",
    "clinic intake software",
    "patient health profile",
    "wellness checker",
    "doctor patient platform",
  ],
  canonical: "https://healthtoken.in/",
};

export const FAQ_SCHEMA = {
  "@context": "https://schema.org",
  "@type": "FAQPage",
  mainEntity: [
    {
      "@type": "Question",
      name: "What is HealthToken?",
      acceptedAnswer: {
        "@type": "Answer",
        text: "HealthToken is an early-stage healthcare platform for patient intake, wellness awareness, health record readiness, and insurance-benefit guidance.",
      },
    },
    {
      "@type": "Question",
      name: "Is HealthToken a government website?",
      acceptedAnswer: {
        "@type": "Answer",
        text: "No. HealthToken is an independent healthcare software platform. ABHA, ABDM, Ayushman Bharat and PM-JAY are Government of India/NHA initiatives.",
      },
    },
    {
      "@type": "Question",
      name: "Does the wellness checker diagnose health conditions?",
      acceptedAnswer: {
        "@type": "Answer",
        text: "No. The wellness checker is for awareness only and does not replace consultation with a qualified medical professional.",
      },
    },
  ],
};

const brand = {
  navy: "#071D33",
  teal: "#00796B",
  emerald: "#009B86",
  gold: "#C59B43",
  ivory: "#F8F6F0",
};

const GOVT_HEALTH_POINTS = [
  {
    title: "Digital health infrastructure",
    text: "ABDM aims to support an integrated digital health infrastructure and enable interoperability across India’s healthcare ecosystem.",
    source: "Ayushman Bharat Digital Mission / National Health Authority",
  },
  {
    title: "ABHA and health records",
    text: "ABHA helps citizens link and access health records digitally through consent-led health information exchange flows.",
    source: "National Health Authority",
  },
  {
    title: "Financial protection through health cover",
    text: "AB PM-JAY provides eligible families health cover for secondary and tertiary care hospitalization, helping reduce sudden treatment-related financial stress.",
    source: "Ayushman Bharat PM-JAY",
  },
  {
    title: "Universal health coverage direction",
    text: "India’s public health direction emphasizes access to quality healthcare without people facing financial hardship.",
    source: "National Health Policy 2017 / MoHFW",
  },
];

const iconStroke = "currentColor";

interface SvgIconProps {
  name: "arrow" | "shield" | "activity" | "clipboard" | "lock" | "user" | "wallet" | "stethoscope" | "badge" | "heart" | "family" | "hospital" | "umbrella" | "file" | "phone";
  className?: string;
}

function SvgIcon({ name, className = "h-5 w-5" }: SvgIconProps) {
  const common = {
    fill: "none" as const,
    stroke: iconStroke,
    strokeWidth: 2,
    strokeLinecap: "round" as const,
    strokeLinejoin: "round" as const,
  };

  const icons = {
    arrow: (
      <>
        <path {...common} d="M5 12h14" />
        <path {...common} d="M13 5l7 7-7 7" />
      </>
    ),
    shield: (
      <>
        <path {...common} d="M12 3l7 3v5c0 5-3.2 8.4-7 10-3.8-1.6-7-5-7-10V6l7-3z" />
        <path {...common} d="M9 12l2 2 4-5" />
      </>
    ),
    activity: (
      <>
        <path {...common} d="M22 12h-4l-3 8L9 4l-3 8H2" />
      </>
    ),
    clipboard: (
      <>
        <rect {...common} x="5" y="4" width="14" height="17" rx="2" />
        <path {...common} d="M9 4a3 3 0 0 1 6 0" />
        <path {...common} d="M9 9h6" />
        <path {...common} d="M9 14l2 2 4-4" />
      </>
    ),
    lock: (
      <>
        <rect {...common} x="5" y="11" width="14" height="10" rx="2" />
        <path {...common} d="M8 11V8a4 4 0 0 1 8 0v3" />
        <path {...common} d="M12 15v2" />
      </>
    ),
    user: (
      <>
        <circle {...common} cx="12" cy="8" r="4" />
        <path {...common} d="M4 21a8 8 0 0 1 16 0" />
      </>
    ),
    wallet: (
      <>
        <path {...common} d="M3 7a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V7z" />
        <path {...common} d="M16 12h5" />
        <path {...common} d="M17 12.5h.01" />
      </>
    ),
    stethoscope: (
      <>
        <path {...common} d="M6 4v5a4 4 0 0 0 8 0V4" />
        <path {...common} d="M10 13v2a4 4 0 0 0 8 0v-1" />
        <circle {...common} cx="18" cy="11" r="2" />
      </>
    ),
    badge: (
      <>
        <path {...common} d="M12 3l2.1 2.3 3.1-.2.2 3.1L20 10l-2.6 1.8-.2 3.1-3.1-.2L12 17l-2.1-2.3-3.1.2-.2-3.1L4 10l2.6-1.8.2-3.1 3.1.2L12 3z" />
        <path {...common} d="M9 10l2 2 4-5" />
      </>
    ),
    heart: (
      <>
        <path {...common} d="M20.8 7.6a5.1 5.1 0 0 0-8.1-1L12 7.3l-.7-.7a5.1 5.1 0 0 0-8.1 1c-1.3 2.2-.7 5 1.2 6.7L12 21l7.6-6.7c1.9-1.7 2.5-4.5 1.2-6.7z" />
        <path {...common} d="M12 10v5M9.5 12.5h5" />
      </>
    ),
    family: (
      <>
        <circle {...common} cx="8" cy="8" r="3" />
        <circle {...common} cx="17" cy="9" r="2.5" />
        <path {...common} d="M3 21a5 5 0 0 1 10 0" />
        <path {...common} d="M14 21a4 4 0 0 1 7 0" />
      </>
    ),
    hospital: (
      <>
        <path {...common} d="M4 21V5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16" />
        <path {...common} d="M9 21v-6h6v6" />
        <path {...common} d="M12 6v6M9 9h6" />
      </>
    ),
    umbrella: (
      <>
        <path {...common} d="M3 12a9 9 0 0 1 18 0H3z" />
        <path {...common} d="M12 12v7a2 2 0 0 0 4 0" />
      </>
    ),
    file: (
      <>
        <path {...common} d="M6 2h8l4 4v16H6z" />
        <path {...common} d="M14 2v5h5" />
        <path {...common} d="M9 13h6M9 17h4" />
      </>
    ),
    phone: (
      <>
        <rect {...common} x="7" y="2" width="10" height="20" rx="2" />
        <path {...common} d="M11 18h2" />
      </>
    ),
  };

  return (
    <svg viewBox="0 0 24 24" className={className} aria-hidden="true">
      {icons[name] || icons.activity}
    </svg>
  );
}

export function classifyBMI(bmi: string | number) {
  const value = Number(bmi);
  if (!value || value <= 0) return { label: "Enter height and weight", tone: "neutral" };
  if (value < 18.5) return { label: "Underweight range", tone: "warn" };
  if (value < 25) return { label: "Healthy weight range", tone: "good" };
  if (value < 30) return { label: "Overweight range", tone: "warn" };
  return { label: "Obesity range", tone: "alert" };
}

export function classifyBP(sys: string | number, dia: string | number) {
  const s = Number(sys);
  const d = Number(dia);
  if (!s || !d || s <= 0 || d <= 0) return { label: "Enter BP reading", note: "Use a recent reading from a reliable BP monitor.", tone: "neutral" };
  if (s > 180 || d > 120) return { label: "Very high reading", note: "Recheck after a minute. Seek urgent medical help if symptoms are present.", tone: "alert" };
  if (s >= 140 || d >= 90) return { label: "High BP range", note: "Discuss repeated readings with a qualified clinician.", tone: "alert" };
  if ((s >= 130 && s <= 139) || (d >= 80 && d <= 89)) return { label: "Stage 1 high BP range", note: "Track readings and speak to a clinician if repeated.", tone: "warn" };
  if (s >= 120 && s <= 129 && d < 80) return { label: "Elevated BP range", note: "Lifestyle review and regular monitoring may help.", tone: "warn" };
  if (s < 120 && d < 80) return { label: "Normal BP range", note: "Keep tracking periodically.", tone: "good" };
  return { label: "Review reading", note: "Please verify the values entered.", tone: "neutral" };
}

export function classifySpO2(spo2: string | number) {
  const value = Number(spo2);
  if (!value || value <= 0) return { label: "Optional", note: "Enter SpO2 if measured using a pulse oximeter.", tone: "neutral" };
  if (value <= 92) return { label: "Low oxygen reading", note: "Consider urgent medical advice, especially with breathlessness.", tone: "alert" };
  if (value <= 94) return { label: "Needs attention", note: "Recheck and speak to a clinician if it persists or symptoms appear.", tone: "warn" };
  return { label: "Generally reassuring", note: "Interpret along with symptoms and medical history.", tone: "good" };
}

export function calculateBMI(heightCm: string | number, weightKg: string | number) {
  const h = Number(heightCm) / 100;
  const w = Number(weightKg);
  if (!h || !w || h <= 0 || w <= 0) return 0;
  return Number((w / (h * h)).toFixed(1));
}

export function runHealthTokenLogicTests() {
  const tests = [
    ["BMI normal", classifyBMI(22).tone === "good"],
    ["BMI overweight", classifyBMI(27).label === "Overweight range"],
    ["BMI invalid", classifyBMI(0).tone === "neutral"],
    ["BP normal", classifyBP(118, 76).tone === "good"],
    ["BP elevated", classifyBP(125, 75).label === "Elevated BP range"],
    ["BP high", classifyBP(145, 91).tone === "alert"],
    ["SpO2 optional", classifySpO2("").tone === "neutral"],
    ["SpO2 warning", classifySpO2(94).tone === "warn"],
    ["BMI calculation", calculateBMI(170, 70) === 24.2],
    ["BP invalid", classifyBP("", "").tone === "neutral"],
    ["SpO2 good", classifySpO2(97).tone === "good"],
  ];
  return { passed: tests.filter(([, ok]) => ok).length, failed: tests.filter(([, ok]) => !ok).map(([name]) => name), total: tests.length };
}

function toneClass(tone: string) {
  return { good: "border-emerald-200 bg-emerald-50 text-emerald-800", warn: "border-amber-200 bg-amber-50 text-amber-800", alert: "border-red-200 bg-red-50 text-red-800", neutral: "border-slate-200 bg-slate-50 text-slate-700" }[tone || "neutral"];
}

function LogoMark({ compact = false, className = "" }) {
  return (
    <div className={`${compact ? "h-10 w-10" : "h-14 w-14"} ${className}`} aria-hidden="true">
      <svg viewBox="0 0 80 80" className="h-full w-full">
        <circle cx="40" cy="12" r="8" fill="none" stroke={brand.teal} strokeWidth="5" />
        <path d="M14 31 C23 27 30 34 40 41 C50 34 57 27 66 31" fill="none" stroke={brand.teal} strokeWidth="5" strokeLinecap="round" />
        <path d="M14 30 V55 C14 61 18 66 25 68" fill="none" stroke={brand.navy} strokeWidth="5" strokeLinecap="round" />
        <path d="M66 30 V55 C66 61 62 66 55 68" fill="none" stroke={brand.teal} strokeWidth="5" strokeLinecap="round" />
        <path d="M24 63 C30 71 50 71 56 63" fill="none" stroke={brand.teal} strokeWidth="5" strokeLinecap="round" />
        <path d="M40 46 V64 M31 55 H49" stroke={brand.gold} strokeWidth="6" strokeLinecap="round" />
      </svg>
    </div>
  );
}

function FadeIn({ children, className = "" }: { children: React.ReactNode; className?: string }) {
  return <div className={`animate-[fadeInUp_0.7s_ease-out_both] ${className}`}>{children}</div>;
}

function Field({ label, value, onChange, placeholder, type = "number", className = "" }: { label: string; value: string; onChange: (val: string) => void; placeholder?: string; type?: string; className?: string }) {
  return (
    <label className={`text-sm font-medium ${className}`}>
      {label}
      <input type={type} value={value} onChange={(e) => onChange(e.target.value)} placeholder={placeholder} className="mt-2 w-full rounded-2xl border border-slate-200 bg-white px-4 py-3 outline-none transition focus:border-[#00796B] focus:ring-4 focus:ring-[#00796B]/10" />
    </label>
  );
}

function SectionHeader({ eyebrow, title, text }: { eyebrow: string; title: string; text?: string }) {
  return (
    <div className="mx-auto mb-10 max-w-3xl text-center">
      <p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#00796B]">{eyebrow}</p>
      <h2 className="mt-3 font-serif text-4xl font-semibold md:text-5xl">{title}</h2>
      {text && <p className="mt-4 text-lg leading-8 text-slate-600">{text}</p>}
    </div>
  );
}

function PictureCard({ type, title, text }: { type: string; title: string; text: string }) {
  return (
    <div className="overflow-hidden rounded-[1.75rem] border border-slate-200 bg-white shadow-sm">
      <div className="relative h-48 bg-[radial-gradient(circle_at_30%_20%,#DDF7F0,transparent_35%),linear-gradient(135deg,#071D33,#00796B)] p-6 text-white">
        <div className="absolute right-5 top-5 h-20 w-20 rounded-full border border-white/20 bg-white/10" />
        <div className="absolute bottom-4 right-8 h-24 w-24 rounded-[2rem] bg-white/10 backdrop-blur" />
        {type === "doctor" && <IllustrationDoctor />}
        {type === "family" && <IllustrationFamily />}
        {type === "insurance" && <IllustrationInsurance />}
      </div>
      <div className="p-6">
        <h3 className="font-serif text-2xl font-semibold">{title}</h3>
        <p className="mt-3 leading-7 text-slate-600">{text}</p>
      </div>
    </div>
  );
}

function IllustrationDoctor() {
  return <div className="relative z-10 flex h-full items-center"><div className="rounded-3xl bg-white/95 p-5 text-[#071D33] shadow-xl"><SvgIcon name="stethoscope" className="h-12 w-12 text-[#00796B]" /><div className="mt-4 h-2 w-32 rounded bg-slate-200" /><div className="mt-2 h-2 w-20 rounded bg-[#C59B43]/50" /></div></div>;
}
function IllustrationFamily() {
  return <div className="relative z-10 flex h-full items-center"><div className="flex items-end gap-3"><div className="flex h-24 w-24 items-center justify-center rounded-full bg-white/95 text-[#00796B] shadow-xl"><SvgIcon name="family" className="h-12 w-12" /></div><div className="rounded-2xl bg-white/90 px-4 py-3 text-sm font-semibold text-[#071D33]">Family health file</div></div></div>;
}
function IllustrationInsurance() {
  return <div className="relative z-10 flex h-full items-center"><div className="rounded-3xl bg-white/95 p-5 text-[#071D33] shadow-xl"><SvgIcon name="umbrella" className="h-12 w-12 text-[#C59B43]" /><div className="mt-4 text-sm font-semibold">Protection planning</div><div className="mt-2 h-2 w-28 rounded bg-[#00796B]/20" /></div></div>;
}

function FAQItem({ q, a }: { q: string; a: string }) {
  return <details className="group rounded-2xl border border-slate-200 bg-white p-5 shadow-sm"><summary className="cursor-pointer list-none font-semibold text-[#071D33]">{q}<span className="float-right text-[#00796B] group-open:rotate-45">+</span></summary><p className="mt-3 leading-7 text-slate-600">{a}</p></details>;
}

export default function HealthTokenLanding() {
  const [height, setHeight] = useState("170");
  const [weight, setWeight] = useState("70");
  const [sys, setSys] = useState("120");
  const [dia, setDia] = useState("80");
  const [spo2, setSpo2] = useState("97");
  const [showBackToTop, setShowBackToTop] = useState(false);

  useEffect(() => {
    const handleScroll = () => {
      setShowBackToTop(window.scrollY > 400);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  const scrollToTop = () => {
    window.scrollTo({ top: 0, behavior: "smooth" });
  };

  const bmi = useMemo(() => calculateBMI(height, weight), [height, weight]);
  const bmiStatus = classifyBMI(bmi);
  const bpStatus = classifyBP(sys, dia);
  const spo2Status = classifySpO2(spo2);

  return (
    <main className="min-h-screen bg-[#F8F6F0] text-[#071D33]">
      <style>{`@keyframes fadeInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }`}</style>
      <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(FAQ_SCHEMA) }} />
      <section className="relative overflow-hidden border-b border-[#D9C9A7]/50 bg-[radial-gradient(circle_at_top_left,_#EAF8F5,_transparent_35%),linear-gradient(135deg,#FFFFFF_0%,#F8F6F0_55%,#ECF7F4_100%)]">
        <div className="absolute right-[-10rem] top-[-12rem] h-[32rem] w-[32rem] rounded-full bg-[#009B86]/10 blur-3xl" />
        <div className="relative mx-auto max-w-7xl px-6 py-5">
          <nav className="flex items-center justify-between">
            <a href="/" className="flex items-center" aria-label="HealthToken home">
              <img
                src="/brand/healthtoken-logo.svg"
                alt="HealthToken"
                className="h-12 w-auto md:h-14"
              />
            </a>
            <div className="hidden items-center gap-6 text-sm font-medium text-slate-600 md:flex"><a href="#how-it-helps">How it helps</a><a href="#insurance">Insurance</a><a href="#faq">FAQ</a><a href="#early-access" className="rounded-full bg-[#071D33] px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-slate-900/10 transition hover:bg-[#0B2B4A]">Join waitlist</a></div>
          </nav>
          <div className="grid gap-10 py-16 lg:grid-cols-[1.05fr_0.95fr] lg:items-center lg:py-24">
            <FadeIn>
              <div className="mb-5 inline-flex items-center gap-2 rounded-full border border-[#C59B43]/35 bg-white/70 px-4 py-2 text-sm font-medium text-[#70531B] backdrop-blur"><SvgIcon name="shield" className="h-4 w-4" /> ABHA-ready healthcare identity platform</div>
              <h1 className="max-w-3xl font-serif text-5xl font-semibold leading-[1.05] tracking-tight md:text-7xl">Health records, insurance readiness and care benefits in one guided platform.</h1>
              <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600">HealthToken helps clinics, patients and families organize health identity, basic wellness data, documents, insurance guidance and long-term benefits with privacy-first workflows.</p>
              <div className="mt-8 flex flex-col gap-3 sm:flex-row"><a href="#early-access" className="inline-flex items-center justify-center gap-2 rounded-full bg-[#00796B] px-6 py-3 font-semibold text-white shadow-xl shadow-[#00796B]/20 transition hover:bg-[#00665B]">Request early access <SvgIcon name="arrow" className="h-4 w-4" /></a><a href="#vital-check" className="inline-flex items-center justify-center rounded-full border border-slate-200 bg-white px-6 py-3 font-semibold text-[#071D33] transition hover:border-[#C59B43]">Try wellness checker</a></div>
            </FadeIn>
            <FadeIn className="rounded-[2rem] border border-white/80 bg-white/75 p-5 shadow-2xl shadow-slate-900/10 backdrop-blur">
              <div className="rounded-[1.5rem] bg-[#071D33] p-6 text-white">
                <div className="flex items-center justify-between"><div><p className="text-sm uppercase tracking-[0.28em] text-[#C59B43]">Product Preview</p><h2 className="mt-2 font-serif text-3xl font-semibold">Your care timeline</h2></div><img src="/brand/healthtoken-icon.svg" alt="" aria-hidden="true" className="h-10 w-10" /></div>
                <div className="mt-8 grid gap-3 sm:grid-cols-2">{[["user", "Patient profile", "Basic health identity"], ["clipboard", "Clinic intake", "Structured onboarding"], ["lock", "Consent first", "Privacy-aware workflows"], ["wallet", "Benefits layer", "Insurance & care support"]].map(([icon, title, text]) => <div key={title} className="rounded-2xl border border-white/10 bg-white/10 p-4"><SvgIcon name={icon as "user" | "clipboard" | "lock" | "wallet"} className="h-5 w-5 text-[#C59B43]" /><div className="mt-3 font-semibold">{title}</div><div className="mt-1 text-sm text-slate-300">{text}</div></div>)}</div>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>
      <section id="how-it-helps" className="mx-auto max-w-7xl px-6 py-16">
        <SectionHeader eyebrow="How it helps" title="Built for every health journey stakeholder" text="The first version can work as a trust-building landing page, lead capture layer, wellness checker and future-ready product foundation." />
        <div className="grid gap-5 md:grid-cols-3">{[["stethoscope", "Doctors & clinics", "Collect patient interest, intake details, vitals and consent signals before a full EMR or ABDM integration rollout."], ["family", "Patients & families", "Keep important health, insurance and document needs in one guided journey instead of scattered files and messages."], ["activity", "Operations & partners", "Capture qualified leads, identify insurance gaps, map service needs and prepare workflows for admin follow-up."]].map(([icon, title, text]) => <div key={title} className="rounded-[1.5rem] border border-slate-200 bg-white p-6 shadow-sm transition hover:-translate-y-1 hover:shadow-xl hover:shadow-slate-900/5"><div className="mb-5 flex h-12 w-12 items-center justify-center rounded-2xl bg-[#EAF8F5] text-[#00796B]"><SvgIcon name={icon as "stethoscope" | "family" | "activity"} className="h-6 w-6" /></div><h3 className="font-serif text-2xl font-semibold">{title}</h3><p className="mt-3 leading-7 text-slate-600">{text}</p></div>)}</div>
      </section>
      <section className="mx-auto max-w-7xl px-6 pb-16">
        <div className="grid gap-6 lg:grid-cols-3"><PictureCard type="doctor" title="Cleaner doctor visits" text="Patients arrive with basic health details, concerns and document readiness, helping clinics reduce registration friction." /><PictureCard type="family" title="Family-first health planning" text="The platform can help families remember health records, renewals, follow-ups and key benefit opportunities over time." /><PictureCard type="insurance" title="Protection beyond treatment" text="Insurance guidance helps users think about medical costs, life risks, dependents and long-term financial stability before a crisis." /></div>
      </section>
      <section id="insurance" className="bg-white/70 py-16">
        <div className="mx-auto max-w-7xl px-6">
          <SectionHeader eyebrow="Insurance and stability" title="Why health and life insurance matter" text="A health event can affect treatment choices, family savings and business continuity. HealthToken can become a guided bridge between health records, insurance readiness and benefit management." />
          <div className="grid gap-5 lg:grid-cols-4">{[["umbrella", "Health cost protection", "Health insurance can reduce the shock of hospitalization and major treatment expenses."], ["heart", "Life risk planning", "Life insurance supports family stability when income continuity is affected by an unexpected event."], ["file", "Documents in order", "Keep policy, nominee, renewal, claim and medical documents easier to track."], ["badge", "Benefit discovery", "Help users understand eligible benefits, follow-up needs and renewal reminders over the long term."]].map(([icon, title, text]) => <div key={title} className="rounded-[1.5rem] border border-slate-200 bg-white p-6 shadow-sm"><div className="mb-4 flex h-11 w-11 items-center justify-center rounded-2xl bg-[#F8F6F0] text-[#C59B43]"><SvgIcon name={icon as "umbrella" | "heart" | "file" | "badge"} className="h-6 w-6" /></div><h3 className="font-serif text-xl font-semibold">{title}</h3><p className="mt-3 text-sm leading-6 text-slate-600">{text}</p></div>)}</div>
        </div>
      </section>
      <section className="mx-auto max-w-7xl px-6 py-16">
        <SectionHeader eyebrow="Public health direction" title="Aligned with India’s digital-health movement" text="These are public-domain policy directions from official government health initiatives. HealthToken should present them as context, not as affiliation or endorsement." />
        <div className="grid gap-5 md:grid-cols-2">{GOVT_HEALTH_POINTS.map((item) => <div key={item.title} className="rounded-[1.5rem] border border-slate-200 bg-white p-6 shadow-sm"><p className="text-xs font-semibold uppercase tracking-[0.24em] text-[#C59B43]">{item.source}</p><h3 className="mt-3 font-serif text-2xl font-semibold">{item.title}</h3><p className="mt-3 leading-7 text-slate-600">{item.text}</p></div>)}</div>
        <p className="mt-5 rounded-2xl border border-slate-200 bg-[#F8F6F0] p-4 text-sm leading-6 text-slate-600">HealthToken is an independent platform. ABHA, ABDM, Ayushman Bharat and PM-JAY are Government of India/NHA initiatives. This page uses public-health context for awareness and does not claim official government partnership.</p>
      </section>
      <section className="bg-[#071D33] py-16 text-white">
        <div className="mx-auto max-w-7xl px-6">
          <SectionHeader eyebrow="Functionality" title="Useful modules for multiple consumer groups" text="Start small with landing and lead capture, then expand into admin workflows, record readiness and insurance-benefit support." />
          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">{[["Patient intake forms", "Collect contact, demographics, concern type, preferred doctor and follow-up needs."], ["Vitals awareness tool", "BMI, BP and SpO2 awareness summaries for visitor engagement."], ["Insurance readiness profile", "Understand existing policies, coverage gaps, dependents and renewal dates."], ["Document vault roadmap", "Prepare for policy, report, prescription and ID document management."], ["Clinic lead dashboard", "Admin team can review doctors, patients, partners and integration enquiries."], ["ABHA/ABDM roadmap", "Future-ready architecture for consent-led digital health record journeys."], ["Renewal reminders", "Help families avoid missed policy, appointment and follow-up timelines."], ["Benefits guidance", "Support eligible benefit discovery, claim preparation and service coordination."], ["Partner onboarding", "Create a path for clinics, advisors, labs and healthcare partners."]].map(([title, text]) => <div key={title} className="rounded-2xl border border-white/10 bg-white/10 p-5"><h3 className="font-semibold text-white">{title}</h3><p className="mt-2 text-sm leading-6 text-slate-300">{text}</p></div>)}</div>
        </div>
      </section>
      <section id="vital-check" className="mx-auto max-w-7xl px-6 py-16">
        <div className="overflow-hidden rounded-[2rem] border border-slate-200 bg-white shadow-xl shadow-slate-900/5">
          <div className="grid gap-0 lg:grid-cols-[0.9fr_1.1fr]">
            <div className="bg-[radial-gradient(circle_at_top_left,#EAF8F5,transparent_35%),#FFFFFF] p-6 lg:p-8">
              <p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#00796B]">
                Guided wellness check
              </p>
              <h2 className="mt-3 font-serif text-4xl font-semibold">
                Check what you know. Skip what you don't.
              </h2>
              <p className="mt-4 leading-7 text-slate-600">
                Start with height and weight. If you have a recent BP machine or pulse oximeter reading,
                add those too. If not, leave them as they are or clear them.
              </p>
              <div className="mt-6 grid gap-3">
                <div className="rounded-2xl border border-emerald-100 bg-emerald-50 p-4">
                  <div className="font-semibold text-emerald-900">Easy inputs</div>
                  <p className="mt-1 text-sm leading-6 text-emerald-800">
                    Height and weight are enough to calculate BMI.
                  </p>
                </div>
                <div className="rounded-2xl border border-amber-100 bg-amber-50 p-4">
                  <div className="font-semibold text-amber-900">Optional device readings</div>
                  <p className="mt-1 text-sm leading-6 text-amber-800">
                    BP needs a blood pressure monitor. SpO2 needs a pulse oximeter. Do not guess these values.
                  </p>
                </div>
                <div className="rounded-2xl border border-red-100 bg-red-50 p-4">
                  <div className="font-semibold text-red-900">Emergency reminder</div>
                  <p className="mt-1 text-sm leading-6 text-red-800">
                    Chest pain, severe breathlessness, fainting, confusion, blue lips, or very low oxygen readings
                    should be handled urgently by a qualified medical professional.
                  </p>
                </div>
                <div className="rounded-2xl border border-[#C59B43]/30 bg-[#FFF8E6] p-4">
                  <div className="flex items-start gap-3">
                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-2xl bg-white text-[#C59B43] shadow-sm">
                      <SvgIcon name="heart" className="h-5 w-5" />
                    </div>
                    <div>
                      <div className="font-semibold text-[#071D33]">Daily health tip</div>
                      <p className="mt-1 text-sm leading-6 text-slate-700">
                        Start with one small habit today: drink enough water, take a 10-minute walk,
                        sleep on time, or check one pending health document.
                      </p>
                      <p className="mt-2 text-xs leading-5 text-slate-500">
                        Placeholder: later this can rotate daily tips from your admin panel or content database.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div className="bg-[#F8F6F0] p-5 lg:p-8">
              <div className="rounded-[1.5rem] bg-white p-5 shadow-sm">
                <div className="mb-5 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                  <div>
                    <h3 className="font-serif text-2xl font-semibold">Your inputs</h3>
                    <p className="text-sm text-slate-500">
                      Use recent measured values. Leave optional fields blank if unavailable.
                    </p>
                  </div>
                  <button
                    type="button"
                    onClick={() => {
                      setSys("");
                      setDia("");
                      setSpo2("");
                    }}
                    className="rounded-full border border-slate-200 px-4 py-2 text-sm font-semibold text-slate-700 transition hover:border-[#00796B] hover:text-[#00796B]"
                  >
                    I don't have BP / SpO2
                  </button>
                </div>
                <div className="grid gap-4 sm:grid-cols-2">
                  <div>
                    <Field label="Height (cm)" value={height} onChange={setHeight} />
                    <p className="mt-2 text-xs leading-5 text-slate-500">
                      Example: 170 cm. You can check this from a previous medical record, gym record, or measuring tape.
                    </p>
                  </div>
                  <div>
                    <Field label="Weight (kg)" value={weight} onChange={setWeight} />
                    <p className="mt-2 text-xs leading-5 text-slate-500">
                      Example: 70 kg. Use a recent weighing scale reading.
                    </p>
                  </div>
                  <div>
                    <Field label="Systolic BP / upper number from BP machine" value={sys} onChange={setSys} />
                    <p className="mt-2 text-xs leading-5 text-slate-500">
                      This is the first or top number on a BP monitor. Example: 120 in 120/80.
                    </p>
                  </div>
                  <div>
                    <Field label="Diastolic BP / lower number from BP machine" value={dia} onChange={setDia} />
                    <p className="mt-2 text-xs leading-5 text-slate-500">
                      This is the second or bottom number on a BP monitor. Example: 80 in 120/80.
                    </p>
                  </div>
                  <div className="sm:col-span-2">
                    <Field label="SpO2 % / oxygen level optional" value={spo2} onChange={setSpo2} />
                    <p className="mt-2 text-xs leading-5 text-slate-500">
                      This comes from a pulse oximeter finger device. Most people will not know this without a device.
                    </p>
                  </div>
                </div>
                <div className="mt-5 grid gap-3 sm:grid-cols-3">
                  <div className={`rounded-2xl border p-4 ${toneClass(bmiStatus.tone)}`}>
                    <div className="text-xs font-semibold uppercase tracking-widest">BMI</div>
                    <div className="mt-1 text-2xl font-bold">{bmi || "--"}</div>
                    <div className="mt-1 text-sm">{bmiStatus.label}</div>
                    <p className="mt-3 text-xs leading-5 opacity-80">
                      Based on height and weight only.
                    </p>
                  </div>
                  <div className={`rounded-2xl border p-4 ${toneClass(bpStatus.tone)}`}>
                    <div className="text-xs font-semibold uppercase tracking-widest">BP</div>
                    <div className="mt-1 text-lg font-bold">{bpStatus.label}</div>
                    <div className="mt-1 text-xs leading-5">{bpStatus.note}</div>
                  </div>
                  <div className={`rounded-2xl border p-4 ${toneClass(spo2Status.tone)}`}>
                    <div className="text-xs font-semibold uppercase tracking-widest">SpO2</div>
                    <div className="mt-1 text-lg font-bold">{spo2Status.label}</div>
                    <div className="mt-1 text-xs leading-5">{spo2Status.note}</div>
                  </div>
                </div>
                <div className="mt-5 grid gap-3 rounded-2xl border border-slate-200 bg-slate-50 p-4 text-sm leading-6 text-slate-600 md:grid-cols-3">
                  <div>
                    <div className="font-semibold text-[#071D33]">BMI source</div>
                    <p>Adult BMI is calculated from height and weight.</p>
                  </div>
                  <div>
                    <div className="font-semibold text-[#071D33]">BP source</div>
                    <p>BP values come from a BP monitor or clinic reading.</p>
                  </div>
                  <div>
                    <div className="font-semibold text-[#071D33]">SpO2 source</div>
                    <p>SpO2 comes from a pulse oximeter, usually clipped on a finger.</p>
                  </div>
                </div>
                <div className="mt-4 rounded-2xl border border-[#00796B]/15 bg-[#F1FBF8] p-4">
                  <div className="flex items-start justify-between gap-4">
                    <div>
                      <div className="font-semibold text-[#071D33]">Helpful ways to get BP readings</div>
                      <p className="mt-1 text-sm leading-6 text-slate-600">
                        Use a validated automatic upper-arm BP monitor. Some connected monitors can sync readings to their own apps or to health data platforms.
                      </p>
                    </div>
                    <span className="rounded-full bg-white px-3 py-1 text-xs font-semibold text-[#00796B] shadow-sm">
                      Optional
                    </span>
                  </div>
                  <div className="mt-4 grid gap-3 md:grid-cols-2">
                    <a href="https://www.validatebp.org/" target="_blank" rel="noopener noreferrer" className="rounded-2xl border border-slate-200 bg-white p-4 transition hover:border-[#00796B]">
                      <div className="font-semibold text-[#071D33]">ValidateBP</div>
                      <p className="mt-1 text-xs leading-5 text-slate-500">Check clinically validated blood pressure devices.</p>
                    </a>
                    <a href="https://www.stridebp.org/bp-monitors/" target="_blank" rel="noopener noreferrer" className="rounded-2xl border border-slate-200 bg-white p-4 transition hover:border-[#00796B]">
                      <div className="font-semibold text-[#071D33]">STRIDE BP</div>
                      <p className="mt-1 text-xs leading-5 text-slate-500">Find validated BP monitors listed by an international scientific initiative.</p>
                    </a>
                    <a href="https://omronhealthcare.com/" target="_blank" rel="noopener noreferrer" className="rounded-2xl border border-slate-200 bg-white p-4 transition hover:border-[#00796B]">
                      <div className="font-semibold text-[#071D33]">Connected BP monitors</div>
                      <p className="mt-1 text-xs leading-5 text-slate-500">Some BP monitors, such as OMRON Connect-compatible devices, can sync readings to an app.</p>
                    </a>
                    <a href="https://play.google.com/store/apps/details?id=com.google.android.apps.healthdata" target="_blank" rel="noopener noreferrer" className="rounded-2xl border border-slate-200 bg-white p-4 transition hover:border-[#00796B]">
                      <div className="font-semibold text-[#071D33]">Health Connect</div>
                      <p className="mt-1 text-xs leading-5 text-slate-500">Android users can manage sharing of supported health data between apps.</p>
                    </a>
                  </div>
                  <p className="mt-4 text-xs leading-5 text-slate-500">
                    HealthToken does not endorse, certify, or sell these third-party apps/devices. BP values should come from a validated device or clinic reading, not from guesswork.
                  </p>
                </div>
                <p className="mt-4 text-xs leading-5 text-slate-500">
                  This tool is for awareness only. It does not diagnose, prescribe, or replace medical advice.
                  Results should be interpreted with symptoms, age, medical history, pregnancy status, medication,
                  and clinician guidance.
                </p>
              </div>
            </div>
          </div>
        </div>
      </section>
      <section id="faq" className="mx-auto max-w-5xl px-6 pb-16">
        <SectionHeader eyebrow="FAQ" title="Important questions before launch" />
        <div className="grid gap-4"><FAQItem q="Is HealthToken a doctor consultation platform?" a="The first version is positioned as a health identity, intake, wellness-awareness and insurance-readiness platform. Doctor consultation or EMR modules can be added later." /><FAQItem q="Will HealthToken create ABHA or access government health records?" a="That should be added only after official ABDM sandbox and production onboarding. The current landing page can collect interest and explain the roadmap." /><FAQItem q="Can patients store insurance details?" a="Yes, the product roadmap can include policy details, nominee information, renewal dates, claim documents and benefit reminders." /><FAQItem q="Can doctors use it before full ABDM integration?" a="Yes. Clinics can use the early version for enquiries, patient intake, vitals capture and follow-up coordination while deeper integrations are built." /><FAQItem q="Is the wellness checker enough for medical advice?" a="No. It is only an awareness tool based on self-entered values. It should always direct users to qualified medical professionals for diagnosis, treatment and emergency symptoms." /><FAQItem q="How will HealthToken help long-term stability?" a="By keeping health records, insurance readiness, renewal reminders, benefit guidance and family health planning organized in one journey." /></div>
      </section>
      <section id="early-access" className="mx-auto max-w-7xl px-6 pb-20">
        <div className="grid overflow-hidden rounded-[2rem] bg-[#071D33] lg:grid-cols-[0.9fr_1.1fr]"><div className="p-8 text-white lg:p-10"><p className="text-sm font-semibold uppercase tracking-[0.28em] text-[#C59B43]">Early access</p><h2 className="mt-3 font-serif text-4xl font-semibold">Start collecting doctor, patient and insurance-interest leads now.</h2><p className="mt-4 leading-7 text-slate-300">This page can validate HealthToken while ABHA/ABDM integration, admin dashboards, document vault, insurance-benefit workflows and clinic onboarding modules are being built.</p></div><form className="bg-white p-6 lg:p-8" onSubmit={(e) => e.preventDefault()}><div className="grid gap-4 sm:grid-cols-2"><input className="rounded-2xl border border-slate-200 px-4 py-3 outline-none transition focus:border-[#00796B] focus:ring-4 focus:ring-[#00796B]/10" placeholder="Full name" /><input className="rounded-2xl border border-slate-200 px-4 py-3 outline-none transition focus:border-[#00796B] focus:ring-4 focus:ring-[#00796B]/10" placeholder="Mobile number" /><input className="rounded-2xl border border-slate-200 px-4 py-3 outline-none transition focus:border-[#00796B] focus:ring-4 focus:ring-[#00796B]/10" placeholder="Email address" /><select className="rounded-2xl border border-slate-200 px-4 py-3 outline-none transition focus:border-[#00796B] focus:ring-4 focus:ring-[#00796B]/10"><option>I am a doctor / clinic owner</option><option>I am a patient / family member</option><option>I need health or life insurance guidance</option><option>I am a healthcare partner</option><option>I want ABDM/ABHA integration help</option></select><textarea className="min-h-28 rounded-2xl border border-slate-200 px-4 py-3 outline-none transition focus:border-[#00796B] focus:ring-4 focus:ring-[#00796B]/10 sm:col-span-2" placeholder="Tell us what you need" /></div><button className="mt-5 inline-flex w-full items-center justify-center gap-2 rounded-full bg-[#00796B] px-6 py-3 font-semibold text-white transition hover:bg-[#00665B]">Submit interest <SvgIcon name="arrow" className="h-4 w-4" /></button><p className="mt-4 text-xs leading-5 text-slate-500">By submitting, the visitor agrees to be contacted about HealthToken. Add your privacy policy, consent text and data-retention policy before production launch.</p></form></div>
      </section>
      <footer className="border-t border-[#D9C9A7]/60 bg-[#071D33] text-white">
        <div className="mx-auto flex max-w-7xl flex-col gap-4 px-6 py-8 md:flex-row md:items-center md:justify-between">
          <a href="/" className="flex items-center" aria-label="HealthToken home">
            <img
              src="/brand/healthtoken-logo-light.svg"
              alt="HealthToken"
              className="h-12 w-auto md:h-14"
            />
          </a>
          <div className="flex flex-wrap gap-x-6 gap-y-2 text-sm text-slate-300">
            <a href="#how-it-helps" className="transition hover:text-white">How it helps</a>
            <a href="#insurance" className="transition hover:text-white">Insurance</a>
            <a href="#vital-check" className="transition hover:text-white">Wellness checker</a>
            <a href="#faq" className="transition hover:text-white">FAQ</a>
            <a href="#early-access" className="transition hover:text-white">Contact</a>
          </div>
        </div>
        <div className="border-t border-white/10 bg-[#041525]">
          <div className="mx-auto flex max-w-7xl flex-col gap-3 px-6 py-4 text-xs leading-6 text-slate-400 md:flex-row md:items-center md:justify-between">
            <p>© {new Date().getFullYear()} HealthToken. All rights reserved.</p>
            <p>HealthToken is an independent platform. ABHA, ABDM, Ayushman Bharat and PM-JAY are Government of India/NHA initiatives.</p>
          </div>
        </div>
      </footer>
      {showBackToTop && (
        <button
          onClick={scrollToTop}
          className="fixed bottom-6 right-6 z-50 flex h-12 w-12 items-center justify-center rounded-full bg-[#00796B] text-white shadow-lg shadow-slate-900/20 transition hover:bg-[#00665B] hover:scale-110"
          aria-label="Back to top"
        >
          <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth="2.5">
            <path strokeLinecap="round" strokeLinejoin="round" d="M5 15l7-7 7 7" />
          </svg>
        </button>
      )}
    </main>
  );
}