import { useMemo, useState } from "react";import { motion } from "framer-motion";import { Card, CardContent } from "@/components/ui/card";import { Button } from "@/components/ui/button";import { Input } from "@/components/ui/input";import { Textarea } from "@/components/ui/textarea";const COPY = {pt: {langLabel: "PT",brand: "Gávea&Tender",tagline: "Rigor jurídico, proximidade e soluções eficazes.",cta: "Marcar Consulta",aboutTitle: "Sobre Nós",aboutText:"Somos um escritório de advogadas com experiência em diversas áreas do direito, focado na defesa dos interesses dos nossos clientes com ética, confidencialidade e profissionalismo.",highlights: ["Atendimento personalizado", "Experiência comprovada", "Transparência e confiança"],practiceTitle: "Áreas de Atuação",practices: ["Direito Civil","Direito Penal","Direito do Trabalho","Direito Comercial","Direito da Família","Direito Imobiliário",],contactTitle: "Contacto",contactText: "Envie-nos uma mensagem para uma análise preliminar do seu caso.",form: {name: "Nome",email: "Email",phone: "Telefone (opcional)",subject: "Assunto",message: "Mensagem",consent:"Autorizo o tratamento dos meus dados para fins de resposta ao meu pedido (RGPD).",send: "Enviar",sending: "A enviar…",sent: "Mensagem enviada! Responderemos em breve.",error: "Não foi possível enviar. Tente novamente mais tarde.",},details: {location: "Lisboa, Portugal",phone: "+351 000 000 000",email: "geral@gaveatender.pt",},footer: "Todos os direitos reservados.",},en: {langLabel: "EN",brand: "Gávea&Tender",tagline: "Legal rigor, client proximity, effective solutions.",cta: "Book a Consultation",aboutTitle: "About Us",aboutText:"We are a women-led law firm with experience across multiple practice areas, focused on protecting our clients’ interests with ethics, confidentiality, and professionalism.",highlights: ["Tailored support", "Proven experience", "Transparency & trust"],practiceTitle: "Practice Areas",practices: ["Civil Law","Criminal Law","Employment Law","Commercial Law","Family Law","Real Estate Law",],contactTitle: "Contact",contactText: "Send us a message for a preliminary review of your matter.",form: {name: "Name",email: "Email",phone: "Phone (optional)",subject: "Subject",message: "Message",consent: "I consent to the processing of my data to reply to my request (GDPR).",send: "Send",sending: "Sending…",sent: "Message sent! We’ll get back to you shortly.",error: "Could not send. Please try again later.",},details: {location: "Lisbon, Portugal",phone: "+351 000 000 000",email: "hello@gaveatender.pt",},footer: "All rights reserved.",},};function LogoMark() {// Placeholder logo: replaces easily with SVG/PNG later.return (<div className="flex items-center gap-3"><div className="h-10 w-10 rounded-2xl bg-white/10 ring-1 ring-white/20 grid place-items-center"><span className="font-semibold tracking-tight">G&T</span></div><div className="leading-tight"><div className="font-semibold tracking-tight">Gávea&Tender</div><div className="text-xs text-slate-300">Advogadas</div></div></div>);}export default function AdvogadasSite() {const [lang, setLang] = useState("pt");const t = useMemo(() => COPY[lang], [lang]);const [form, setForm] = useState({ name: "", email: "", phone: "", subject: "", message: "", consent: false });const [status, setStatus] = useState("idle"); // idle | sending | sent | errorconst mailtoHref = useMemo(() => {const subject = encodeURIComponent(`[Website] ${form.subject || "Contacto"}`);const body = encodeURIComponent(`${lang === "pt" ? "Nome" : "Name"}: ${form.name}` +`Email: ${form.email}` +`${lang === "pt" ? "Telefone" : "Phone"}: ${form.phone || "-"}` +`${form.message}`);return `mailto:${t.details.email}?subject=${subject}&body=${body}`;}, [form, lang, t.details.email]);async function onSubmit(e) {e.preventDefault();// Nota: para envio real (ex: API route / serverless), posso integrar depois.if (!form.consent) return;setStatus("sending");try {// Simula envio e abre o email do utilizador como fallback universal.setTimeout(() => {window.location.href = mailtoHref;setStatus("sent");}, 450);} catch {setStatus("error");}}return (<div className="min-h-screen bg-slate-50 text-slate-900">{}<header className="bg-slate-900 text-white"><div className="max-w-6xl mx-auto px-6 py-5 flex items-center justify-between gap-4"><LogoMark /><div className="flex items-center gap-2"><buttontype="button"onClick={() => setLang("pt")}className={`px-3 py-1.5 rounded-full text-sm ring-1 ring-white/20 ${lang === "pt" ? "bg-white/15" : "bg-transparent hover:bg-white/10"}`}aria-label="Português">PT</button><buttontype="button"onClick={() => setLang("en")}className={`px-3 py-1.5 rounded-full text-sm ring-1 ring-white/20 ${lang === "en" ? "bg-white/15" : "bg-transparent hover:bg-white/10"}`}aria-label="English">EN</button></div></div></header>{}<section className="bg-slate-900 text-white py-16 md:py-20 px-6"><motion.divinitial={{ opacity: 0, y: 18 }}animate={{ opacity: 1, y: 0 }}transition={{ duration: 0.6 }}className="max-w-6xl mx-auto grid md:grid-cols-2 gap-10 items-center"><div><h1 className="text-4xl md:text-5xl font-bold mb-5 tracking-tight">{t.brand}</h1><p className="text-lg md:text-xl text-slate-300 mb-8">{t.tagline}</p><div className="flex flex-wrap gap-3"><ButtonclassName="text-lg px-7 py-5 rounded-2xl"onClick={() => document.getElementById("contact")?.scrollIntoView({ behavior: "smooth" })}>{t.cta}</Button><Buttonvariant="secondary"className="text-lg px-7 py-5 rounded-2xl bg-white/10 hover:bg-white/15 text-white"onClick={() => document.getElementById("areas")?.scrollIntoView({ behavior: "smooth" })}>{lang === "pt" ? "Ver áreas" : "View areas"}</Button></div></div><Card className="rounded-3xl bg-white/5 border-white/10 shadow-lg"><CardContent className="p-7"><div className="text-sm uppercase tracking-widest text-slate-300 mb-3">{lang === "pt" ? "Compromisso" : "Commitment"}</div><ul className="space-y-3 text-slate-100">{t.highlights.map((h) => (<li key={h} className="flex items-start gap-3"><span className="mt-1 inline-block h-2.5 w-2.5 rounded-full bg-emerald-400" /><span className="text-base">{h}</span></li>))}</ul><div className="mt-6 text-xs text-slate-300 leading-relaxed">{lang === "pt"? "* Informação geral — não constitui aconselhamento jurídico.": "* General information — not legal advice."}</div></CardContent></Card></motion.div></section>{}<section className="py-16 px-6"><div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-10 items-center"><motion.div initial={{ opacity: 0 }} whileInView={{ opacity: 1 }} viewport={{ once: true }}><h2 className="text-3xl font-semibold mb-4">{t.aboutTitle}</h2><p className="text-slate-600 leading-relaxed">{t.aboutText}</p></motion.div><Card className="rounded-2xl shadow-lg"><CardContent className="p-6"><p className="text-slate-700 leading-7">{t.highlights.map((h) => (<span key={h} className="block">✔ {h}</span>))}</p></CardContent></Card></div></section>{}<section id="areas" className="bg-white py-16 px-6"><div className="max-w-6xl mx-auto"><h2 className="text-3xl font-semibold text-center mb-12">{t.practiceTitle}</h2><div className="grid sm:grid-cols-2 md:grid-cols-3 gap-6">{t.practices.map((area) => (<Card key={area} className="rounded-2xl shadow-sm hover:shadow-md transition"><CardContent className="p-6 text-center font-medium">{area}</CardContent></Card>))}</div></div></section>{}<section id="contact" className="bg-slate-100 py-16 px-6"><div className="max-w-5xl mx-auto grid md:grid-cols-2 gap-10"><div><h2 className="text-3xl font-semibold mb-4">{t.contactTitle}</h2><p className="text-slate-600 mb-8">{t.contactText}</p><div className="space-y-3 text-slate-700"><p>📍 {t.details.location}</p><p>📞 {t.details.phone}</p><p>✉️ {t.details.email}</p></div><Card className="mt-8 rounded-2xl"><CardContent className="p-6 text-sm text-slate-600 leading-relaxed">{lang === "pt" ? (<><strong>Nota:</strong> Este formulário abre o seu cliente de email (fallback). Se preferir,posso integrar envio real via API (por exemplo, Microsoft Forms, Power Automate, ou endpointdo seu servidor) e também reCAPTCHA/anti-spam.</>) : (<><strong>Note:</strong> This form opens your email client (fallback). If you prefer, I canintegrate real delivery via API (e.g., Microsoft Forms, Power Automate, or your serverendpoint) plus reCAPTCHA/anti-spam.</>)}</CardContent></Card></div><Card className="rounded-3xl shadow-lg"><CardContent className="p-7"><form onSubmit={onSubmit} className="space-y-4"><div className="grid sm:grid-cols-2 gap-4"><div><label className="text-sm font-medium" htmlFor="name">{t.form.name}</label><Inputid="name"value={form.name}onChange={(e) => setForm((s) => ({ ...s, name: e.target.value }))}placeholder={t.form.name}required/></div><div><label className="text-sm font-medium" htmlFor="email">{t.form.email}</label><Inputid="email"type="email"value={form.email}onChange={(e) => setForm((s) => ({ ...s, email: e.target.value }))}placeholder={t.form.email}required/></div></div><div className="grid sm:grid-cols-2 gap-4"><div><label className="text-sm font-medium" htmlFor="phone">{t.form.phone}</label><Inputid="phone"value={form.phone}onChange={(e) => setForm((s) => ({ ...s, phone: e.target.value }))}placeholder={t.form.phone}/></div><div><label className="text-sm font-medium" htmlFor="subject">{t.form.subject}</label><Inputid="subject"value={form.subject}onChange={(e) => setForm((s) => ({ ...s, subject: e.target.value }))}placeholder={t.form.subject}required/></div></div><div><label className="text-sm font-medium" htmlFor="message">{t.form.message}</label><Textareaid="message"value={form.message}onChange={(e) => setForm((s) => ({ ...s, message: e.target.value }))}placeholder={t.form.message}rows={6}required/></div><label className="flex items-start gap-3 text-sm text-slate-600"><inputtype="checkbox"className="mt-1"checked={form.consent}onChange={(e) => setForm((s) => ({ ...s, consent: e.target.checked }))}required/><span>{t.form.consent}</span></label><Buttontype="submit"className="w-full rounded-2xl py-5 text-base"disabled={status === "sending" || !form.consent}>{status === "sending" ? t.form.sending : t.form.send}</Button>{status === "sent" && (<p className="text-sm text-emerald-700">{t.form.sent}</p>)}{status === "error" && (<p className="text-sm text-rose-700">{t.form.error}</p>)}<p className="text-xs text-slate-500 leading-relaxed">{lang === "pt"? "Ao submeter, não cria relação advogado-cliente. Não partilhe informação sensível antes de confirmarmos instruções e conflito de interesses.": "Submitting this form does not create an attorney-client relationship. Do not share sensitive information until we confirm engagement and conflict checks."}</p></form></CardContent></Card></div></section>{}<footer className="bg-slate-900 text-slate-400 py-6 text-center text-sm">© {new Date().getFullYear()} {t.brand}. {t.footer}</footer></div>);}