// 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, Section } from '@workspace/ui/components/layout';
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@workspace/ui/components/ui';
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 />
      <Section className="flex-grow">
        <Container>
          <div className="text-center mb-12">
            <h1 className="text-3xl md:text-4xl font-bold">Contact Us</h1>
            <p className="mt-4 text-muted-foreground max-w-2xl mx-auto">
              Book a free architecture call, request a cost estimate, or ask a question.
            </p>
          </div>
          
          <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 max-w-6xl mx-auto">
            {/* Contact Form */}
            <Card>
              <CardHeader>
                <CardTitle>Send us a message</CardTitle>
                <CardDescription>
                  Fill out the form and we'll get back to you as soon as possible.
                </CardDescription>
              </CardHeader>
              <CardContent>
                {submitSuccess ? (
                  <div className="bg-green-500/10 border border-green-500/30 rounded-md p-4 text-green-500">
                    <p className="font-semibold">Message Sent!</p>
                    <p>Thank you for reaching out. We'll get back to you soon.</p>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit} className="space-y-4">
                    <div>
                      <Label htmlFor="name">Name *</Label>
                      <Input
                        id="name"
                        value={name}
                        onChange={(e) => setName(e.target.value)}
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="email">Email *</Label>
                      <Input
                        id="email"
                        type="email"
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                        required
                      />
                    </div>
                    <div>
                      <Label htmlFor="company">Company</Label>
                      <Input
                        id="company"
                        value={company}
                        onChange={(e) => setCompany(e.target.value)}
                      />
                    </div>
                    <div>
                      <Label htmlFor="message">Message *</Label>
                      <Textarea
                        id="message"
                        rows={5}
                        value={message}
                        onChange={(e) => setMessage(e.target.value)}
                        required
                      />
                    </div>
                    {submitError && (
                      <div className="text-red-500 text-sm">{submitError}</div>
                    )}
                    <Button type="submit" disabled={isSubmitting} className="w-full">
                      {isSubmitting ? 'Sending...' : 'Send Message'}
                    </Button>
                  </form>
                )}
              </CardContent>
            </Card>
            
            {/* Calendly Embed and Info */}
            <div>
              <Card className="mb-6">
                <CardHeader>
                  <CardTitle>Book an Architecture Call</CardTitle>
                  <CardDescription>
                    30-minute consultation to discuss your infrastructure and potential savings.
                  </CardDescription>
                </CardHeader>
                <CardContent>
                  <p className="mb-4 text-muted-foreground">
                    During this call, we'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-4 text-center">
                    <p className="text-muted-foreground">Calendly Embed Placeholder</p>
                    <p className="text-sm mt-2">(This would be a real Calendly widget)</p>
                  </div>
                </CardContent>
              </Card>
              
              <Card>
                <CardHeader>
                  <CardTitle>Security Inquiries</CardTitle>
                </CardHeader>
                <CardContent>
                  <p className="mb-4 text-muted-foreground">
                    For sensitive security-related questions, please use our dedicated channel.
                  </p>
                  <Button asChild variant="outline" className="w-full">
                    <a href="mailto:security@fortura.ai">
                      security@fortura.ai
                      <ExternalLinkIcon className="ml-2 size-4" />
                    </a>
                  </Button>
                </CardContent>
              </Card>
            </div>
          </div>
        </Container>
      </Section>
      <Footer />
    </div>
  );
}