'use client';

import { motion } from 'framer-motion';
import { WhatsappGlyph, Icon } from './icons';
import { Button } from './ui/button';
import { site } from '@/lib/site';
import { waGeneralInquiry } from '@/lib/whatsapp';

export function WhatsappCtaSection() {
    return (
        <section className="relative bg-mesh-orange bg-noise overflow-hidden">
            <div className="container-jt section-pad relative z-10 grid lg:grid-cols-[1.4fr_1fr] gap-12 items-center">
                <motion.div
                    initial={{ opacity: 0, y: 24 }}
                    whileInView={{ opacity: 1, y: 0 }}
                    viewport={{ once: true, amount: 0.3 }}
                    transition={{ duration: 0.6 }}
                >
                    <span className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-[var(--color-whatsapp)]/15 border border-[var(--color-whatsapp)]/30 text-emerald-300 font-mono text-xs tracking-widest uppercase mb-5">
                        <span className="w-1.5 h-1.5 rounded-full bg-[var(--color-whatsapp)] shadow-[0_0_8px_var(--color-whatsapp)]" />
                        24-hour reply window
                    </span>
                    <h2 className="font-display text-white text-[clamp(2.25rem,4.5vw,4rem)] leading-[0.95] mb-5">
                        Get an instant quote<br/>
                        <span className="text-orange-500">on WhatsApp</span>
                    </h2>
                    <p className="text-steel-300 text-lg max-w-xl mb-8">
                        Tell us your application — load in kVA, head &amp; flow, blade size, anything.
                        A technician sends a sized quote within hours, not days.
                    </p>
                    <div className="flex flex-wrap gap-3">
                        <Button asChild size="xl" variant="whatsapp">
                            <a href={waGeneralInquiry()} target="_blank" rel="noopener">
                                <WhatsappGlyph className="w-5 h-5" />
                                Chat on WhatsApp
                            </a>
                        </Button>
                        <Button asChild size="xl" variant="ghost">
                            <a href={`tel:${site.phone}`}>
                                <Icon.Phone className="w-4 h-4" />
                                {site.phoneDisplay}
                            </a>
                        </Button>
                    </div>
                </motion.div>

                {/* Phone mockup */}
                <motion.div
                    initial={{ opacity: 0, scale: 0.92, y: 20 }}
                    whileInView={{ opacity: 1, scale: 1, y: 0 }}
                    viewport={{ once: true, amount: 0.3 }}
                    transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
                    className="hidden lg:block"
                >
                    <div className="relative mx-auto w-[280px] aspect-[9/19] rounded-[2.4rem] bg-ink-900 border border-white/10 p-3 shadow-2xl">
                        <div className="h-full w-full rounded-[1.9rem] bg-[#0b141a] overflow-hidden flex flex-col">
                            <div className="bg-[#075e54] px-4 py-3 flex items-center gap-3">
                                <div className="w-9 h-9 rounded-full bg-orange-600 flex items-center justify-center text-white font-display text-sm">JT</div>
                                <div className="text-white text-sm leading-tight">
                                    <div className="font-semibold">{site.brand}</div>
                                    <div className="text-[11px] opacity-80">online</div>
                                </div>
                            </div>
                            <div className="flex-1 px-3 py-4 space-y-2 overflow-hidden">
                                <Bubble side="out">Hi {site.brand}, I need a quote for a 15 kVA diesel generator.</Bubble>
                                <Bubble side="in">Hello! Standby or prime power? And what&rsquo;s the runtime per day?</Bubble>
                                <Bubble side="out">Standby for a small clinic, ~6 hrs/day during outages.</Bubble>
                                <Bubble side="in">Got it. Sending you 2 options &amp; a delivery quote in 10 min ✅</Bubble>
                            </div>
                            <div className="border-t border-white/5 p-2 flex items-center gap-2">
                                <div className="flex-1 h-9 rounded-full bg-[#1f2c33] px-3 text-[11px] text-steel-500 flex items-center">Type a message</div>
                                <div className="w-9 h-9 rounded-full bg-[var(--color-whatsapp)] flex items-center justify-center"><WhatsappGlyph className="w-4 h-4 text-white" /></div>
                            </div>
                        </div>
                    </div>
                </motion.div>
            </div>
        </section>
    );
}

function Bubble({ children, side }: { children: React.ReactNode; side: 'in' | 'out' }) {
    return (
        <div className={`max-w-[85%] px-3 py-1.5 rounded-lg text-[12px] leading-snug ${
            side === 'out' ? 'bg-[#005c4b] text-white ml-auto' : 'bg-[#1f2c33] text-white'
        }`}>{children}</div>
    );
}