import { motion } from "framer-motion";
import { Reveal } from "@/components/Reveal";
import { TopoTexture } from "@/components/TopoTexture";
import fortuneLogo from "@/assets/fortune-logo.avif.asset.json";

export function Inquiry() {
  return (
    <section id="inquiry" className="relative isolate overflow-hidden bg-ink text-paper py-32 md:py-48 border-t border-line-dark">
      <TopoTexture opacity={0.1} />
      <div className="relative z-10 mx-auto max-w-[1440px] px-6 md:px-12 text-center">
        <Reveal>
          <span className="label text-gold">09 · Private Inquiries</span>
        </Reveal>
        <Reveal delay={0.1}>
          <img
            src={fortuneLogo.url}
            alt="Fortune International Realty"
            className="mt-10 mx-auto block w-[160px] md:w-[220px] max-w-full h-auto"
          />
        </Reveal>
        <Reveal delay={0.2}>
          <p className="mt-10 max-w-xl mx-auto text-stone-300 leading-relaxed text-[15px] md:text-base">
            We invite qualified investors, developers, and private buyers to explore this
            opportunity. Offering portfolio and site visits are arranged on request. All
            inquiries are received in confidence.
          </p>
        </Reveal>

        <Reveal delay={0.3}>
          <motion.a
            href="mailto:wh@fir.com?subject=The%20Private%20Gem%20%E2%80%94%20Inquiry"
            whileHover={{ y: -2 }}
            transition={{ type: "spring", stiffness: 300, damping: 20 }}
            className="inline-block mt-16 border border-gold text-paper px-12 py-5 font-display text-xl tracking-wide transition-colors duration-500 hover:bg-gold-soft"
          >
            Request Information
          </motion.a>
        </Reveal>

        <Reveal delay={0.4}>
          <div className="mt-14 flex flex-col items-center gap-4">
            <span className="label text-paper/55">2666 Brickell Avenue, Miami, FL 33129</span>
            <div className="flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-10">
              <a
                href="mailto:wh@fir.com"
                className="label text-paper/65 transition-colors hover:text-gold"
              >
                wh@fir.com
              </a>
              <span className="hidden sm:inline h-3 w-px bg-paper/20" />
              <a
                href="tel:+13059707260"
                className="label text-paper/65 transition-colors hover:text-gold"
              >
                +1 305 970 7260
              </a>
            </div>
          </div>
        </Reveal>
      </div>
    </section>
  );
}