`src/app/contact/page.tsx`

86 lines
import type { Metadata } from 'next'
import { Mail, Clock, ShieldCheck } from 'lucide-react'
import Navbar from '@/components/shared/Navbar'

export const metadata: Metadata = {
  title: 'Contact — I was Cute',
  description:
    'Get in touch with the I was Cute team about licensing, royalties, a photo-removal request, or a general question.',
}

const REASONS: { icon: typeof Mail; title: string; body: string }[] = [
  {
    icon: Mail,
    title: 'Licensing & royalties',
    body: 'Questions about how a photo gets licensed, what you earn, or the status of a submission.',
  },
  {
    icon: ShieldCheck,
    title: 'Removal & privacy requests',
    body: 'Ask us to take down a photo, correct information, or delete data you have submitted. We honor every request.',
  },
  {
    icon: Clock,
    title: 'Response time',
    body: 'We read every message and typically reply within two business days.',
  },
]

export default function ContactPage() {
  return (
    <>
      <Navbar />
      <main
        className="flex-1 px-6 py-16 md:px-12"
        style={{ background: 'var(--color-cream)', color: 'var(--color-brown)' }}
      >
        <div className="mx-auto max-w-2xl">
          <p
            className="text-xs uppercase tracking-[0.2em] mb-3"
            style={{ color: 'var(--color-warm-gray)' }}
          >
            Contact
          </p>
          <h1 className="text-4xl font-black tracking-tighter mb-4">Get in touch</h1>
          <p className="mb-10 leading-relaxed" style={{ color: 'var(--color-warm-gray)' }}>
            Have a question about licensing your childhood photos, your royalties, or a
            removal request? Email us and a real person will get back to you.
          </p>

          <a
            href="mailto:info@iwascute.com"
            className="inline-flex items-center gap-2 px-6 py-3 rounded-2xl text-base font-semibold transition-all hover:scale-105 mb-12"
            style={{ background: 'var(--color-peach)', color: 'var(--color-brown)' }}
          >
            <Mail size={18} />
            info@iwascute.com
          </a>

          <div className="grid gap-6 sm:grid-cols-3">
            {REASONS.map(({ icon: Icon, title, body }) => (
              <div
                key={title}
                className="rounded-2xl p-5"
                style={{ background: 'var(--color-cream-dark)' }}
              >
                <Icon size={20} style={{ color: 'var(--color-brown)' }} className="mb-3" />
                <h2 className="text-sm font-bold mb-1.5">{title}</h2>
                <p className="text-xs leading-relaxed" style={{ color: 'var(--color-warm-gray)' }}>
                  {body}
                </p>
              </div>
            ))}
          </div>

          <p className="text-xs mt-12" style={{ color: 'var(--color-warm-gray)' }}>
            I was Cute · Email{' '}
            <a href="mailto:info@iwascute.com" className="underline hover:opacity-70">
              info@iwascute.com
            </a>
          </p>
        </div>
      </main>
    </>
  )
}