Fortura/apps/www/app/contact/page.tsx

// app/contact/page.tsx

'use client';

import * as React from 'react';
import { ExternalLinkIcon } from 'lucide-react';

import { Navbar } from '@workspace/ui/components/layout';
import { Footer } from '@workspace/ui/components/layout';
import { Container } from '@workspace/ui/components/layout';
import { AnimatedSection } from '@workspace/ui/components/animate-ui/section';
import { Button } from '@workspace/ui/components/ui';
import { Input } from '@workspace/ui/components/ui';
import { Textarea } from '@workspace/ui/components/ui';
import { Label } from '@workspace/ui/components/ui';

export default function ContactPage() {
  // State for form inputs
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [company, setCompany] = React.useState('');
  const [message, setMessage] = React.useState('');
  const [isSubmitting, setIsSubmitting] = React.useState(false);
  const [submitSuccess, setSubmitSuccess] = React.useState(false);
  const [submitError, setSubmitError] = React.useState('');

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);
    setSubmitError('');
    setSubmitSuccess(false);

    // Basic validation
    if (!name || !email || !message) {
      setSubmitError('Please fill in all required fields.');
      setIsSubmitting(false);
      return;
    }

    // Mock submission logic (replace with actual API call)
    setTimeout(() => {
      console.log({ name, email, company, message });
      // Simulate success
      setSubmitSuccess(true);
      setIsSubmitting(false);
      // Reset form
      setName('');
      setEmail('');
      setCompany('');
      setMessage('');
    }, 1000);
  };

  return (
    <div className="flex flex-col min-h-screen">
      <Navbar />
      
      {/* Hero Section */}
      <AnimatedSection className="border-b border-muted">
        <Container maxWidth="10xl">
          <div className="text-center py-20 md:py-28">
            <h1 className="text-4xl md:text-5xl lg:text-6xl font-bold">Contact Us</h1>
            <p className="mt-6 text-xl text-muted-foreground max-w-3xl mx-auto">
              Book a free architecture call, request a cost estimate, or ask a question.
            </p>
          </div>
        </Container>
      </AnimatedSection>
      
      <AnimatedSection className="py-20 border-b border-muted">
        <Container maxWidth="10xl">
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-16 max-w-6xl mx-auto">
            {/* Contact Form */}
            <div className="space-y-6">
              <h2 className="text-3xl font-bold">Send us a message</h2>
              <p className="text-xl text-muted-foreground">
                Fill out the form and we&apos;ll get back to you as soon as possible.
              </p>
              
              {submitSuccess ? (
                <div className="bg-green-500/10 border border-green-500/30 rounded-md p-6 text-green-500">
                  <p className="font-semibold text-xl">Message Sent!</p>
                  <p className="mt-2">Thank you for reaching out. We&apos;ll get back to you soon.</p>
                </div>
              ) : (
                <form onSubmit={handleSubmit} className="space-y-6">
                  <div>
                    <Label htmlFor="name" className="text-lg">Name *</Label>
                    <Input
                      id="name"
                      value={name}
                      onChange={(e) => setName(e.target.value)}
                      required
                      className="mt-2 p-4 text-lg"
                    />
                  </div>
                  <div>
                    <Label htmlFor="email" className="text-lg">Email *</Label>
                    <Input
                      id="email"
                      type="email"
                      value={email}
                      onChange={(e) => setEmail(e.target.value)}
                      required
                      className="mt-2 p-4 text-lg"
                    />
                  </div>
                  <div>
                    <Label htmlFor="company" className="text-lg">Company</Label>
                    <Input
                      id="company"
                      value={company}
                      onChange={(e) => setCompany(e.target.value)}
                      className="mt-2 p-4 text-lg"
                    />
                  </div>
                  <div>
                    <Label htmlFor="message" className="text-lg">Message *</Label>
                    <Textarea
                      id="message"
                      rows={5}
                      value={message}
                      onChange={(e) => setMessage(e.target.value)}
                      required
                      className="mt-2 p-4 text-lg"
                    />
                  </div>
                  {submitError && (
                    <div className="text-red-500 text-lg">{submitError}</div>
                  )}
                  <Button type="submit" disabled={isSubmitting} size="lg" className="w-full mt-4">
                    {isSubmitting ? 'Sending...' : 'Send Message'}
                  </Button>
                </form>
              )}
            </div>
            
            {/* Calendly Embed and Info */}
            <div className="space-y-8">
              <div className="space-y-6 p-8 rounded-lg border border-muted bg-background">
                <h2 className="text-3xl font-bold">Book an Architecture Call</h2>
                <p className="text-xl text-muted-foreground">
                  30-minute consultation to discuss your infrastructure and potential savings.
                </p>
                <p className="text-muted-foreground">
                  During this call, we&apos;ll review your current setup, identify cost-cutting opportunities, and outline a migration path.
                </p>
                {/* Calendly Inline Embed */}
                <div className="bg-muted rounded-lg p-8 text-center">
                  <p className="text-muted-foreground text-xl">Calendly Embed Placeholder</p>
                  <p className="text-sm mt-4">(This would be a real Calendly widget)</p>
                </div>
              </div>
              
              <div className="space-y-6 p-8 rounded-lg border border-muted bg-background">
                <h2 className="text-3xl font-bold">Security Inquiries</h2>
                <p className="text-muted-foreground">
                  For sensitive security-related questions, please use our dedicated channel.
                </p>
                <Button asChild variant="outline" size="lg" className="w-full">
                  <a href="mailto:security@fortura.ai">
                    security@fortura.ai
                    <ExternalLinkIcon className="ml-2 size-5" />
                  </a>
                </Button>
              </div>
            </div>
          </div>
        </Container>
      </AnimatedSection>
      
      <Footer />
    </div>
  );
}