import React, { useMemo, useState } from "react";
import { Check, ArrowRight, Shield, Building2, Phone, Mail, Clock, FileText, DollarSign, Users, LineChart, Sparkles } from "lucide-react";

// shadcn/ui primitives
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";

export default function MedicalRevenueRecoveryLanding() {
  const [avgClaim, setAvgClaim] = useState(40000);
  const [numClaims, setNumClaims] = useState(10);
  const [winRate, setWinRate] = useState(0.6);
  const [sharePct, setSharePct] = useState(0.1); // your referral share

  const recovered = useMemo(() => avgClaim * numClaims * winRate, [avgClaim, numClaims, winRate]);
  const referral = useMemo(() => recovered * sharePct, [recovered, sharePct]);

  return (
    <div className="min-h-screen bg-gray-50 text-gray-900">
      {/* Nav */}
      <header className="sticky top-0 z-30 backdrop-blur bg-white/70 border-b">
        <div className="mx-auto max-w-7xl px-4 py-3 flex items-center justify-between">
          <div className="flex items-center gap-2">
            <div className="h-9 w-9 rounded-xl bg-black flex items-center justify-center text-white text-xs font-bold">MRR</div>
            <div className="font-semibold tracking-tight">Medical Revenue Recovery</div>
          </div>
          <div className="hidden md:flex items-center gap-6 text-sm">
            <a href="#how" className="hover:opacity-70">How it works</a>
            <a href="#who" className="hover:opacity-70">Who we help</a>
            <a href="#proof" className="hover:opacity-70">Results</a>
            <a href="#faq" className="hover:opacity-70">FAQ</a>
          </div>
          <div className="flex items-center gap-2">
            <a href="#contact"><Button size="sm" className="rounded-2xl">Request consult</Button></a>
          </div>
        </div>
      </header>

      {/* Hero */}
      <section className="relative overflow-hidden">
        <div className="absolute -top-24 -right-24 h-80 w-80 rounded-full bg-gradient-to-tr from-gray-200 to-white blur-3xl" />
        <div className="mx-auto max-w-7xl px-4 py-16 md:py-24 grid md:grid-cols-2 gap-10 items-center">
          <div>
            <div className="inline-flex items-center gap-2 rounded-full border px-3 py-1 text-xs font-medium bg-white shadow-sm">
              <Sparkles className="h-3.5 w-3.5" /> No-Surprises-Act Arbitration • Out-of-Network Underpayments
            </div>
            <h1 className="mt-4 text-4xl md:text-5xl font-extrabold leading-tight tracking-tight">Recover underpaid <span className="bg-gradient-to-r from-black to-gray-500 bg-clip-text text-transparent">out‑of‑network</span> revenue without adding staff</h1>
            <p className="mt-4 text-gray-700 text-lg">We manage end‑to‑end claims disputes and NSA arbitrations with a data‑driven legal team so your surgeons and finance staff stay focused on patients.</p>
            <div className="mt-6 flex flex-wrap items-center gap-3">
              <a href="#contact"><Button className="rounded-2xl">Free 15‑min evaluation <ArrowRight className="ml-2 h-4 w-4" /></Button></a>
              <a href="#calculator" className="text-sm font-medium hover:opacity-70">Estimate your recovery →</a>
            </div>
            <div className="mt-6 grid grid-cols-2 gap-4 text-sm text-gray-700">
              <div className="flex items-center gap-2"><Shield className="h-4 w-4"/> HIPAA‑compliant workflow</div>
              <div className="flex items-center gap-2"><Clock className="h-4 w-4"/> Fast triage and filing</div>
              <div className="flex items-center gap-2"><LineChart className="h-4 w-4"/> Transparent reporting</div>
              <div className="flex items-center gap-2"><Users className="h-4 w-4"/> Dedicated dispute team</div>
            </div>
          </div>
          <div>
            <Card className="rounded-2xl shadow-lg">
              <CardContent className="p-6">
                <h3 className="text-lg font-semibold">Quick recovery estimator</h3>
                <p className="text-sm text-gray-600">Simple projection. Not financial advice.</p>
                <div id="calculator" className="mt-4 grid grid-cols-2 gap-4">
                  <div>
                    <label className="text-xs font-medium">Average claim underpayment ($)</label>
                    <Input type="number" value={avgClaim} onChange={(e)=>setAvgClaim(Number(e.target.value)||0)} className="mt-1" />
                  </div>
                  <div>
                    <label className="text-xs font-medium">Number of disputed claims</label>
                    <Input type="number" value={numClaims} onChange={(e)=>setNumClaims(Number(e.target.value)||0)} className="mt-1" />
                  </div>
                  <div>
                    <label className="text-xs font-medium">Expected success rate</label>
                    <Input type="number" step="0.05" min={0} max={1} value={winRate} onChange={(e)=>setWinRate(Math.min(1, Math.max(0, Number(e.target.value)||0)))} className="mt-1" />
                    <p className="text-[11px] text-gray-500 mt-1">Enter 0–1 (e.g., 0.6)</p>
                  </div>
                  <div>
                    <label className="text-xs font-medium">Your referral share</label>
                    <Input type="number" step="0.01" min={0} max={1} value={sharePct} onChange={(e)=>setSharePct(Math.min(1, Math.max(0, Number(e.target.value)||0)))} className="mt-1" />
                    <p className="text-[11px] text-gray-500 mt-1">Enter 0–1 (e.g., 0.1)</p>
                  </div>
                </div>
                <div className="mt-4 rounded-xl bg-gray-100 p-4">
                  <div className="text-sm text-gray-700">Projected recovered revenue:</div>
                  <div className="text-2xl font-bold tracking-tight">${recovered.toLocaleString()}</div>
                  <div className="mt-2 text-sm text-gray-700">Your projected referral share:</div>
                  <div className="text-xl font-semibold">${referral.toLocaleString()}</div>
                </div>
                <a href="#contact"><Button className="mt-4 w-full rounded-2xl">Discuss eligibility</Button></a>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* Logos / social proof placeholder */}
      <section id="proof" className="py-10">
        <div className="mx-auto max-w-7xl px-4">
          <div className="rounded-2xl border bg-white p-6 shadow-sm">
            <p className="text-center text-sm text-gray-600">Trusted by physician groups and medical associations. Case studies available under NDA.</p>
            <div className="mt-4 grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
              <div className="flex items-center gap-2 justify-center py-2"><Building2 className="h-4 w-4"/>Neurosurgery groups</div>
              <div className="flex items-center gap-2 justify-center py-2"><Building2 className="h-4 w-4"/>Cardio‑thoracic surgery</div>
              <div className="flex items-center gap-2 justify-center py-2"><Building2 className="h-4 w-4"/>Hospital systems</div>
              <div className="flex items-center gap-2 justify-center py-2"><Building2 className="h-4 w-4"/>ASC networks</div>
            </div>
          </div>
        </div>
      </section>

      {/* How it works */}
      <section id="how" className="py-14 bg-white">
        <div className="mx-auto max-w-7xl px-4">
          <h2 className="text-2xl md:text-3xl font-bold tracking-tight">How it works</h2>
          <div className="mt-6 grid md:grid-cols-3 gap-6">
            {[
              {icon: FileText, title: "Identify & intake", text: "Securely ingest EOBs, remit data, and denial rationales. Rapid claim triage within days."},
              {icon: Shield, title: "Build the case", text: "Clinical + contractual argumentation, benchmark data, and expert negotiation prep."},
              {icon: DollarSign, title: "Arbitrate & collect", text: "File NSA IDR when applicable, track outcomes, reconcile payments, and report ROI."},
            ].map((s, i)=> (
              <Card key={i} className="rounded-2xl" >
                <CardContent className="p-6">
                  <div className="h-10 w-10 rounded-xl bg-gray-100 flex items-center justify-center">
                    <s.icon className="h-5 w-5" />
                  </div>
                  <h3 className="mt-4 font-semibold">{s.title}</h3>
                  <p className="text-sm text-gray-600 mt-2">{s.text}</p>
                  <ul className="mt-3 space-y-1 text-sm text-gray-700">
                    <li className="flex items-center gap-2"><Check className="h-4 w-4"/> HIPAA‑compliant portal</li>
                    <li className="flex items-center gap-2"><Check className="h-4 w-4"/> Dedicated dispute team</li>
                    <li className="flex items-center gap-2"><Check className="h-4 w-4"/> Outcome‑based alignment</li>
                  </ul>
                </CardContent>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* Who we help */}
      <section id="who" className="py-14">
        <div className="mx-auto max-w-7xl px-4">
          <h2 className="text-2xl md:text-3xl font-bold tracking-tight">Who we help</h2>
          <div className="mt-6 grid md:grid-cols-2 gap-6">
            <Card className="rounded-2xl">
              <CardContent className="p-6">
                <h3 className="font-semibold">Surgeon groups & private practices</h3>
                <p className="text-sm text-gray-600 mt-2">Neurosurgery, cardio‑thoracic, orthopedics, plastics, and more.</p>
                <ul className="mt-3 space-y-1 text-sm text-gray-700">
                  <li className="flex items-center gap-2"><Check className="h-4 w-4"/> OON underpayments and denials</li>
                  <li className="flex items-center gap-2"><Check className="h-4 w-4"/> NSA arbitration eligibility screening</li>
                  <li className="flex items-center gap-2"><Check className="h-4 w-4"/> Minimal staff lift</li>
                </ul>
              </CardContent>
            </Card>
            <Card className="rounded-2xl">
              <CardContent className="p-6">
                <h3 className="font-semibold">Hospitals, ASCs, and associations</h3>
                <p className="text-sm text-gray-600 mt-2">Portfolio‑level programs with transparent dashboards and monthly ROI reports.</p>
                <ul className="mt-3 space-y-1 text-sm text-gray-700">
                  <li className="flex items-center gap-2"><Check className="h-4 w-4"/> Multi‑entity onboarding</li>
                  <li className="flex items-center gap-2"><Check className="h-4 w-4"/> Data & contract review</li>
                  <li className="flex items-center gap-2"><Check className="h-4 w-4"/> Executive briefings</li>
                </ul>
              </CardContent>
            </Card>
          </div>
        </div>
      </section>

      {/* CTA strip */}
      <section className="py-10 bg-black text-white">
        <div className="mx-auto max-w-7xl px-4 flex flex-col md:flex-row items-center justify-between gap-4">
          <h3 className="text-xl font-semibold tracking-tight">Ready to see what you left on the table?</h3>
          <a href="#contact"><Button variant="secondary" className="rounded-2xl">Start a claim review</Button></a>
        </div>
      </section>

      {/* FAQ */}
      <section id="faq" className="py-14 bg-white">
        <div className="mx-auto max-w-7xl px-4">
          <h2 className="text-2xl md:text-3xl font-bold tracking-tight">Frequently asked</h2>
          <div className="mt-6 grid md:grid-cols-2 gap-6 text-sm text-gray-700">
            <Card className="rounded-2xl"><CardContent className="p-6">
              <h4 className="font-semibold">What data do you need?</h4>
              <p className="mt-2">EOBs, remit files, denial codes, claim files, and payer correspondence. We provide a secure upload link.</p>
            </CardContent></Card>
            <Card className="rounded-2xl"><CardContent className="p-6">
              <h4 className="font-semibold">How do fees work?</h4>
              <p className="mt-2">Aligned to outcomes. No new FTEs. Association programs may use custom terms.</p>
            </CardContent></Card>
            <Card className="rounded-2xl"><CardContent className="p-6">
              <h4 className="font-semibold">Is this legal advice?</h4>
              <p className="mt-2">No. Operations are handled by a qualified dispute and legal team. This site is informational only.</p>
            </CardContent></Card>
            <Card className="rounded-2xl"><CardContent className="p-6">
              <h4 className="font-semibold">How fast are results?</h4>
              <p className="mt-2">Varies by payer and venue. Many disputes move to resolution within a few months after complete intake.</p>
            </CardContent></Card>
          </div>
        </div>
      </section>

      {/* Contact */}
      <section id="contact" className="py-16">
        <div className="mx-auto max-w-4xl px-4">
          <Card className="rounded-2xl">
            <CardContent className="p-6 md:p-8">
              <h2 className="text-2xl md:text-3xl font-bold tracking-tight">Request a confidential consult</h2>
              <p className="mt-2 text-sm text-gray-600">No obligation. NDA available.</p>
              <form className="mt-6 grid md:grid-cols-2 gap-4">
                <div className="md:col-span-1">
                  <label className="text-xs font-medium">Full name</label>
                  <Input placeholder="Dr. Jane Smith" className="mt-1" />
                </div>
                <div className="md:col-span-1">
                  <label className="text-xs font-medium">Organization</label>
                  <Input placeholder="ABC Neurosurgery" className="mt-1" />
                </div>
                <div className="md:col-span-1">
                  <label className="text-xs font-medium">Email</label>
                  <Input type="email" placeholder="name@hospital.org" className="mt-1" />
                </div>
                <div className="md:col-span-1">
                  <label className="text-xs font-medium">Phone</label>
                  <Input type="tel" placeholder="(212) 555‑0123" className="mt-1" />
                </div>
                <div className="md:col-span-2">
                  <label className="text-xs font-medium">Message</label>
                  <Textarea placeholder="Tell us about your OON or NSA issues…" className="mt-1 min-h-[120px]" />
                </div>
                <div className="md:col-span-2 flex items-center justify-between">
                  <div className="text-xs text-gray-500 flex items-center gap-3">
                    <span className="flex items-center gap-1"><Phone className="h-3.5 w-3.5"/> (212) 799‑1411</span>
                    <span className="flex items-center gap-1"><Mail className="h-3.5 w-3.5"/> info@precisionaestheticsmd.com</span>
                  </div>
                  <Button type="button" className="rounded-2xl">Send securely</Button>
                </div>
              </form>
            </CardContent>
          </Card>
          <p className="text-[11px] text-gray-500 mt-4">Disclaimer: This page is informational. It does not constitute legal advice. Outcomes vary by payer, venue, documentation quality, and other factors.</p>
        </div>
      </section>

      {/* Footer */}
      <footer className="py-10 border-t bg-white">
        <div className="mx-auto max-w-7xl px-4 text-sm text-gray-600 flex flex-col md:flex-row items-center justify-between gap-3">
          <div>© {new Date().getFullYear()} Medical Revenue Recovery. All rights reserved.</div>
          <div className="flex items-center gap-4">
            <a href="#faq" className="hover:opacity-70">Compliance</a>
            <a href="#contact" className="hover:opacity-70">Contact</a>
          </div>
        </div>
      </footer>
    </div>
  );
}