export default function KRMCareLandingPage() {
  return (
    <div className="min-h-screen bg-white text-slate-900 selection:bg-sky-100">
      <style>{`
        html { scroll-behavior: smooth; }
        @keyframes floatGlow {
          0% { transform: translate3d(0, 0, 0); }
          50% { transform: translate3d(0, -10px, 0); }
          100% { transform: translate3d(0, 0, 0); }
        }
        .float-glow {
          animation: floatGlow 7s ease-in-out infinite;
        }
      `}</style>

      <header className="sticky top-0 z-50 border-b border-slate-200/80 bg-white/90 backdrop-blur">
        <div className="mx-auto flex max-w-7xl items-center justify-between px-6 py-4 lg:px-8">
          <a href="#top" className="text-lg font-semibold tracking-tight text-slate-900">
            KRM Care AB
          </a>

          <nav className="hidden items-center gap-8 text-sm text-slate-600 md:flex">
            <a href="#solution" className="transition hover:text-slate-900">Solution</a>
            <a href="#how" className="transition hover:text-slate-900">How it works</a>
            <a href="#clinics" className="transition hover:text-slate-900">For Clinics</a>
            <a href="#investors" className="transition hover:text-slate-900">For Investors</a>
            <a href="#contact" className="transition hover:text-slate-900">Contact</a>
          </nav>
        </div>
      </header>

      <main id="top">
        <section className="relative overflow-hidden">
          <div className="absolute inset-0 bg-gradient-to-br from-sky-50 via-white to-slate-100" />
          <div className="absolute -left-28 top-20 h-72 w-72 rounded-full bg-sky-100/70 blur-3xl" />
          <div className="absolute right-0 top-0 h-96 w-96 rounded-full bg-cyan-100/50 blur-3xl" />

          <div className="relative mx-auto grid max-w-7xl items-center gap-14 px-6 py-20 lg:grid-cols-2 lg:px-8 lg:py-28">
            <div>
              <div className="mb-4 inline-flex items-center rounded-full border border-sky-200 bg-white/80 px-4 py-1.5 text-sm font-medium text-sky-800 shadow-sm">
                Digital chronic disease care for modern primary care
              </div>

              <h1 className="max-w-3xl text-4xl font-semibold leading-tight tracking-tight text-slate-950 sm:text-5xl lg:text-6xl">
                Smarter follow-up for chronic patients — without overloading the clinic.
              </h1>

              <p className="mt-6 max-w-2xl text-lg leading-8 text-slate-600">
                KRM Care AB helps primary care clinics monitor patients remotely, detect deterioration earlier, and intervene faster through structured digital follow-up.
              </p>

              <div className="mt-8 flex flex-col gap-4 sm:flex-row">
                <a
                  href="#contact"
                  className="inline-flex items-center justify-center rounded-2xl bg-slate-900 px-6 py-3 text-sm font-medium text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-slate-800"
                >
                  Book a meeting
                </a>
                <a
                  href="#investors"
                  className="inline-flex items-center justify-center rounded-2xl border border-slate-300 bg-white px-6 py-3 text-sm font-medium text-slate-700 transition hover:-translate-y-0.5 hover:border-slate-400 hover:text-slate-900"
                >
                  View investment case
                </a>
              </div>

              <div className="mt-10 grid max-w-xl grid-cols-1 gap-4 sm:grid-cols-3">
                <div className="rounded-2xl border border-slate-200 bg-white/90 p-4 shadow-sm">
                  <div className="text-2xl font-semibold text-slate-950">Remote</div>
                  <div className="mt-1 text-sm text-slate-600">Daily monitoring with low friction</div>
                </div>
                <div className="rounded-2xl border border-slate-200 bg-white/90 p-4 shadow-sm">
                  <div className="text-2xl font-semibold text-slate-950">Early</div>
                  <div className="mt-1 text-sm text-slate-600">Identify changes before complications grow</div>
                </div>
                <div className="rounded-2xl border border-slate-200 bg-white/90 p-4 shadow-sm">
                  <div className="text-2xl font-semibold text-slate-950">Scalable</div>
                  <div className="mt-1 text-sm text-slate-600">Built for clinics, teams, and growth</div>
                </div>
              </div>
            </div>

            <div className="relative">
              <div className="float-glow relative mx-auto max-w-xl rounded-[2rem] border border-slate-200 bg-white p-6 shadow-[0_30px_80px_rgba(15,23,42,0.10)]">
                <div className="mb-6 flex items-center justify-between">
                  <div>
                    <p className="text-sm font-medium text-slate-500">KRM Care Dashboard</p>
                    <h2 className="text-xl font-semibold text-slate-950">Patient monitoring overview</h2>
                  </div>
                  <div className="rounded-full bg-emerald-50 px-3 py-1 text-xs font-semibold text-emerald-700">
                    Live pilot
                  </div>
                </div>

                <div className="grid gap-4">
                  <div className="rounded-2xl bg-slate-50 p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <p className="text-sm text-slate-500">Average response window</p>
                        <p className="mt-1 text-3xl font-semibold text-slate-950">&lt; 24h</p>
                      </div>
                      <div className="rounded-2xl bg-white px-3 py-2 text-sm font-medium text-sky-700 shadow-sm">
                        Active follow-up
                      </div>
                    </div>
                  </div>

                  <div className="grid gap-4 sm:grid-cols-2">
                    <div className="rounded-2xl border border-slate-200 p-4">
                      <p className="text-sm text-slate-500">Monitored parameters</p>
                      <ul className="mt-3 space-y-2 text-sm text-slate-700">
                        <li>• Blood pressure</li>
                        <li>• Glucose</li>
                        <li>• Weight</li>
                        <li>• Symptoms</li>
                      </ul>
                    </div>
                    <div className="rounded-2xl border border-slate-200 p-4">
                      <p className="text-sm text-slate-500">Clinical value</p>
                      <ul className="mt-3 space-y-2 text-sm text-slate-700">
                        <li>• Earlier detection</li>
                        <li>• Better continuity</li>
                        <li>• More structured care</li>
                        <li>• Less reactive follow-up</li>
                      </ul>
                    </div>
                  </div>

                  <div className="rounded-2xl bg-gradient-to-r from-slate-900 to-sky-900 p-5 text-white">
                    <p className="text-sm text-sky-100">Pilot status</p>
                    <p className="mt-2 text-lg font-medium">
                      Selected patients with elevated HbA1c are currently being monitored with structured daily follow-up.
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="mx-auto max-w-7xl px-6 py-20 lg:px-8" id="solution">
          <div className="max-w-3xl">
            <p className="text-sm font-semibold uppercase tracking-[0.18em] text-sky-700">What we do</p>
            <h2 className="mt-3 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">
              A focused digital layer for chronic disease management.
            </h2>
            <p className="mt-4 text-lg text-slate-600">
              We combine remote monitoring, risk-based follow-up, and practical clinical workflows to support better outcomes in primary care.
            </p>
          </div>

          <div className="mt-12 grid gap-6 md:grid-cols-3">
            {[
              {
                title: 'Remote Monitoring',
                text: 'Patients report data such as blood pressure, glucose, weight, and symptoms through a simple structured process.',
              },
              {
                title: 'Smart Alerts',
                text: 'Patterns and deviations are identified early to support timely review and escalation when needed.',
              },
              {
                title: 'Clinical Follow-up',
                text: 'Nurses and physicians can intervene earlier instead of waiting until deterioration becomes more serious.',
              },
            ].map((item) => (
              <div key={item.title} className="rounded-[1.75rem] border border-slate-200 bg-white p-7 shadow-sm transition hover:-translate-y-1 hover:shadow-md">
                <div className="mb-4 h-12 w-12 rounded-2xl bg-sky-50" />
                <h3 className="text-xl font-semibold text-slate-950">{item.title}</h3>
                <p className="mt-3 leading-7 text-slate-600">{item.text}</p>
              </div>
            ))}
          </div>
        </section>

        <section className="bg-slate-50 py-20">
          <div className="mx-auto grid max-w-7xl gap-8 px-6 lg:grid-cols-2 lg:px-8">
            <div className="rounded-[2rem] bg-white p-8 shadow-sm">
              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-rose-700">The problem</p>
              <h3 className="mt-3 text-3xl font-semibold tracking-tight text-slate-950">Primary care is overloaded.</h3>
              <ul className="mt-6 space-y-4 text-slate-600">
                <li>• Chronic patients are often monitored too infrequently.</li>
                <li>• Deterioration may be discovered late.</li>
                <li>• Follow-up is often reactive rather than proactive.</li>
                <li>• Clinical time is consumed by fragmentation and missed signals.</li>
              </ul>
            </div>

            <div className="rounded-[2rem] bg-slate-900 p-8 text-white shadow-sm">
              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-sky-200">Our solution</p>
              <h3 className="mt-3 text-3xl font-semibold tracking-tight">Continuous monitoring with early intervention.</h3>
              <ul className="mt-6 space-y-4 text-slate-200">
                <li>• Structured digital follow-up between visits.</li>
                <li>• Earlier identification of risk patterns.</li>
                <li>• Faster, more targeted clinical action.</li>
                <li>• Better continuity for both staff and patients.</li>
              </ul>
            </div>
          </div>
        </section>

        <section id="how" className="mx-auto max-w-7xl px-6 py-20 lg:px-8">
          <div className="max-w-2xl">
            <p className="text-sm font-semibold uppercase tracking-[0.18em] text-sky-700">How it works</p>
            <h2 className="mt-3 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">
              Simple for patients. Structured for clinicians.
            </h2>
          </div>

          <div className="mt-12 grid gap-6 md:grid-cols-3">
            {[
              ['01', 'Patient reports data', 'Daily or scheduled measurements are entered in a simple, repeatable format.'],
              ['02', 'System reviews trends', 'Signals, patterns, and deviations are surfaced for structured review.'],
              ['03', 'Clinic intervenes early', 'A nurse or physician can follow up before the situation escalates.'],
            ].map(([num, title, text]) => (
              <div key={num} className="rounded-[1.75rem] border border-slate-200 p-7 shadow-sm">
                <div className="text-sm font-semibold text-sky-700">{num}</div>
                <h3 className="mt-4 text-xl font-semibold text-slate-950">{title}</h3>
                <p className="mt-3 leading-7 text-slate-600">{text}</p>
              </div>
            ))}
          </div>
        </section>

        <section className="bg-gradient-to-b from-white to-sky-50 py-20">
          <div className="mx-auto max-w-7xl px-6 lg:px-8">
            <div className="rounded-[2rem] border border-sky-100 bg-white p-8 shadow-sm lg:p-10">
              <div className="grid gap-10 lg:grid-cols-[1.3fr_0.7fr] lg:items-end">
                <div>
                  <p className="text-sm font-semibold uppercase tracking-[0.18em] text-sky-700">Pilot</p>
                  <h2 className="mt-3 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">
                    Initial traction built from real primary care experience.
                  </h2>
                  <p className="mt-4 max-w-3xl text-lg leading-8 text-slate-600">
                    KRM Care is being shaped around real workflow needs in chronic care, starting with selected patients with elevated HbA1c and structured follow-up.
                  </p>
                </div>
                <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-1">
                  <div className="rounded-2xl bg-slate-50 p-5">
                    <div className="text-sm text-slate-500">Current pilot</div>
                    <div className="mt-2 text-2xl font-semibold text-slate-950">Selected patients enrolled</div>
                  </div>
                  <div className="rounded-2xl bg-slate-50 p-5">
                    <div className="text-sm text-slate-500">Clinical range</div>
                    <div className="mt-2 text-2xl font-semibold text-slate-950">HbA1c 75–82 mmol/mol</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="clinics" className="mx-auto max-w-7xl px-6 py-20 lg:px-8">
          <div className="grid gap-10 lg:grid-cols-2 lg:items-start">
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-sky-700">For clinics</p>
              <h2 className="mt-3 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">
                A practical model for stronger follow-up without adding unnecessary complexity.
              </h2>
            </div>
            <div className="grid gap-4">
              {[
                'Improve continuity for patients with chronic disease',
                'Reduce avoidable deterioration and delayed response',
                'Support a more proactive care model',
                'Create a clearer structure for follow-up and escalation',
              ].map((item) => (
                <div key={item} className="rounded-2xl border border-slate-200 bg-white p-5 shadow-sm">
                  <p className="text-slate-700">{item}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section id="investors" className="bg-slate-950 py-20 text-white">
          <div className="mx-auto max-w-7xl px-6 lg:px-8">
            <div className="max-w-3xl">
              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-sky-300">For investors</p>
              <h2 className="mt-3 text-3xl font-semibold tracking-tight sm:text-4xl">
                Built for a healthcare system that needs scalable follow-up.
              </h2>
              <p className="mt-4 text-lg leading-8 text-slate-300">
                KRM Care targets a clear structural problem in primary care through a focused digital service model with room for scalable deployment.
              </p>
            </div>

            <div className="mt-12 grid gap-6 md:grid-cols-2 xl:grid-cols-4">
              {[
                ['Scalable model', 'A repeatable framework for chronic care follow-up.'],
                ['Operational leverage', 'Digital workflows reduce dependence on fragmented manual tracking.'],
                ['Clear market need', 'Chronic disease monitoring remains a major pressure point in primary care.'],
                ['Founder insight', 'Built from direct clinical experience and real workflow friction.'],
              ].map(([title, text]) => (
                <div key={title} className="rounded-[1.75rem] border border-white/10 bg-white/5 p-6">
                  <h3 className="text-xl font-semibold">{title}</h3>
                  <p className="mt-3 leading-7 text-slate-300">{text}</p>
                </div>
              ))}
            </div>
          </div>
        </section>

        <section className="mx-auto max-w-7xl px-6 py-20 lg:px-8">
          <div className="grid gap-10 lg:grid-cols-2 lg:items-center">
            <div>
              <p className="text-sm font-semibold uppercase tracking-[0.18em] text-sky-700">About KRM Care</p>
              <h2 className="mt-3 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">
                Founded from real clinical practice.
              </h2>
              <p className="mt-4 max-w-2xl text-lg leading-8 text-slate-600">
                KRM Care AB is shaped by first-hand experience in primary care and a clear ambition: create a modern, practical, and scalable way to follow chronic patients more effectively.
              </p>
            </div>

            <div className="rounded-[2rem] border border-slate-200 bg-slate-50 p-8 shadow-sm">
              <p className="text-sm font-medium text-slate-500">Core principles</p>
              <ul className="mt-5 space-y-3 text-slate-700">
                <li>• Clinical usefulness before technical complexity</li>
                <li>• Early action over late reaction</li>
                <li>• Better structure for high-need patients</li>
                <li>• Practical integration with real care workflows</li>
              </ul>
            </div>
          </div>
        </section>

        <section id="contact" className="bg-sky-50 py-20">
          <div className="mx-auto max-w-4xl px-6 text-center lg:px-8">
            <p className="text-sm font-semibold uppercase tracking-[0.18em] text-sky-700">Contact</p>
            <h2 className="mt-3 text-3xl font-semibold tracking-tight text-slate-950 sm:text-4xl">
              Let’s discuss a pilot, partnership, or investment dialogue.
            </h2>
            <p className="mt-4 text-lg leading-8 text-slate-600">
              Whether you represent a clinic, healthcare partner, or investor group, we would be glad to connect.
            </p>

            <div className="mt-8 flex flex-col items-center justify-center gap-4 sm:flex-row">
              <a
                href="mailto:contact@krmcare.se"
                className="inline-flex items-center justify-center rounded-2xl bg-slate-900 px-6 py-3 text-sm font-medium text-white shadow-sm transition hover:-translate-y-0.5 hover:bg-slate-800"
              >
                contact@krmcare.se
              </a>
              <a
                href="mailto:contact@krmcare.se?subject=Meeting%20request%20-%20KRM%20Care"
                className="inline-flex items-center justify-center rounded-2xl border border-slate-300 bg-white px-6 py-3 text-sm font-medium text-slate-700 transition hover:-translate-y-0.5 hover:border-slate-400 hover:text-slate-900"
              >
                Book a meeting
              </a>
            </div>
          </div>
        </section>
      </main>

      <footer className="border-t border-slate-200 bg-white">
        <div className="mx-auto flex max-w-7xl flex-col gap-3 px-6 py-8 text-sm text-slate-500 md:flex-row md:items-center md:justify-between lg:px-8">
          <p>© {new Date().getFullYear()} KRM Care AB. All rights reserved.</p>
          <p>Digital chronic disease care for primary care clinics.</p>
        </div>
      </footer>
    </div>
  );
}