import React, { useState, useEffect } from 'react';
import { createRoot } from 'react-dom/client';
import { ArrowRight, MapPin, Mail, Instagram, Facebook, Linkedin } from 'lucide-react';

// --- Configuration ---
const cacheBuster = `?v=${Date.now()}`;
const IMAGES = {
  logo: 'logo.png' + cacheBuster, 
  founders: 'founders.png' + cacheBuster,
};

const App: React.FC = () => {
  const [email, setEmail] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const [isVisible, setIsVisible] = useState(false);
  const [logoError, setLogoError] = useState(false);
  const [foundersError, setFoundersError] = useState(false);

  useEffect(() => {
    // Immediate visibility to prevent black screen
    setIsVisible(true);
  }, []);

  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (!email) return;

    try {
      const formData = new FormData();
      formData.append('email', email);
      formData.append('_subject', 'New Registry: Roque Pages Realty');
      formData.append('_captcha', 'false');

      // Use the info@roquepagesrealty.com email for submission
      await fetch("https://formsubmit.co/ajax/info@roquepagesrealty.com", {
        method: "POST",
        body: formData
      });
      
      setSubmitted(true);
      setEmail('');
    } catch (error) {
      console.error("Submission failed", error);
      // Fallback: direct post if fetch fails
      const form = e.currentTarget;
      form.action = "https://formsubmit.co/info@roquepagesrealty.com";
      form.method = "POST";
      form.submit();
    }
  };

  return (
    <div className={`min-h-screen w-full flex flex-col md:flex-row bg-[#0A0A0A] selection:bg-[#8C6239] selection:text-white transition-opacity duration-500 ${isVisible ? 'opacity-100' : 'opacity-0'}`}>
      
      {/* LEFT COLUMN: BRANDING & CTA */}
      <div className="w-full md:w-[42%] lg:w-[38%] flex flex-col justify-between p-8 md:p-12 lg:p-16 xl:p-20 relative z-40 bg-[#0A0A0A] border-r border-white/5 overflow-y-auto">
        
        {/* LOGO AREA */}
        <header className="mb-12">
          <div className="w-full max-w-[160px] md:max-w-[180px] aspect-[3/4] bg-[#121212] flex flex-col items-center justify-center p-6 border border-white/5 shadow-[0_20px_50px_rgba(0,0,0,0.5)] relative overflow-hidden group">
            <div className="absolute inset-0 bg-gradient-to-br from-white/5 to-transparent opacity-50"></div>
            {!logoError ? (
              <img 
                src={IMAGES.logo} 
                alt="Roque Pages Realty" 
                className="w-full h-auto object-contain relative z-10" 
                onError={() => setLogoError(true)}
              />
            ) : (
              <div className="flex flex-col text-center relative z-10">
                <span className="text-white font-serif tracking-[0.2em] text-lg block uppercase font-bold">ROQUE PAGES</span>
                <span className="text-[#8C6239] tracking-[0.4em] text-[10px] block mt-1 uppercase font-bold">Realty</span>
              </div>
            )}
          </div>
        </header>

        {/* HERO TEXT */}
        <div className="py-8">
          <h2 className="text-[#8C6239] uppercase tracking-[0.4em] text-[10px] font-bold mb-8 flex items-center gap-4">
            <span className="w-10 h-[1px] bg-[#8C6239]"></span>
            Coral Gables, Florida
          </h2>
          <h1 className="text-white font-serif text-5xl md:text-6xl lg:text-7xl leading-[0.95] mb-8 tracking-tight">
            Buy smart <br />
            <span className="italic font-light text-white/90"> Sell Strong.</span>
          </h1>
          <p className="text-white/40 text-sm md:text-base font-light mb-12 leading-relaxed max-w-[340px]">
            We are curating an exclusive real estate journey in South Florida. Join our private registry to receive an invitation to our limited unveiling.
          </p>

          {/* SIGNUP FORM */}
          <div className="transition-all duration-700">
            {submitted ? (
              <div className="p-8 border border-[#8C6239]/30 bg-[#8C6239]/5 backdrop-blur-sm rounded-sm text-left">
                <h4 className="text-white font-serif text-2xl mb-2 italic">Thank You</h4>
                <p className="text-[#8C6239] font-light text-sm tracking-widest uppercase">Registry Confirmed.</p>
              </div>
            ) : (
              <form onSubmit={handleSubmit} className="space-y-10 max-w-[420px]">
                <div className="space-y-4">
                  <label htmlFor="email" className="block text-white/40 tracking-[0.25em] text-[10px] uppercase font-bold">
                    Private Registry Email
                  </label>
                  <input 
                    id="email"
                    name="email"
                    type="email" 
                    required
                    value={email}
                    onChange={(e) => setEmail(e.target.value)}
                    className="w-full bg-transparent border-b border-white/10 px-0 py-3 text-white focus:outline-none focus:border-[#ED1C24] transition-all tracking-[0.1em] font-light placeholder:text-white/10"
                    placeholder="your@email.com"
                  />
                  <input type="hidden" name="_captcha" value="false" />
                  <input type="hidden" name="_next" value={window.location.href} />
                </div>
                <button 
                  type="submit"
                  className="w-full bg-[#ED1C24] text-white py-5 px-8 font-bold uppercase tracking-[0.25em] text-[11px] flex items-center justify-center gap-4 hover:bg-[#d0191f] transition-all duration-500 active:scale-[0.98] group shadow-2xl"
                >
                  Join Private Registry
                  <ArrowRight size={14} className="group-hover:translate-x-2 transition-transform duration-500" />
                </button>
              </form>
            )}
          </div>
        </div>

        {/* FOOTER */}
        <footer className="mt-16 flex flex-col gap-8">
          <div className="flex flex-wrap items-center gap-x-10 gap-y-4">
            <div className="flex items-center gap-3 text-white/40 text-[9px] uppercase tracking-[0.3em]">
              <MapPin size={12} className="text-[#ED1C24]" />
              Coral Gables
            </div>
            <div className="flex items-center gap-3 text-white/40 text-[9px] uppercase tracking-[0.3em]">
              <Mail size={12} className="text-[#8C6239]" />
              info@roquepagesrealty.com
            </div>
          </div>
          <div className="flex gap-8">
            <a href="#" className="text-white/20 hover:text-white transition-all transform hover:-translate-y-1"><Instagram size={18} /></a>
            <a href="#" className="text-white/20 hover:text-white transition-all transform hover:-translate-y-1"><Facebook size={18} /></a>
            <a href="#" className="text-white/20 hover:text-white transition-all transform hover:-translate-y-1"><Linkedin size={18} /></a>
          </div>
        </footer>
      </div>

      {/* RIGHT COLUMN: FOUNDERS + POP CARD */}
      <div className="w-full md:w-[58%] lg:w-[62%] min-h-[85vh] md:min-h-screen bg-white relative flex items-end md:items-center justify-center overflow-hidden z-10 p-6 md:p-0">
        
        {/* Subtle Background Mark */}
        <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 pointer-events-none select-none opacity-[0.03] z-0">
          <span className="text-black font-serif text-[30rem] md:text-[40rem] lg:text-[50rem] font-bold leading-none tracking-tighter">
            ROQUE
          </span>
        </div>

        {/* Main Founders Image - Use object-top on mobile to keep faces visible */}
        {!foundersError ? (
          <img 
            src={IMAGES.founders} 
            alt="Roque Pages Realty Founders" 
            className="absolute inset-0 h-full w-full object-cover object-top md:object-center z-10"
            onError={() => setFoundersError(true)}
          />
        ) : (
          <div className="absolute inset-0 bg-[#f9f9f9] z-10" />
        )}

        {/* Floating Glass Pop Card - Pushed to bottom on mobile, smaller scale */}
        <div 
          className={`relative z-30 w-full max-w-[460px] md:w-[85%] aspect-video bg-white/80 backdrop-blur-2xl shadow-[0_40px_100px_rgba(0,0,0,0.15)] border border-white/60 flex flex-col items-center justify-center text-center p-6 md:p-12 mb-8 md:mb-0 transition-all duration-1000 ease-out delay-500 ${isVisible ? 'opacity-100 scale-100 translate-y-0' : 'opacity-0 scale-95 translate-y-8'}`}
        >
          <h3 className="font-serif text-3xl md:text-5xl lg:text-6xl text-[#1a202c] italic tracking-tight mb-2 leading-tight">
            Roque Pages <br /> Realty
          </h3>
          <p className="mt-6 md:mt-8 text-[#8C6239] uppercase tracking-[0.4em] md:tracking-[0.45em] text-[10px] md:text-[12px] font-bold">
            Buy smart, Sell Strong
          </p>
          <div className="w-12 md:w-16 h-[1.5px] bg-[#ED1C24] mt-8 md:mt-10"></div>
        </div>

        {/* Red Vertical Bar */}
        <div className="absolute top-0 right-0 h-full w-2 md:w-3 bg-[#ED1C24] z-50"></div>
      </div>

      <style>{`
        body { background-color: #0A0A0A; }
        input:-webkit-autofill {
          -webkit-text-fill-color: white !important;
          -webkit-box-shadow: 0 0 0px 1000px #0A0A0A inset !important;
        }
        @media (max-width: 768px) {
          .min-h-screen { height: -webkit-fill-available; }
        }
      `}</style>
    </div>
  );
};

// Explicit mount point
const container = document.getElementById('root');
if (container) {
  const root = createRoot(container);
  root.render(<App />);
}