import { PublicShell } from "@/components/public/public-shell";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Input } from "@/components/ui/input";

export const metadata = { title: "Contact" };

export default function ContactPage() {
  return (
    <PublicShell>
      <section className="border-b bg-muted/30">
        <div className="container mx-auto max-w-4xl px-6 py-16">
          <p className="text-sm font-medium text-muted-foreground uppercase tracking-wider">Contact</p>
          <h1 className="mt-2 text-4xl md:text-5xl font-semibold tracking-tight">Get in touch.</h1>
          <p className="mt-4 text-lg text-muted-foreground max-w-2xl">
            Partnership, investment, press, or careers — drop us a note.
          </p>
        </div>
      </section>

      <section className="container mx-auto max-w-4xl px-6 py-16 grid md:grid-cols-2 gap-10">
        <div>
          <h2 className="text-2xl font-semibold tracking-tight">Direct lines</h2>
          <ul className="mt-6 space-y-4 text-sm">
            <li>
              <div className="text-muted-foreground">General</div>
              <div className="font-medium">hello@southarmzglobal.com</div>
            </li>
            <li>
              <div className="text-muted-foreground">Investor relations</div>
              <div className="font-medium">invest@southarmzglobal.com</div>
            </li>
            <li>
              <div className="text-muted-foreground">Press</div>
              <div className="font-medium">press@southarmzglobal.com</div>
            </li>
            <li>
              <div className="text-muted-foreground">Headquarters</div>
              <div className="font-medium">Pittsboro · Chatham County · NC</div>
            </li>
          </ul>
        </div>
        <Card>
          <CardContent className="p-6">
            <form className="space-y-4">
              <div>
                <label className="text-sm font-medium">Name</label>
                <Input className="mt-1.5" placeholder="Your name" />
              </div>
              <div>
                <label className="text-sm font-medium">Email</label>
                <Input className="mt-1.5" type="email" placeholder="you@example.com" />
              </div>
              <div>
                <label className="text-sm font-medium">Message</label>
                <textarea
                  className="mt-1.5 min-h-[120px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
                  placeholder="Tell us what you're working on..."
                />
              </div>
              <Button type="submit" variant="brand" className="w-full">Send</Button>
              <p className="text-xs text-muted-foreground">
                Form submission goes live once Supabase is provisioned. For now, please email directly.
              </p>
            </form>
          </CardContent>
        </Card>
      </section>
    </PublicShell>
  );
}