import Link from "next/link";

export default function Home() {
  return (
    <>
      {/* TopNavBar */}
      <nav className="w-full top-0 sticky bg-surface dark:bg-on-background border-b border-outline-variant z-50">
        <div className="flex justify-between items-center h-16 px-gutter max-w-container-max mx-auto">
          {/* Logo */}
          <div className="flex items-center gap-1 md:gap-2">
            <span className="material-symbols-outlined text-primary font-bold text-2xl" data-icon="psychology">psychology</span>
            <span className="text-xl md:text-hero-lg md:font-hero-lg font-bold text-primary dark:text-inverse-primary">MindCheck</span>
          </div>

          {/* Desktop Links */}
          <div className="hidden md:flex items-center gap-8">
            <a className="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="#how-it-works">How it works</a>
            <Link className="font-body-md text-body-md text-on-surface-variant hover:text-primary transition-colors" href="/history">History</Link>
            <Link href="/chat" className="font-body-md text-body-md bg-primary-container text-on-primary px-5 py-3 rounded active:scale-95 duration-150 hover:opacity-90 whitespace-nowrap">
              Start Screening
            </Link>
          </div>

          {/* Mobile Links */}
          <div className="flex md:hidden items-center gap-4">
            <Link href="/history" className="text-on-surface-variant hover:text-primary p-2 flex items-center">
              <span className="material-symbols-outlined text-2xl" data-icon="history">history</span>
            </Link>
          </div>
        </div>
      </nav>

      {/* Main Content */}
      <main className="flex-grow flex flex-col items-center w-full max-w-container-max mx-auto px-gutter py-section-padding gap-stack-lg mt-8 md:mt-16">
        {/* Hero Section */}
        <section className="w-full grid grid-cols-1 md:grid-cols-12 gap-8 items-center">
          {/* Left: Content (60%) */}
          <div className="md:col-span-7 flex flex-col gap-stack-md">
            <h1 className="font-hero-lg-mobile md:font-hero-lg text-hero-lg-mobile md:text-hero-lg text-on-surface">
              Understand your mental health in 5 minutes
            </h1>
            <p className="font-body-md text-body-md text-on-surface-variant max-w-lg">
              8 short PHQ-8 based questions. Anonymous, free, and does not replace professional diagnosis.
            </p>
            <div className="flex flex-wrap items-center gap-4 mt-4">
              <Link href="/chat" className="font-body-md text-body-md bg-primary-container text-on-primary px-5 py-3 rounded active:scale-95 duration-150 hover:opacity-90">
                Start Screening
              </Link>
              <a className="font-body-md text-body-md text-primary font-medium hover:underline flex items-center gap-1" href="#how-it-works">
                How it works <span className="material-symbols-outlined text-sm" data-icon="arrow_forward">arrow_forward</span>
              </a>
            </div>
          </div>

          {/* Right: Abstract Decorative Block (40%) */}
          <div className="md:col-span-5 relative h-48 md:h-80 w-full flex justify-center items-center">
            {/* Stacked Cards */}
            <div className="absolute bg-surface w-4/5 h-36 md:h-48 border border-outline-variant rounded-lg rotate-6 opacity-60"></div>
            <div className="absolute bg-surface w-4/5 h-36 md:h-48 border border-outline-variant rounded-lg -rotate-3 opacity-80"></div>
            {/* Main Foreground Card */}
            <div className="relative bg-surface w-4/5 h-36 md:h-48 border border-outline-variant rounded-lg p-6 flex flex-col justify-center items-center shadow-sm">
              <span className="font-label-uppercase text-label-uppercase text-secondary mb-2">PHQ-8 SCORE</span>
              <span className="text-4xl md:text-5xl font-bold text-primary mb-4">14</span>
              {/* Fake Bar Chart Snippet */}
              <div className="w-full flex gap-2 h-10 items-end px-4">
                <div className="w-1/4 bg-surface-variant h-1/2 rounded-t"></div>
                <div className="w-1/4 bg-primary-fixed-dim h-3/4 rounded-t"></div>
                <div className="w-1/4 bg-primary-container h-full rounded-t"></div>
                <div className="w-1/4 bg-surface-variant h-1/4 rounded-t"></div>
              </div>
            </div>
          </div>
        </section>

        {/* Feature Cards Row */}
        <section id="how-it-works" className="w-full grid grid-cols-1 md:grid-cols-3 gap-6 mt-12 scroll-mt-24">
          <div className="bg-surface border-[0.5px] border-outline-variant rounded-lg p-6 flex flex-col gap-2 hover:shadow-md transition-shadow duration-300">
            <span className="material-symbols-outlined text-primary mb-2 text-[24px]" data-icon="visibility_off" style={{ fontVariationSettings: "'FILL' 0, 'wght' 300" }}>visibility_off</span>
            <h3 className="font-section-heading text-section-heading text-on-surface">Anonymous & Free</h3>
            <p className="font-body-md text-body-md text-on-surface-variant">Data is not stored permanently. All processing happens locally.</p>
          </div>
          <div className="bg-surface border-[0.5px] border-outline-variant rounded-lg p-6 flex flex-col gap-2 hover:shadow-md transition-shadow duration-300">
            <span className="material-symbols-outlined text-primary mb-2 text-[24px]" data-icon="assignment" style={{ fontVariationSettings: "'FILL' 0, 'wght' 300" }}>assignment</span>
            <h3 className="font-section-heading text-section-heading text-on-surface">PHQ-8 Based</h3>
            <p className="font-body-md text-body-md text-on-surface-variant">Validated global medical questionnaire standard used by professionals.</p>
          </div>
          <div className="bg-surface border-[0.5px] border-outline-variant rounded-lg p-6 flex flex-col gap-2 hover:shadow-md transition-shadow duration-300">
            <span className="material-symbols-outlined text-primary mb-2 text-[24px]" data-icon="bolt" style={{ fontVariationSettings: "'FILL' 0, 'wght' 300" }}>bolt</span>
            <h3 className="font-section-heading text-section-heading text-on-surface">Instant Results</h3>
            <p className="font-body-md text-body-md text-on-surface-variant">Get an immediate summary with AI-powered analysis of your responses.</p>
          </div>
        </section>

        {/* PHQ-8 Educational Section */}
        <section id="about-phq8" className="w-full mt-16 scroll-mt-24">
          <div className="bg-surface-container-low border border-outline-variant rounded-2xl p-5 md:p-12 shadow-sm">
            <div className="flex flex-col md:flex-row gap-6 md:gap-12 items-center">
              <div className="flex-1 flex flex-col gap-4">
                <div className="inline-flex items-center gap-2 px-3 py-1 bg-primary-container text-on-primary-container rounded-full w-max mb-2">
                  <span className="material-symbols-outlined text-sm" data-icon="school">school</span>
                  <span className="font-label-uppercase text-label-uppercase font-bold">Clinical Standard</span>
                </div>
                <h2 className="font-hero-lg-mobile md:font-hero-lg text-hero-lg-mobile md:text-hero-lg text-on-surface font-semibold">
                  What is the PHQ-8?
                </h2>
                <p className="font-body-md text-body-md text-on-surface-variant leading-relaxed">
                  The <strong>Patient Health Questionnaire (PHQ-8)</strong> is a standardized diagnostic tool used by healthcare professionals worldwide to screen for and measure the severity of depression. It consists of 8 carefully formulated questions based on the DSM-5 criteria for major depressive disorder.
                </p>
                
                <h3 className="font-section-heading text-section-heading mt-4 font-semibold text-on-surface">Severity Categories</h3>
                <ul className="space-y-3 font-body-md text-body-md text-on-surface-variant">
                  <li className="flex items-start gap-3">
                    <span className="w-3 h-3 rounded-full bg-green-500 mt-1.5 shrink-0"></span>
                    <div><strong>0-4: Minimal</strong> &mdash; No specific treatment typically needed. Normal emotional fluctuations.</div>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="w-3 h-3 rounded-full bg-amber-500 mt-1.5 shrink-0"></span>
                    <div><strong>5-9: Mild</strong> &mdash; Watchful waiting recommended. Mild symptoms that may not significantly impact daily life.</div>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="w-3 h-3 rounded-full bg-orange-500 mt-1.5 shrink-0"></span>
                    <div><strong>10-14: Moderate</strong> &mdash; Treatment plan and consultation with a mental health professional is recommended.</div>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="w-3 h-3 rounded-full bg-red-400 mt-1.5 shrink-0"></span>
                    <div><strong>15-19: Moderately Severe</strong> &mdash; Active treatment with pharmacotherapy and/or psychotherapy is highly recommended.</div>
                  </li>
                  <li className="flex items-start gap-3">
                    <span className="w-3 h-3 rounded-full bg-red-600 mt-1.5 shrink-0"></span>
                    <div><strong>20-24: Severe</strong> &mdash; Immediate initiation of treatment and referral to a specialist is strongly advised.</div>
                  </li>
                </ul>
              </div>
              
              <div className="flex-1 w-full max-w-lg aspect-video rounded-xl overflow-hidden shadow-lg border border-outline-variant bg-black">
                <iframe 
                  width="100%" 
                  height="100%" 
                  src="https://www.youtube.com/embed/8Su5VtKeXU8" 
                  title="What is depression? - Helen M. Farrell" 
                  frameBorder="0" 
                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
                  allowFullScreen
                ></iframe>
              </div>
            </div>
          </div>
        </section>

        {/* How It Works Steps */}
        <section className="w-full mt-12">
          <h2 className="font-section-heading text-section-heading text-on-surface mb-8 text-center">How It Works</h2>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
            {[
              { icon: "chat_bubble", title: "Answer 8 Questions", desc: "Our chatbot asks 8 PHQ-8 interview questions — answer via quick chips or type freely." },
              { icon: "psychology", title: "AI Analysis", desc: "Your responses are analyzed using a trained MPNet deep learning model from DAIC-WOZ research." },
              { icon: "analytics", title: "Get Your Score", desc: "Receive per-question scores (0-3), total PHQ-8 score, and severity classification." },
              { icon: "history", title: "Track Progress", desc: "Save results to your local history and track your mental health over time." },
            ].map((step, i) => (
              <div key={i} className="flex flex-col items-center text-center gap-3 p-4">
                <div className="w-12 h-12 rounded-full bg-primary-container flex items-center justify-center mb-2">
                  <span className="material-symbols-outlined text-on-primary text-[22px]" data-icon={step.icon}>{step.icon}</span>
                </div>
                <span className="font-label-uppercase text-label-uppercase text-secondary">Step {i + 1}</span>
                <h3 className="font-body-md text-body-md font-semibold text-on-surface">{step.title}</h3>
                <p className="font-caption-sm text-caption-sm text-on-surface-variant">{step.desc}</p>
              </div>
            ))}
          </div>
        </section>
      </main>

      {/* Footer */}
      <footer className="w-full py-section-padding border-t border-outline-variant bg-surface-container-lowest dark:bg-background mt-auto">
        <div className="flex flex-col items-center text-center px-gutter max-w-container-max mx-auto gap-4">
          <span className="material-symbols-outlined text-primary text-[24px]" data-icon="favorite" style={{ fontVariationSettings: "'FILL' 1" }}>favorite</span>
          <p className="font-caption-sm text-caption-sm text-on-surface-variant max-w-2xl">
            MindCheck is not a replacement for professional medical diagnosis. Please contact mental health professionals if you are in an emergency.
          </p>
          <p className="font-caption-sm text-caption-sm text-on-surface-variant opacity-60">© {new Date().getFullYear()} MindCheck. All rights reserved.</p>
        </div>
      </footer>
    </>
  );
}