'use client'

import dynamic from 'next/dynamic'
import { motion } from 'framer-motion'
import { fadeUp, viewportConfig } from '@/lib/animations'

const CityRider3D = dynamic(() => import('@/components/three/CityRider3D'), {
  ssr: false,
  loading: () => (
    <div className="w-full h-full flex items-center justify-center bg-purple-soft/60 rounded-3xl">
      <span className="font-mono text-xs text-purple-deep tracking-widest uppercase">
        Loading scene…
      </span>
    </div>
  ),
})

export function ConnectLocally() {
  return (
    <div className="relative py-20 sm:py-28 px-5 sm:px-8 bg-nearle-bgsoft overflow-hidden">
      <div className="max-w-7xl mx-auto">
        <div className="relative rounded-3xl overflow-hidden border border-nearle-border shadow-nearle-md bg-white">
          {/* 3D scene */}
          <div className="relative h-[480px] sm:h-[560px] lg:h-[620px]">
            <CityRider3D />

            {/* Top-left info card */}
            <motion.div
              variants={fadeUp}
              initial="hidden"
              whileInView="visible"
              viewport={viewportConfig}
              className="absolute top-5 left-5 sm:top-7 sm:left-7 max-w-[300px] bg-white border border-nearle-border rounded-2xl px-4 py-3 shadow-nearle-md flex items-start gap-3"
            >
              <div className="w-9 h-9 rounded-xl bg-purple-soft flex items-center justify-center text-lg shrink-0">
                🚚
              </div>
              <div>
                <div className="label-mono text-purple-primary">Nearle Commerce</div>
                <div className="font-display font-extrabold text-nearle-dark text-base leading-tight mt-0.5">
                  Connect Locally
                </div>
                <p className="font-body text-xs text-nearle-mid mt-1.5 leading-snug">
                  Households nearby discover your store and order in a few taps.
                </p>
              </div>
            </motion.div>

            {/* Top-right metrics card */}
            <motion.div
              variants={fadeUp}
              initial="hidden"
              whileInView="visible"
              viewport={viewportConfig}
              className="absolute top-5 right-5 sm:top-7 sm:right-7 w-[260px] bg-white border border-nearle-border rounded-2xl p-4 shadow-nearle-md"
            >
              <div className="label-mono text-nearle-light">Neighbourhood Metrics</div>
              <div className="mt-3 flex items-center justify-between">
                <span className="font-body text-sm text-nearle-mid">Community Progress</span>
                <span className="font-mono text-sm font-bold text-purple-primary">35%</span>
              </div>
              <div className="mt-1.5 h-1.5 rounded-full bg-purple-soft overflow-hidden">
                <motion.div
                  className="h-full bg-gradient-purple"
                  initial={{ width: 0 }}
                  whileInView={{ width: '35%' }}
                  viewport={{ once: true }}
                  transition={{ duration: 1.2, ease: 'easeOut' }}
                />
              </div>
              <div className="mt-4 space-y-1.5 text-sm">
                <div className="flex justify-between">
                  <span className="text-nearle-mid">Status</span>
                  <span className="font-bold text-nearle-dark">Building</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-nearle-mid">Reach</span>
                  <span className="font-bold text-nearle-dark">Neighbourhood</span>
                </div>
                <div className="flex justify-between">
                  <span className="text-nearle-mid">Model</span>
                  <span className="font-bold text-nearle-dark">Hyper-local</span>
                </div>
              </div>
            </motion.div>

            {/* Bottom hint */}
            <motion.div
              initial={{ opacity: 0, y: 10 }}
              whileInView={{ opacity: 1, y: 0 }}
              viewport={{ once: true }}
              transition={{ delay: 0.3 }}
              className="absolute bottom-5 right-5 sm:bottom-7 sm:right-7 bg-white border border-nearle-border rounded-full px-4 py-2 shadow-nearle-sm font-body text-xs text-nearle-mid"
            >
              Scroll down to explore Nearle commerce
            </motion.div>
          </div>
        </div>
      </div>
    </div>
  )
}
