// Final CTA + Footer

function FinalCTA() {
  const [email, setEmail] = React.useState("");
  const [name, setName] = React.useState("");
  return (
    <section id="cta" className="relative py-40 md:py-56 overflow-hidden" data-screen-label="CTA">
      <div className="absolute inset-0 aurora-bg"></div>
      {/* Huge watermark */}
      <div className="absolute inset-0 flex items-end justify-center pointer-events-none select-none overflow-hidden pb-10">
        <span className="font-display font-bold text-white/[0.035]" style={{ fontSize: "clamp(180px, 26vw, 480px)", letterSpacing: "-0.05em", lineHeight: 0.8 }}>palm</span>
      </div>

      <div className="relative max-w-[1280px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-12 gap-10">
          <div className="col-span-12 md:col-span-7">
            <SecLabel num="—">Book a Call</SecLabel>
            <h2 className="mt-6 font-display font-semibold tracking-[-0.025em] leading-[0.92] break-words" style={{ fontSize: "clamp(48px, 6vw, 104px)" }}>
              No pitch.<br/>
              <span className="italic font-light text-[#7a7a7a]">Just a</span><br/>
              <GradientText>conversation.</GradientText>
            </h2>
            <p className="mt-10 text-[#7a7a7a] font-light leading-relaxed max-w-md text-[15px]">
              15-minute video call. No pitch, no deck — just a conversation with someone who actually knows the industry. We'll tell you honestly whether we're the right fit — even if the answer is <span className="text-[#f0ece8]">no</span>.
            </p>
            <p className="mt-6 text-[11px] tracking-[0.3em] uppercase text-[rgba(232,160,160,0.6)]">— We respond to every inquiry personally</p>
          </div>

          <div className="col-span-12 md:col-span-5 md:pl-6">
            <form className="glass-card rounded-lg p-8" onSubmit={(e) => e.preventDefault()}>
              <div className="space-y-5">
                <div>
                  <label className="block text-[10px] tracking-[0.3em] uppercase text-[#7a7a7a] mb-2">— Your Name</label>
                  <input value={name} onChange={(e)=>setName(e.target.value)} className="w-full bg-transparent border-b border-white/10 py-3 text-[15px] text-[#f0ece8] focus:border-[rgba(232,160,160,0.5)] focus:outline-none transition-colors duration-500" placeholder="How friends call you"/>
                </div>
                <div>
                  <label className="block text-[10px] tracking-[0.3em] uppercase text-[#7a7a7a] mb-2">— Best Email</label>
                  <input value={email} onChange={(e)=>setEmail(e.target.value)} className="w-full bg-transparent border-b border-white/10 py-3 text-[15px] text-[#f0ece8] focus:border-[rgba(232,160,160,0.5)] focus:outline-none transition-colors duration-500" placeholder="you@somewhere.com"/>
                </div>
                <div>
                  <label className="block text-[10px] tracking-[0.3em] uppercase text-[#7a7a7a] mb-2">— Page Link (optional)</label>
                  <input className="w-full bg-transparent border-b border-white/10 py-3 text-[15px] text-[#f0ece8] focus:border-[rgba(232,160,160,0.5)] focus:outline-none transition-colors duration-500" placeholder="onlyfans.com/you"/>
                </div>
                <div>
                  <label className="block text-[10px] tracking-[0.3em] uppercase text-[#7a7a7a] mb-2">— Where you are right now</label>
                  <div className="grid grid-cols-2 gap-2 mt-1">
                    {["Just starting","<$5K/mo","$5-15K/mo","$15K+/mo"].map(o => (
                      <button key={o} type="button" className="text-[12px] tracking-[0.1em] py-2.5 px-3 border border-white/10 text-[#7a7a7a] hover:border-[rgba(232,160,160,0.3)] hover:text-[#f0ece8] transition-all duration-500 text-left">{o}</button>
                    ))}
                  </div>
                </div>
              </div>
              <button className="btn-primary w-full justify-between mt-8" data-cursor="lg">
                <span>Send it — no pitch</span><span className="arr">→</span>
              </button>
              <p className="mt-4 text-[10px] tracking-[0.2em] uppercase text-white/25 text-center">Not an application · Just a conversation</p>
            </form>
          </div>
        </div>
      </div>
    </section>
  );
}

function PalmFooter() {
  return (
    <footer className="relative pt-24 pb-10 border-t border-white/[0.05]">
      <div className="max-w-[1600px] mx-auto px-6 md:px-10">
        <div className="grid grid-cols-12 gap-8 mb-20">
          <div className="col-span-12 md:col-span-5">
            <div className="font-display text-[80px] md:text-[120px] font-semibold leading-[0.85] tracking-[-0.03em]">
              <GradientText>palm.</GradientText>
            </div>
            <p className="mt-6 text-[#7a7a7a] font-light max-w-xs text-[14px] leading-relaxed">
              Creator management for OnlyFans — done honestly. Palm Beach &amp; Los Angeles.
            </p>
          </div>

          <div className="col-span-6 md:col-span-2 md:col-start-7">
            <h5 className="text-[10px] tracking-[0.3em] uppercase text-white/30 mb-5">— Company</h5>
            <ul className="space-y-3 text-[13px] text-[#7a7a7a]">
              <li><a href="#" className="hover:text-[#f0ece8] transition-colors">About</a></li>
              <li><a href="#team" className="hover:text-[#f0ece8] transition-colors">Team</a></li>
              <li><a href="#" className="hover:text-[#f0ece8] transition-colors">Careers</a></li>
              <li><a href="#" className="hover:text-[#f0ece8] transition-colors">Press</a></li>
            </ul>
          </div>
          <div className="col-span-6 md:col-span-2">
            <h5 className="text-[10px] tracking-[0.3em] uppercase text-white/30 mb-5">— For Creators</h5>
            <ul className="space-y-3 text-[13px] text-[#7a7a7a]">
              <li><a href="#services" className="hover:text-[#f0ece8] transition-colors">What we do</a></li>
              <li><a href="#experience" className="hover:text-[#f0ece8] transition-colors">How it works</a></li>
              <li><a href="#portal" className="hover:text-[#f0ece8] transition-colors">The Portal</a></li>
              <li><a href="#cta" className="hover:text-[#f0ece8] transition-colors">Get In Touch</a></li>
            </ul>
          </div>
          <div className="col-span-12 md:col-span-3">
            <h5 className="text-[10px] tracking-[0.3em] uppercase text-white/30 mb-5">— Studios</h5>
            <ul className="space-y-3 text-[13px] text-[#7a7a7a]">
              <li><span className="text-[#f0ece8]">Palm Beach</span><br/><span className="text-[11px]">224 Royal Poinciana Way · FL</span></li>
              <li><span className="text-[#f0ece8]">Los Angeles</span><br/><span className="text-[11px]">8150 Beverly Blvd · CA</span></li>
            </ul>
          </div>
        </div>

        <div className="hairline mb-6"></div>
        <div className="flex flex-col md:flex-row items-start md:items-center justify-between gap-4 text-[10px] tracking-[0.25em] uppercase text-white/25">
          <span>© 2026 Palm Management LLC · All Rights Reserved</span>
          <div className="flex gap-6">
            <a href="#" className="hover:text-[#f0ece8]">Privacy</a>
            <a href="#" className="hover:text-[#f0ece8]">Terms</a>
            <a href="#" className="hover:text-[#f0ece8]">Creator Agreement</a>
          </div>
          <span>Made with care · in Florida</span>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { FinalCTA, PalmFooter });