import type { Metadata } from 'next'
import Link from 'next/link'
import Navbar from '@/components/Navbar'
import Footer from '@/components/Footer'
import { siteConfig } from '@/lib/site'

export const metadata: Metadata = {
  title: 'Support',
  description: 'Get support for GreenLens, including contact details, onboarding help, billing guidance, and privacy links.',
  alternates: {
    canonical: '/support',
  },
  openGraph: {
    title: 'Support | GreenLens',
    description: 'Get support for GreenLens, including contact details, onboarding help, billing guidance, and privacy links.',
    url: `${siteConfig.domain}/support`,
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Support | GreenLens',
    description: 'Get support for GreenLens, including contact details, onboarding help, billing guidance, and privacy links.',
  },
}

const faqs = [
  {
    question: 'How do I identify a plant with GreenLens?',
    answer:
      'Open the scanner, point your camera at the plant, and start a scan. GreenLens returns an identification result and care guidance.',
  },
  {
    question: 'Do I need an account to use GreenLens?',
    answer:
      'Some features can be explored first, but an account is recommended if you want to save scans, manage your collection, and access billing features.',
  },
  {
    question: 'How do subscriptions and credits work?',
    answer:
      'GreenLens offers Pro subscriptions and credit top-ups for AI-powered features. Billing and plan management are available inside the app.',
  },
  {
    question: 'How can I contact support?',
    answer:
      'Send a message to our support email with your platform, app version, and a short description of the issue. Screenshots help.',
  },
]

export default function SupportPage() {
  return (
    <>
      <Navbar />
      <main className="support-page">
        <section className="support-hero">
          <div className="container support-hero-inner">
            <p style={{ marginBottom: '1rem', opacity: 0.75 }}>
              <Link href="/">Home</Link> / <span>Support</span>
            </p>
            <p className="tag">Support</p>
            <h1>Help for scans, care plans, billing, and account questions.</h1>
            <p className="support-lead">
              GreenLens helps users identify plants, understand their condition, and keep a collection organized.
              If something breaks or feels unclear, this is the fastest place to start.
            </p>
            <div className="support-actions">
              <a className="btn-primary" href={`mailto:${siteConfig.supportEmail}`}>
                Email Support
              </a>
              <Link className="btn-outline support-outline" href="/privacy">
                Privacy Policy
              </Link>
            </div>
          </div>
        </section>

        <section className="support-grid-wrap">
          <div className="container support-grid">
            <div className="support-card">
              <h2>Contact</h2>
              <p>
                Email us at <a href={`mailto:${siteConfig.supportEmail}`}>{siteConfig.supportEmail}</a>
              </p>
              <p>Include your device type, app version, and what happened right before the issue.</p>
            </div>

            <div className="support-card">
              <h2>Common topics</h2>
              <ul className="support-list">
                <li>Plant identification issues</li>
                <li>Care reminder questions</li>
                <li>Subscriptions and credit purchases</li>
                <li>Account access and saved data</li>
              </ul>
            </div>

            <div className="support-card">
              <h2>Legal</h2>
              <p>
                Review our <Link href="/privacy">Privacy Policy</Link>, <Link href="/terms">Terms of Service</Link>,
                and <Link href="/imprint">Imprint</Link>.
              </p>
              <p>These links should be used in App Store Connect before submission.</p>
            </div>
          </div>
        </section>

        <section className="support-faq">
          <div className="container">
            <div className="support-section-head">
              <p className="tag">FAQ</p>
              <h2>Quick answers before you write support.</h2>
            </div>

            <div className="support-faq-list">
              {faqs.map((item) => (
                <article key={item.question} className="support-faq-item">
                  <h3>{item.question}</h3>
                  <p>{item.answer}</p>
                </article>
              ))}
            </div>
          </div>
        </section>
      </main>
      <Footer />
    </>
  )
}