{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "contact-2",
  "title": "Contact Exemple 2",
  "description": "Frequently asked questions section with collapsible items.",
  "dependencies": [
    "framer-motion",
    "lucide-react"
  ],
  "files": [
    {
      "path": "registry/default/blocks/Contact/contact2.tsx",
      "content": "\"use client\";\n\nimport { useRef, useState } from \"react\";\nimport { motion, useInView, cubicBezier } from \"framer-motion\";\nimport { Mail, MapPin, Phone, ArrowRight, Check } from \"lucide-react\";\n\n// ─── Animation variants ──────────────────────────────────────────────────────\nconst customEase = cubicBezier(0.4, 0, 0.2, 1);\n\nconst fadeUp = (delay = 0) => ({\n    hidden: { opacity: 0, y: 22 },\n    visible: { opacity: 1, y: 0, transition: { duration: 0.52, ease: customEase, delay } },\n});\n\nconst fadeLeft = (delay = 0) => ({\n    hidden: { opacity: 0, x: -20 },\n    visible: { opacity: 1, x: 0, transition: { duration: 0.52, ease: customEase, delay } },\n});\n\nconst fadeRight = (delay = 0) => ({\n    hidden: { opacity: 0, x: 20 },\n    visible: { opacity: 1, x: 0, transition: { duration: 0.52, ease: customEase, delay } },\n});\n\n// ─── Contact info items ──────────────────────────────────────────────────────\nconst contactInfo = [\n    { icon: <Mail size={18} strokeWidth={1.8} />, label: \"support@bagui.dev\" },\n    { icon: <MapPin size={18} strokeWidth={1.8} />, label: \"123 Tech Avenue, San Francisco, USA\" },\n    { icon: <Phone size={18} strokeWidth={1.8} />, label: \"+1 (000) 555-6666\" },\n];\n\n// ─── Field component ─────────────────────────────────────────────────────────\nfunction Field({\n                   label,\n                   placeholder,\n                   type = \"text\",\n                   textarea = false,\n                   delay = 0,\n                   inView,\n               }: {\n    label: string;\n    placeholder: string;\n    type?: string;\n    textarea?: boolean;\n    delay?: number;\n    inView: boolean;\n}) {\n    const [focused, setFocused] = useState(false);\n\n    const inputClass = [\n        \"w-full bg-white text-[14px] text-gray-800 placeholder:text-gray-400\",\n        \"border border-gray-200 rounded-xl px-4 outline-none\",\n        \"transition-all duration-200\",\n        focused ? \"border-gray-800 ring-[3px] ring-gray-100\" : \"hover:border-gray-300\",\n        textarea ? \"py-3.5 resize-none h-[140px]\" : \"h-[50px]\",\n    ].join(\" \");\n\n    return (\n        <motion.div\n            variants={fadeUp(delay)}\n            initial=\"hidden\"\n            animate={inView ? \"visible\" : \"hidden\"}\n        >\n            <label className=\"block text-[13.5px] font-semibold text-gray-800 mb-2\">\n                {label}\n            </label>\n            {textarea ? (\n                <textarea\n                    placeholder={placeholder}\n                    className={inputClass}\n                    onFocus={() => setFocused(true)}\n                    onBlur={() => setFocused(false)}\n                />\n            ) : (\n                <input\n                    type={type}\n                    placeholder={placeholder}\n                    className={inputClass}\n                    onFocus={() => setFocused(true)}\n                    onBlur={() => setFocused(false)}\n                />\n            )}\n        </motion.div>\n    );\n}\n\n// ─── Main component ───────────────────────────────────────────────────────────\nexport default function ContactSection() {\n    const ref = useRef<HTMLElement>(null);\n    const inView = useInView(ref, { once: true, margin: \"-60px\" });\n    const [sent, setSent] = useState(false);\n    const [loading, setLoading] = useState(false);\n\n    function handleSubmit(e: React.FormEvent) {\n        e.preventDefault();\n        setLoading(true);\n        setTimeout(() => { setLoading(false); setSent(true); }, 1400);\n    }\n\n    return (\n        <section\n            ref={ref}\n            className=\"w-full min-h-screen bg-white flex items-center justify-center px-6 py-24\"\n            style={{ fontFamily: \"'Inter', 'DM Sans', sans-serif\" }}\n        >\n            <div className=\"w-full max-w-5xl grid grid-cols-1 lg:grid-cols-2 gap-16 lg:gap-20 items-stretch\">\n\n                {/* ── Left column ── */}\n                <div className=\"flex flex-col justify-between min-h-[520px]\">\n\n                    {/* Top: Headline + Subtitle */}\n                    <div>\n                        <motion.h1\n                            variants={fadeLeft(0)}\n                            initial=\"hidden\"\n                            animate={inView ? \"visible\" : \"hidden\"}\n                            className=\"text-[52px] sm:text-[62px] font-black leading-[1.05] tracking-[-0.03em] text-gray-950 mb-6\"\n                        >\n                            Talk to our<br />support team\n                        </motion.h1>\n\n                        <motion.p\n                            variants={fadeLeft(0.1)}\n                            initial=\"hidden\"\n                            animate={inView ? \"visible\" : \"hidden\"}\n                            className=\"text-[15px] text-gray-400 leading-relaxed max-w-xs\"\n                        >\n                            Feel free to reach out for help with your order or any questions you may have regarding your purchase.\n                        </motion.p>\n                    </div>\n\n                    {/* Bottom: Contact info */}\n                    <div className=\"flex flex-col gap-5 mb-2\">\n                        {contactInfo.map((item, i) => (\n                            <motion.div\n                                key={i}\n                                variants={fadeLeft(0.18 + i * 0.08)}\n                                initial=\"hidden\"\n                                animate={inView ? \"visible\" : \"hidden\"}\n                                className=\"flex items-center gap-4\"\n                            >\n                                <div className=\"w-10 h-10 rounded-xl border border-gray-200 bg-gray-50 flex items-center justify-center text-gray-600 flex-shrink-0\">\n                                    {item.icon}\n                                </div>\n                                <span className=\"text-[14.5px] font-medium text-gray-700\">{item.label}</span>\n                            </motion.div>\n                        ))}\n                    </div>\n                </div>\n\n                {/* ── Right column: form card ── */}\n                <motion.div\n                    variants={fadeRight(0.08)}\n                    initial=\"hidden\"\n                    animate={inView ? \"visible\" : \"hidden\"}\n                    className=\"bg-[#f5f5f5] rounded-3xl p-8 sm:p-10\"\n                >\n                    {sent ? (\n                        <motion.div\n                            initial={{ opacity: 0, scale: 0.94 }}\n                            animate={{ opacity: 1, scale: 1 }}\n                            transition={{ duration: 0.42, ease: customEase }}\n                            className=\"flex flex-col items-center justify-center py-16 text-center\"\n                        >\n                            <div className=\"w-14 h-14 rounded-full bg-gray-900 flex items-center justify-center mb-5\">\n                                <Check size={24} strokeWidth={2.2} className=\"text-white\" />\n                            </div>\n                            <h3 className=\"text-[20px] font-bold text-gray-900 mb-2\">Message sent!</h3>\n                            <p className=\"text-[14px] text-gray-400\">We'll get back to you as soon as possible.</p>\n                            <button\n                                onClick={() => setSent(false)}\n                                className=\"mt-8 text-[13px] font-medium text-gray-500 underline underline-offset-2 hover:text-gray-800 transition-colors\"\n                            >\n                                Send another message\n                            </button>\n                        </motion.div>\n                    ) : (\n                        <form onSubmit={handleSubmit} className=\"flex flex-col gap-5\">\n                            <Field label=\"Full Name\" placeholder=\"Enter Your Full Name\" delay={0.1} inView={inView} />\n                            <Field label=\"Email Address\" placeholder=\"Enter Your Email Address\" type=\"email\" delay={0.17} inView={inView} />\n                            <Field label=\"Phone Number\" placeholder=\"Enter Your Phone Number\" type=\"tel\" delay={0.24} inView={inView} />\n                            <Field label=\"Message\" placeholder=\"Write Your Message Here\" textarea delay={0.31} inView={inView} />\n\n                            <motion.div\n                                variants={fadeUp(0.38)}\n                                initial=\"hidden\"\n                                animate={inView ? \"visible\" : \"hidden\"}\n                            >\n                                <button\n                                    type=\"submit\"\n                                    disabled={loading}\n                                    className=\"group flex items-center gap-2.5 bg-black hover:bg-gray-800 active:scale-[.98] text-white font-semibold text-[14.5px] px-6 py-3.5 rounded-2xl transition-all duration-200 disabled:opacity-70 cursor-pointer\"\n                                >\n                                    {loading ? (\n                                        <>\n                                            <svg className=\"animate-spin w-4 h-4\" viewBox=\"0 0 24 24\" fill=\"none\">\n                                                <circle className=\"opacity-25\" cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" strokeWidth=\"3\" />\n                                                <path className=\"opacity-75\" fill=\"currentColor\" d=\"M4 12a8 8 0 018-8v8z\" />\n                                            </svg>\n                                            Sending…\n                                        </>\n                                    ) : (\n                                        <>\n                                            Send Message\n                                            <span className=\"transition-transform duration-200 group-hover:translate-x-1\">\n                                                <ArrowRight size={17} strokeWidth={2} />\n                                            </span>\n                                        </>\n                                    )}\n                                </button>\n                            </motion.div>\n                        </form>\n                    )}\n                </motion.div>\n            </div>\n        </section>\n    );\n}",
      "type": "registry:block",
      "target": "components/blocks/contact-ex-2.tsx"
    }
  ],
  "type": "registry:block"
}