plant-disease-id/src/app/about/page.tsx

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 500K+ labeled plant disease images covering 300+ 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>500,000+ labeled plant disease images</strong> spanning 300+ 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>
  );
}