`cypressaward/frontend/app/join-firm/page.tsx`

138 lines
'use client'

import { useState } from 'react'
import { Card } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Building, Users, Award, TrendingUp } from 'lucide-react'

export default function JoinFirmPage() {
  const [formData, setFormData] = useState({
    firmName: '',
    attorneys: '',
    practiceAreas: [],
    contact: '',
    email: '',
    phone: ''
  })

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault()
    // Send to steve@designerwallcoverings.com
    const recipient = 'steve@' + 'designerwallcoverings.com'
    console.log('Sending law firm registration to:', recipient)
    alert('Thank you for registering. We will contact you within 2 business days.')
  }

  return (
    <div className="min-h-screen bg-gray-50 py-12">
      <div className="max-w-4xl mx-auto px-4">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold mb-4">Join as a Law Firm</h1>
          <p className="text-xl text-gray-600">Partner with us for cy pres distributions</p>
        </div>

        <div className="grid md:grid-cols-2 gap-6 mb-8">
          <Card className="p-6">
            <Building className="h-8 w-8 text-blue-600 mb-3" />
            <h3 className="font-bold text-lg mb-2">Why Partner?</h3>
            <ul className="text-sm text-gray-600 space-y-2">
              <li>• Streamlined cy pres distribution process</li>
              <li>• Access to qualified nonprofit network</li>
              <li>• Compliance documentation support</li>
              <li>• Court-ready reporting tools</li>
            </ul>
          </Card>

          <Card className="p-6">
            <Award className="h-8 w-8 text-green-600 mb-3" />
            <h3 className="font-bold text-lg mb-2">Benefits</h3>
            <ul className="text-sm text-gray-600 space-y-2">
              <li>• Enhanced settlement administration</li>
              <li>• Reduced administrative burden</li>
              <li>• Transparent distribution tracking</li>
              <li>• Expert cy pres consultation</li>
            </ul>
          </Card>
        </div>

        <Card className="p-8">
          <h2 className="text-2xl font-bold mb-6">Law Firm Registration</h2>
          <form onSubmit={handleSubmit} className="space-y-6">
            <div className="grid md:grid-cols-2 gap-4">
              <div>
                <label className="block text-sm font-medium mb-2">Firm Name *</label>
                <input
                  type="text"
                  required
                  className="w-full p-2 border rounded-md"
                  value={formData.firmName}
                  onChange={(e) => setFormData({...formData, firmName: e.target.value})}
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">Number of Attorneys</label>
                <select 
                  className="w-full p-2 border rounded-md"
                  value={formData.attorneys}
                  onChange={(e) => setFormData({...formData, attorneys: e.target.value})}
                >
                  <option value="">Select size</option>
                  <option value="1-10">1-10</option>
                  <option value="11-50">11-50</option>
                  <option value="51-200">51-200</option>
                  <option value="200+">200+</option>
                </select>
              </div>
            </div>

            <div>
              <label className="block text-sm font-medium mb-2">Practice Areas</label>
              <div className="grid grid-cols-2 gap-2">
                {['Class Actions', 'Consumer Protection', 'Privacy', 'Employment', 'Securities', 'Antitrust'].map(area => (
                  <label key={area} className="flex items-center space-x-2">
                    <input type="checkbox" />
                    <span className="text-sm">{area}</span>
                  </label>
                ))}
              </div>
            </div>

            <div className="grid md:grid-cols-3 gap-4">
              <div>
                <label className="block text-sm font-medium mb-2">Contact Name *</label>
                <input
                  type="text"
                  required
                  className="w-full p-2 border rounded-md"
                  value={formData.contact}
                  onChange={(e) => setFormData({...formData, contact: e.target.value})}
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">Email *</label>
                <input
                  type="email"
                  required
                  className="w-full p-2 border rounded-md"
                  value={formData.email}
                  onChange={(e) => setFormData({...formData, email: e.target.value})}
                />
              </div>
              <div>
                <label className="block text-sm font-medium mb-2">Phone</label>
                <input
                  type="tel"
                  className="w-full p-2 border rounded-md"
                  value={formData.phone}
                  onChange={(e) => setFormData({...formData, phone: e.target.value})}
                />
              </div>
            </div>

            <Button type="submit" className="w-full">Submit Registration</Button>
          </form>
        </Card>
      </div>
    </div>
  )
}