import type { Metadata } from 'next'
import Link from 'next/link'
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.',
}

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 (
    <main className="support-page">
      <section className="support-hero">
        <div className="container support-hero-inner">
          <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> 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>
  )
}