import React from "react";
import Link from "next/link";
import type { Metadata } from "next";
import { APP_NAME, BETA_DISCLAIMER } from "@/lib/constants";

export const metadata: Metadata = {
  title: "About",
  description: `Learn about ${APP_NAME} — our mission, methodology, data sources, and limitations. Open-source plant disease identification.`,
};

/* ─── FAQ accordion (server component with details/summary) ─── */
const faqs = [
  {
    q: "How accurate is the disease identification?",
    a: "Our model has been trained on 50K+ labeled plant disease images covering 25+ plant species. Accuracy varies by plant and disease type, with confidence scores provided for each diagnosis. The model performs best on common diseases with visible foliar symptoms. We recommend using multiple sources of information for critical plant health decisions.",
  },
  {
    q: "Which plants are supported?",
    a: "We currently have detailed disease data for 8+ common garden plants including tomato, basil, rose, monstera, snake plant, bell pepper, lavender, and sunflower. We are actively adding more plants. Browse our full catalog on the Browse Plants page.",
  },
  {
    q: "Can I use this for commercial farming?",
    a: "While our database covers common agricultural plants like tomatoes and peppers, the tool is designed primarily for home gardeners and small-scale growers. For commercial agriculture, we recommend consulting with local extension services, certified crop advisors, and using laboratory testing for definitive diagnosis.",
  },
  {
    q: "How does the AI model work?",
    a: "The model uses a convolutional neural network (CNN) trained on thousands of labeled plant disease images. When you upload a photo, the model analyzes visual patterns — leaf spots, discoloration, wilting patterns, and other symptoms — then matches them against known disease signatures. The output includes the most likely diagnosis with a confidence percentage.",
  },
  {
    q: "Is my data private?",
    a: "Yes. Uploaded images are processed temporarily for analysis and are not permanently stored or used for training without explicit consent. We do not share or sell user data. See our privacy policy for details.",
  },
  {
    q: "What if my plant has a disease that's not in the database?",
    a: "If the model cannot identify the disease with sufficient confidence, it will indicate that the condition is not recognized. In this case, we recommend consulting a local plant pathologist, master gardener, or agricultural extension service. You can also contribute by submitting data to help us expand our knowledge base.",
  },
];

function FAQAccordion() {
  return (
    <div className="space-y-3">
      {faqs.map((faq, i) => (
        <details
          key={i}
          className="group rounded-xl border border-zinc-200 dark:border-zinc-700 bg-white dark:bg-zinc-900 overflow-hidden"
        >
          <summary className="flex items-center justify-between gap-4 px-5 py-4 cursor-pointer list-none text-sm font-medium text-zinc-900 dark:text-zinc-100 hover:bg-zinc-50 dark:hover:bg-zinc-800 transition-colors">
            {faq.q}
            <span className="shrink-0 text-zinc-400 group-open:rotate-180 transition-transform" aria-hidden="true">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20"
                height="20"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                strokeWidth="2"
                strokeLinecap="round"
                strokeLinejoin="round"
              >
                <path d="m6 9 6 6 6-6" />
              </svg>
            </span>
          </summary>
          <div className="px-5 pb-4 pt-0">
            <p className="text-sm text-zinc-600 dark:text-zinc-300 leading-relaxed">
              {faq.a}
            </p>
          </div>
        </details>
      ))}
    </div>
  );
}

