resolutionflow/frontend/src/pages/ContactPage.tsx

import { Link } from 'react-router-dom'
import { PageMeta } from '@/components/common/PageMeta'

export default function ContactPage() {
  return (
    <>
      <PageMeta title="Contact" description="Contact ResolutionFlow customer service, sales, billing, or security." />
      <div className="min-h-screen bg-background text-foreground">
        <div className="mx-auto max-w-3xl px-6 py-16">
          <Link to="/landing" className="text-sm text-muted-foreground hover:text-foreground mb-8 inline-block">&larr; Back to home</Link>
          <h1 className="text-3xl font-bold font-heading mb-4">Contact ResolutionFlow</h1>
          <p className="text-muted-foreground mb-10">
            We respond to customer inquiries Monday through Friday during U.S. business hours, excluding federal holidays. Email is the fastest path to a response.
          </p>

          <div className="space-y-8 text-muted-foreground leading-relaxed">
            <section>
              <h2 className="text-xl font-semibold text-foreground mb-3">Phone</h2>
              <p>
                <a href="tel:+14709494131" className="text-primary hover:underline">(470) 949-4131</a>
              </p>
              <p className="text-sm mt-1">Monday&ndash;Friday, 9:00 AM&ndash;5:00 PM ET, excluding U.S. federal holidays.</p>
            </section>

            <section>
              <h2 className="text-xl font-semibold text-foreground mb-3">Email</h2>
              <ul className="space-y-2">
                <li>
                  <strong className="text-foreground">General support:</strong>{' '}
                  <a href="mailto:support@resolutionflow.com" className="text-primary hover:underline">support@resolutionflow.com</a>
                </li>
                <li>
                  <strong className="text-foreground">Sales and Enterprise:</strong>{' '}
                  <a href="mailto:sales@resolutionflow.com" className="text-primary hover:underline">sales@resolutionflow.com</a>
                </li>
                <li>
                  <strong className="text-foreground">Billing and account:</strong>{' '}
                  <a href="mailto:billing@resolutionflow.com" className="text-primary hover:underline">billing@resolutionflow.com</a>
                </li>
                <li>
                  <strong className="text-foreground">Security and privacy:</strong>{' '}
                  <a href="mailto:security@resolutionflow.com" className="text-primary hover:underline">security@resolutionflow.com</a>
                </li>
              </ul>
            </section>

            <section>
              <h2 className="text-xl font-semibold text-foreground mb-3">Response times</h2>
              <ul className="list-disc list-inside space-y-1">
                <li>General support: within one (1) business day</li>
                <li>Billing or account access: within one (1) business day</li>
                <li>Security disclosures: within twenty-four (24) hours, including weekends</li>
              </ul>
            </section>

            <section>
              <h2 className="text-xl font-semibold text-foreground mb-3">Mailing address</h2>
              {/* TODO: replace with full mailing address once P.O. Box is set up. */}
              <p>
                Available on request. Email{' '}
                <a href="mailto:support@resolutionflow.com" className="text-primary hover:underline">support@resolutionflow.com</a>{' '}
                and we will provide our current mailing address.
              </p>
            </section>

            <section>
              <h2 className="text-xl font-semibold text-foreground mb-3">Sales and demos</h2>
              <p>
                Interested in a guided demo or Enterprise pricing? Use our{' '}
                <Link to="/contact-sales" className="text-primary hover:underline">sales contact form</Link>{' '}
                to book a time directly.
              </p>
            </section>

            <section>
              <h2 className="text-xl font-semibold text-foreground mb-3">Related</h2>
              <ul className="list-disc list-inside space-y-1">
                <li><Link to="/policies" className="text-primary hover:underline">Customer Policies</Link> &mdash; billing, refunds, cancellation, and promotions</li>
                <li><Link to="/terms" className="text-primary hover:underline">Terms of Service</Link></li>
                <li><Link to="/privacy" className="text-primary hover:underline">Privacy Policy</Link></li>
              </ul>
            </section>
          </div>
        </div>
      </div>
    </>
  )
}