'use client';

import React from 'react';
import Image from 'next/image';
import GSAPAnimator from '@/components/GSAPAnimator';
import dynamic from 'next/dynamic';

const MapSection = dynamic(() => import('@/components/MapSection'), { ssr: false });

export default function ContactsPage() {
  return (
    <main style={{ background: '#ffffff', minHeight: '100vh', overflowX: 'hidden' }}>
      <GSAPAnimator />

      {/* ── HERO ── */}
      <section style={{
        padding: '120px 8% 100px', background: 'radial-gradient(ellipse 120% 90% at 78% 0%, #2e2350 0%, #221b3e 38%, #191529 100%)',
        margin: '0 20px 20px', borderRadius: '0 0 32px 32px',
        position: 'relative', overflow: 'hidden',
        display: 'flex', alignItems: 'center',
      }}>
        {/* Background photo */}
        <Image src="/images/stock/contacts.jpg" alt="" fill priority style={{ objectFit: 'cover', objectPosition: 'top center', opacity: 0.9 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(25,21,41,0.1) 0%, rgba(25,21,41,0.55) 85%)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(ellipse 60% 65% at 50% 48%, rgba(18,14,30,0.78) 0%, rgba(18,14,30,0.35) 60%, transparent 100%)' }} />
        {/* Accent blobs */}
        <div style={{ position: 'absolute', top: '-10%', left: '-8%', width: 480, height: 480, borderRadius: '50%', background: 'radial-gradient(circle, rgba(244,190,40,0.2) 0%, transparent 70%)', pointerEvents: 'none' }} />
        <div style={{ position: 'absolute', bottom: '-18%', right: '-6%', width: 440, height: 440, borderRadius: '50%', background: 'radial-gradient(circle, rgba(167,139,250,0.18) 0%, transparent 70%)', pointerEvents: 'none' }} />
        {/* Grid texture */}
        <div style={{
          position: 'absolute', inset: 0, pointerEvents: 'none',
          backgroundImage: 'linear-gradient(rgba(244,190,40,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(244,190,40,0.025) 1px,transparent 1px)',
          backgroundSize: '60px 60px',
        }} />

        <div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'flex', flexDirection: 'column', alignItems: 'center', textAlign: 'center' }}>
          <div style={{ maxWidth: 760 }}>
            <div style={{
              fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
              color: '#f4be28', fontFamily: 'Sora, sans-serif', marginBottom: 32,
              display: 'inline-flex', alignItems: 'center', gap: 10,
              padding: '8px 18px', borderRadius: 100,
              background: 'rgba(244,190,40,0.08)', border: '1px solid rgba(244,190,40,0.22)',
            }}>
              <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', display: 'block' }} />Contact
            </div>
            <h1 data-gsap="heading" style={{
              fontSize: 'clamp(48px, 8vw, 120px)', fontWeight: 900,
              letterSpacing: '-0.05em', lineHeight: 0.9,
              color: '#fff', margin: '0 0 28px', fontFamily: 'Sora, sans-serif',
            }}>
              Let's build<br />
              <span style={{ color: '#f4be28' }}>something smart.</span>
            </h1>
            <p data-gsap="text" style={{
              fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75,
              color: 'rgba(255,255,255,0.55)', fontFamily: 'Sora, sans-serif',
              maxWidth: 540, margin: '0 auto',
            }}>
              Tell us about your store and your goals. Our team will get back to you within one business day.
            </p>

            {/* Quick contact chips */}
            <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 12, marginTop: 44 }}>
              {[
                { label: 'loyalydigital@gmail.com', href: 'mailto:loyalydigital@gmail.com' },
                { label: 'Coimbatore, TN', href: undefined },
              ].map((c) => {
                const inner = (
                  <span style={{
                    display: 'inline-flex', alignItems: 'center', gap: 8,
                    padding: '10px 18px', borderRadius: 100,
                    background: 'rgba(255,255,255,0.07)', border: '1px solid rgba(255,255,255,0.14)',
                    fontSize: 14, fontWeight: 600, color: 'rgba(255,255,255,0.8)',
                    fontFamily: 'Sora, sans-serif',
                  }}>
                    <span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', display: 'block' }} />
                    {c.label}
                  </span>
                );
                return c.href
                  ? <a key={c.label} href={c.href} style={{ textDecoration: 'none' }}>{inner}</a>
                  : <span key={c.label}>{inner}</span>;
              })}
            </div>
          </div>
        </div>
      </section>

      {/* ── MAP ── */}
      <MapSection />

      {/* The Get in Touch form is rendered globally above the footer via layout.tsx */}
    </main>
  );
}