/* ─── About Page ─── */
export default function AboutPage() {
  return (
    <div className="mx-auto max-w-3xl px-4 sm:px-6 lg:px-8 py-8 sm:py-12">
      {/* Page header */}
      <div className="text-center mb-12">
        <span className="text-6xl block mb-4" aria-hidden="true">
          🌱
        </span>
        <h1 className="text-3xl sm:text-4xl font-bold text-zinc-900 dark:text-zinc-100">
          About {APP_NAME}
        </h1>
        <p className="mt-3 text-lg text-zinc-500 dark:text-zinc-400 max-w-lg mx-auto">
          Making plant disease identification accessible to every gardener.
        </p>
      </div>

      {/* Mission */}
      <section className="mb-12">
        <h2 className="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
          Our Mission
        </h2>
        <div className="prose prose-sm max-w-none text-zinc-600 dark:text-zinc-300 space-y-4">
          <p>
            Gardening is a labor of love — and watching a plant struggle with an
            unknown disease is heartbreaking. Our mission is to put the power of
            AI-powered disease identification into every gardener&apos;s pocket,
            for free.
          </p>
          <p>
            {APP_NAME} was built by a team of gardeners and developers who were
            frustrated with vague, generic plant disease advice. We wanted
            hyper-specific diagnoses — not just &ldquo;your plant has a
            fungus&rdquo; but &ldquo;your tomato has Late Blight caused by
            Phytophthora infestans, and here&apos;s exactly how to treat it.&rdquo;
          </p>
        </div>
      </section>

      {/* How the model works */}
      <section className="mb-12">
        <h2 className="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
          How the Model Works
        </h2>
        <div className="prose prose-sm max-w-none text-zinc-600 dark:text-zinc-300 space-y-4">
          <p>
            The identification engine uses a deep convolutional neural network
            trained on a dataset of <strong>50,000+ labeled plant disease
            images</strong> spanning 25+ plant species. When you upload a photo:
          </p>
          <ol className="list-decimal list-inside space-y-2">
            <li>
              <strong>Preprocessing</strong> — The image is normalized and
              analyzed for relevant regions (leaves, stems, fruit).
            </li>
            <li>
              <strong>Feature extraction</strong> — The model identifies visual
              patterns: lesion shape, color, margin type, texture, and
              distribution.
            </li>
            <li>
              <strong>Classification</strong> — Patterns are matched against
              known disease signatures, producing a ranked list of possible
              diagnoses with confidence scores.
            </li>
            <li>
              <strong>Recommendation</strong> — The top diagnosis is paired with
              treatment steps, prevention tips, and severity information from
              our curated knowledge base.
            </li>
          </ol>
        </div>
      </section>

      {/* Data sources */}
      <section className="mb-12">
        <h2 className="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
          Data Sources
        </h2>
        <div className="prose prose-sm max-w-none text-zinc-600 dark:text-zinc-300 space-y-4">
          <p>
            Our disease knowledge base is curated from peer-reviewed plant
            pathology resources, including:
          </p>
          <ul className="list-disc list-inside space-y-1">
            <li>University agricultural extension publications</li>
            <li>Peer-reviewed plant pathology journals</li>
            <li>USDA plant disease databases</li>
            <li>Contributions from the open-source gardening community</li>
          </ul>
          <p>
            We prioritize evidence-based, actionable information. Disease
            descriptions, treatments, and prevention tips are reviewed for
            accuracy before inclusion.
          </p>
        </div>
      </section>

      {/* Limitations */}
      <section className="mb-12">
        <div className="rounded-xl border border-warning-amber-200 dark:border-warning-amber-800 bg-warning-amber-50 dark:bg-warning-amber-950/50 p-6">
          <h2 className="text-xl font-semibold text-warning-amber-800 dark:text-warning-amber-300 mb-3 flex items-center gap-2">
            <span aria-hidden="true">⚠️</span>
            Limitations &amp; Disclaimer
          </h2>
          <div className="text-sm text-warning-amber-700 dark:text-warning-amber-400 space-y-3">
            <p>{BETA_DISCLAIMER}</p>
            <p>
              The AI model may not accurately identify all diseases, especially
              unusual presentations, early-stage infections, or diseases outside
              its training data. Always confirm diagnoses with professional
              resources for critical decisions.
            </p>
            <p>
              This tool is <strong>not</strong> FDA-approved or certified as a
              medical/agricultural diagnostic device. It is an educational
              assistive tool.
            </p>
          </div>
        </div>
      </section>

      {/* Open source */}
      <section className="mb-12">
        <h2 className="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-4">
          Open Source &amp; Contributions
        </h2>
        <div className="prose prose-sm max-w-none text-zinc-600 dark:text-zinc-300 space-y-4">
          <p>
            {APP_NAME} is free and open source. We believe plant health
            information should be accessible to everyone. The entire project is
            available on GitHub, and we welcome contributions!
          </p>
          <p>You can contribute by:</p>
          <ul className="list-disc list-inside space-y-1">
            <li>Adding new plant and disease data</li>
            <li>Improving the AI model with training data</li>
            <li>Reporting bugs or suggesting features</li>
            <li>Translating content to other languages</li>
            <li>Sharing plant photos (with permission) for model improvement</li>
          </ul>
          <p>
            <Link
              href="https://github.com/plant-health-id"
              className="text-leaf-green-600 hover:text-leaf-green-700 dark:text-leaf-green-400 dark:hover:text-leaf-green-300 font-medium underline underline-offset-2"
              target="_blank"
              rel="noopener noreferrer"
            >
              View on GitHub →
            </Link>
          </p>
        </div>
      </section>

      {/* FAQ */}
      <section className="mb-8">
        <h2 className="text-xl font-semibold text-zinc-900 dark:text-zinc-100 mb-6">
          Frequently Asked Questions
        </h2>
        <FAQAccordion />
      </section>

      {/* Back to home */}
      <div className="text-center pt-8 border-t border-zinc-200 dark:border-zinc-800">
        <Link
          href="/"
          className="inline-flex items-center gap-2 text-sm font-medium text-leaf-green-600 hover:text-leaf-green-700 dark:text-leaf-green-400 dark:hover:text-leaf-green-300 transition-colors"
        >
          <span aria-hidden="true">←</span> Back to home
        </Link>
      </div>
    </div>
  );
}