// ===== Mark.jsx =====
// Veradoma viewfinder mark — copied from v1, unchanged glyph.
const Mark = ({ size = 24, inverse = false, accent = "#B68A4E", stroke = "#2B2A28", strokeWidth }) => {
  const sw = strokeWidth ?? (size <= 20 ? 8 : size <= 32 ? 6 : size <= 64 ? 4.5 : 3.5);
  const fillColor = inverse ? "#D4B07A" : accent;
  const strokeColor = inverse ? "#F7F4EE" : stroke;
  return (
    <svg width={size} height={size} viewBox="0 0 100 100" fill="none" stroke={strokeColor} strokeWidth={sw} strokeLinecap="square" aria-hidden="true">
      <path d="M10 30V10h20M90 30V10H70M10 70v20h20M90 70v20H70" />
      <rect x={size <= 24 ? 40 : 44} y={size <= 24 ? 40 : 44} width={size <= 24 ? 20 : 12} height={size <= 24 ? 20 : 12} fill={fillColor} stroke="none" />
    </svg>
  );
};

// Tiny outline icon set used across the kit. 1.5px stroke, currentColor.
const Icon = ({ name, size = 18 }) => {
  const common = { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true };
  switch (name) {
    case "arrow-right":
      return <svg {...common}><path d="M5 12h14M13 5l7 7-7 7"/></svg>;
    case "arrow-down":
      return <svg {...common}><path d="M12 5v14M5 13l7 7 7-7"/></svg>;
    case "camera":
      return <svg {...common}><path d="M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z"/><circle cx="12" cy="13" r="3"/></svg>;
    case "video":
      return <svg {...common}><path d="m22 8-6 4 6 4V8Z"/><rect x="2" y="6" width="14" height="12" rx="2"/></svg>;
    case "drone":
      return <svg {...common}><circle cx="6" cy="6" r="3"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="18" r="3"/><rect x="9" y="9" width="6" height="6" rx="1"/><path d="M9 12H6M18 12h-3M12 9V6M12 18v-3"/></svg>;
    case "floor-plan":
      return <svg {...common}><rect x="3" y="3" width="18" height="18"/><path d="M3 12h7M14 3v9M14 12h7M10 12v9"/></svg>;
    case "globe":
      return <svg {...common}><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20M12 2a15 15 0 0 0 0 20"/></svg>;
    case "social":
      return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="4"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/></svg>;
    case "clock":
      return <svg {...common}><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>;
    case "check":
      return <svg {...common}><path d="M20 6 9 17l-5-5"/></svg>;
    case "instagram":
      return <svg {...common}><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.5" cy="6.5" r="0.5" fill="currentColor"/></svg>;
    case "phone":
      return <svg {...common}><path d="M22 16.92V21a1 1 0 0 1-1.11 1A19.86 19.86 0 0 1 2 3.11 1 1 0 0 1 3 2h4.09A1 1 0 0 1 8 2.79l1 4a1 1 0 0 1-.29 1L7.21 9.21a16 16 0 0 0 7.58 7.58l1.42-1.5a1 1 0 0 1 1-.29l4 1A1 1 0 0 1 22 16.92z"/></svg>;
    case "mail":
      return <svg {...common}><rect x="2" y="5" width="20" height="14" rx="2"/><path d="m2 7 10 7 10-7"/></svg>;
    case "pin":
      return <svg {...common}><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg>;
    case "menu":
      return <svg {...common}><path d="M3 6h18M3 12h18M3 18h18"/></svg>;
    case "close":
      return <svg {...common}><path d="M18 6 6 18M6 6l12 12"/></svg>;
    case "facebook":
      return <svg {...common}><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>;
    case "linkedin":
      return <svg {...common}><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>;
    case "vimeo":
      return <svg {...common}><path d="M22 7c-.2 4.4-3.3 10.4-9.3 18C9.5 19.5 7.5 12.4 7 4c2.3-1.7 4.6-3.4 6-3.4 1.5.2 2.4 1.2 2.7 3.1.4 2.5 1 4 1.7 4.6.6.6 1.5.1 2.8-1.5.5-.7 1.1-.4 1.8.2z"/></svg>;
    default: return null;
  }
};

Object.assign(window, { Mark, Icon });

// ===== Reveal hooks =====
function useReveal() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) { el.classList.add("is-revealed"); return; }
    const io = new IntersectionObserver(([entry]) => {
      if (entry.isIntersecting) {
        el.classList.add("is-revealed");
        io.disconnect();
      }
    }, { threshold: 0.15, rootMargin: "-10% 0px -10% 0px" });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return ref;
}

function useRevealOnMount(delayMs = 0) {
  const ref = React.useRef(null);
  React.useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    if (reduce) { el.classList.add("is-revealed"); return; }
    const id = window.setTimeout(() => {
      window.requestAnimationFrame(() => el.classList.add("is-revealed"));
    }, delayMs);
    return () => window.clearTimeout(id);
  }, [delayMs]);
  return ref;
}

// Smooth-scroll to a same-page anchor while respecting modifier clicks
// (Cmd/Ctrl/Shift → open in new tab; middle-click → open in new tab).
const smoothNav = (e, id) => {
  if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
  e.preventDefault();
  const el = document.getElementById(id);
  if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
};

Object.assign(window, { useReveal, useRevealOnMount, smoothNav });

// ===== Spiro booking =====
// bundleIDs verified against the live Spiro order page on 2026-05-18.
// To refresh: GET https://order-api.spiro.media/api/bundle/GetBundles?tenantShortCode=veradoma&orderPageCode=veradoma-order-page
const SPIRO = {
  base: "https://book.veradoma.com/order/veradoma/veradoma-order-page",
  essential: "30c8a7c5-0ded-473f-9d91-9028647b3712",
  premium:   "d79f1eda-9c33-4366-ad2b-b3eb8ab57dab",
  luxury:    "1025fe9b-91df-4f98-8f5a-612b7e32e3c0",
};
const spiroLink = (id) => (id ? `${SPIRO.base}/${id}` : SPIRO.base);

// ===== Header.jsx =====
const Header = ({ active = "home" }) => {
  const [scrolled, setScrolled] = React.useState(false);
  const [menuOpen, setMenuOpen] = React.useState(false);
  React.useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 80);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  const items = [
    { id: "work",     label: "Work" },
    { id: "services", label: "Services" },
    { id: "packages", label: "Packages" },
    { id: "book",     label: "Book" },
  ];

  const go = (e, id) => {
    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
    setMenuOpen(false);
    smoothNav(e, id);
  };

  return (
    <header className={
      "fixed top-0 inset-x-0 z-50 transition-all duration-base ease-out bg-bone border-b border-bronze/10 " +
      (scrolled ? "shadow-card" : "")
    }>
      <div className="max-w-7xl mx-auto px-6 h-24 flex items-center justify-between">
        <a href="#top" className="block h-20 overflow-hidden flex items-center"
           onClick={(e) => {
             if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
             e.preventDefault();
             window.scrollTo({ top: 0, behavior: "smooth" });
           }}>
          <img src="assets/logo-light-bg.png" alt="Veradoma Media" className="h-[240%] w-auto max-w-none mix-blend-multiply translate-y-[6%]" width="1254" height="1254" />
        </a>

        <nav className="hidden md:flex items-center gap-8">
          {items.map(it => (
            <a key={it.id} href={"#" + it.id}
               className={"relative text-sm tracking-wide transition-colors duration-fast " +
                          (active === it.id ? "text-graphite" : "text-stone hover:text-graphite")}
               onClick={(e) => go(e, it.id)}>
              {it.label}
              <span className={"absolute -bottom-1 left-0 right-0 h-px bg-bronze origin-left transition-transform duration-base ease-out " +
                               (active === it.id ? "scale-x-100" : "scale-x-0")} />
            </a>
          ))}
        </nav>

        <a href={spiroLink()} target="_blank" rel="noopener noreferrer"
           className="hidden md:inline-flex btn-primary">
          Book a shoot
          <Icon name="arrow-right" size={14} />
        </a>

        <button className="md:hidden w-11 h-11 flex items-center justify-center text-graphite"
                aria-label={menuOpen ? "Close menu" : "Open menu"}
                aria-expanded={menuOpen}
                aria-controls="mobile-menu"
                onClick={() => setMenuOpen(o => !o)}>
          <Icon name={menuOpen ? "close" : "menu"} size={22} />
        </button>
      </div>

      {menuOpen && (
        <div id="mobile-menu" className="md:hidden border-t border-bronze/10 bg-bone">
          <div className="max-w-7xl mx-auto px-6 py-6 flex flex-col gap-4">
            {items.map(it => (
              <a key={it.id} href={"#" + it.id}
                 className="text-base text-graphite py-2"
                 onClick={(e) => go(e, it.id)}>
                {it.label}
              </a>
            ))}
            <a href={spiroLink()} target="_blank" rel="noopener noreferrer"
               className="btn-primary w-full justify-center mt-2"
               onClick={() => setMenuOpen(false)}>
              Book a shoot
              <Icon name="arrow-right" size={14} />
            </a>
          </div>
        </div>
      )}
    </header>
  );
};

Object.assign(window, { Header });

// ===== Hero.jsx =====
const Hero = () => {
  const eyebrowRef = useRevealOnMount(0);
  const titleRef   = useRevealOnMount(60);
  const leadRef    = useRevealOnMount(120);
  const ctaRef     = useRevealOnMount(180);
  const statsRef   = useRevealOnMount(240);

  const reduce = React.useMemo(
    () => typeof window !== "undefined"
            && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches === true,
    []);

  // Phones get a muted autoplay loop; desktop scroll-scrubs the timeline.
  const isMobile = React.useMemo(
    () => typeof window !== "undefined"
            && window.matchMedia?.("(max-width: 767px)").matches === true,
    []);

  const sectionRef = React.useRef(null);
  const videoRef   = React.useRef(null);

  // Force muted at attach time. React's `muted` JSX prop doesn't reliably set
  // the DOM property, and iOS blocks autoplay unless the element is truly muted.
  const setVideoEl = React.useCallback((el) => {
    videoRef.current = el;
    if (el) { el.muted = true; el.defaultMuted = true; }
  }, []);

  React.useEffect(() => {
    if (reduce) return;
    const video = videoRef.current;
    const section = sectionRef.current;
    if (!video || !section) return;

    // Scrub the day→evening timeline from the scroll position — on mobile too.
    // The mobile clip (hero-scrub-mobile.mp4) is encoded with every frame as a
    // keyframe, so iOS can seek it instantly; a normal sparse-keyframe clip
    // freezes while scrubbing on iOS. Prime first: a muted play()/pause()
    // unlocks programmatic currentTime updates on iOS.
    const prime = () => { video.play().then(() => video.pause()).catch(() => {}); };
    if (video.readyState >= 1) prime(); else video.addEventListener('loadedmetadata', prime, { once: true });

    let rafId = null;
    let lastT = -1;
    const update = () => {
      rafId = null;
      const rect = section.getBoundingClientRect();
      const scrubRange = Math.max(1, rect.height - window.innerHeight);
      const progress = Math.max(0, Math.min(1, -rect.top / scrubRange));
      const dur = video.duration;
      if (!dur || !isFinite(dur)) return;
      const t = progress * dur;
      if (Math.abs(t - lastT) < 0.03) return;
      lastT = t;
      video.currentTime = t;
    };
    const onScroll = () => { if (rafId == null) rafId = requestAnimationFrame(update); };
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => {
      window.removeEventListener('scroll', onScroll);
      if (rafId != null) cancelAnimationFrame(rafId);
    };
  }, [reduce]);

  return (
    <section ref={sectionRef} id="top" className="relative h-[200vh] md:h-[250vh]">
      <div className="sticky top-0 h-[100svh] min-h-[600px] md:min-h-[680px] overflow-hidden">
        {reduce ? (
          <img src="assets/photos/hero-poster.jpg"
               alt="" aria-hidden="true"
               width="1920" height="1080"
               className="absolute inset-0 w-full h-full object-cover" />
        ) : (
          <video ref={setVideoEl}
                 width="1920" height="1080"
                 muted playsInline preload="auto"
                 poster="assets/photos/hero-poster.jpg"
                 className="absolute inset-0 w-full h-full object-cover">
            <source src={isMobile ? "assets/hero-scrub-mobile.mp4" : "assets/hero-day-to-evening.mp4"} type="video/mp4" />
          </video>
        )}
        <div className="absolute inset-0 bg-gradient-to-r from-ink/75 via-ink/45 to-transparent pointer-events-none" />

        <div className="relative z-10 max-w-7xl mx-auto px-6 h-full flex items-center pt-20">
          <div className="max-w-2xl text-bone">
          <div ref={eyebrowRef} className="vm-reveal pill-eyebrow mb-6 md:mb-7 text-[10px] tracking-wider sm:text-xs sm:tracking-widest">
            <span className="w-1.5 h-1.5 rounded-full bg-bronze-soft shrink-0" />
            Real estate media · Orange County
          </div>

          <h1 ref={titleRef} className="vm-reveal font-sans font-medium text-[2.6rem] sm:text-5xl md:text-6xl leading-[1.05] md:leading-none tracking-[-0.035em] mb-5 md:mb-6 text-balance">
            Cinematic listings,<br />
            <em className="not-italic lowercase text-bronze-soft">delivered next morning.</em>
          </h1>

          <p ref={leadRef} className="vm-reveal text-base sm:text-lg text-bone/82 max-w-md leading-snug mb-7 md:mb-9">
            Photo, drone, video, and floor plans. Polished work, predictable turnaround, easy to book.
          </p>

          <div ref={ctaRef} className="vm-reveal flex flex-wrap items-center gap-4 mb-7 md:mb-9">
            <a href={spiroLink()} target="_blank" rel="noopener noreferrer"
               className="btn-primary">
              Book a shoot
              <Icon name="arrow-right" size={14} />
            </a>
            <a href="#packages"
               onClick={(e) => smoothNav(e, "packages")}
               className="btn-link-bone">
              See packages
            </a>
          </div>

          <div ref={statsRef} className="vm-reveal flex flex-wrap gap-x-8 sm:gap-x-12 gap-y-4 pt-4">
            {[
              { v: "24 hr", l: "Gallery turnaround" },
              { v: "500+",  l: "Listings shot" },
              { v: "OC",    l: "Orange County" },
            ].map(s => (
              <div key={s.l}>
                <div className="text-3xl font-semibold leading-none tracking-tight">{s.v}</div>
                <div className="text-[11px] uppercase tracking-widest text-bone/65 mt-2">{s.l}</div>
              </div>
            ))}
          </div>
        </div>
      </div>
      </div>
    </section>
  );
};

Object.assign(window, { Hero });

// ===== FeaturedWork.jsx =====
const WORK = [
  { id: 1, title: "Bayside Twilight",  loc: "Newport Beach",  tag: "Twilight",    deliverables: "32 photos · drone", turn: "Delivered 24 hr", src: "assets/photos/portfolio-bayside-twilight.png",  alt: "Newport Beach waterfront home at twilight" },
  { id: 2, title: "Linden Cottage",    loc: "Costa Mesa",     tag: "Photography", deliverables: "28 photos",         turn: "Delivered 24 hr", src: "assets/photos/portfolio-linden-cottage.png",    alt: "Costa Mesa cottage at golden hour" },
  { id: 3, title: "Ridgeline",         loc: "Laguna Beach",   tag: "Drone",       deliverables: "Aerial stills + 30s clip", turn: "Delivered 24 hr", src: "assets/photos/portfolio-ridgeline-aerial.png",  alt: "Aerial view of a Laguna Beach hillside home" },
  { id: 4, title: "The Crescent",      loc: "Corona del Mar", tag: "Photography", deliverables: "35 photos · floor plan", turn: "Delivered 24 hr", src: "assets/photos/portfolio-the-crescent.png",      alt: "Corona del Mar exterior in late-afternoon light" },
  { id: 5, title: "Whitewater House",  loc: "Laguna Niguel",  tag: "Video",       deliverables: "60s walkthrough · 30 photos", turn: "Delivered 24 hr", src: "assets/photos/portfolio-whitewater-house.png",  alt: "Modern kitchen interior in Laguna Niguel" },
  { id: 6, title: "Magnolia Estate",   loc: "Newport Coast",  tag: "Twilight",    deliverables: "50 photos · drone · 3D plan", turn: "Same-day rush", src: "assets/photos/portfolio-magnolia-estate.png",   alt: "Newport Coast estate at dusk" },
];

const WorkCard = ({ work, index }) => {
  const ref = useReveal();
  return (
    <article ref={ref}
             className="vm-reveal card-work"
             style={{ transitionDelay: `${Math.min(index * 60, 480)}ms` }}>
      <div className="aspect-[4/3] overflow-hidden relative">
        <img src={work.src} alt={work.alt}
             width="800" height="600"
             loading="lazy" decoding="async"
             className="w-full h-full object-cover" />
        <span className="pill-tag absolute top-4 left-4">{work.tag}</span>
      </div>
      <div className="p-6">
        <div className="flex items-center gap-2 text-sm text-stone mb-2">
          <Icon name="pin" size={14} />
          {work.loc}
        </div>
        <h3 className="text-2xl font-semibold text-graphite mb-3">{work.title}</h3>
        <div className="flex gap-4 text-sm text-stone mb-4">
          <span className="flex items-center gap-1.5"><Icon name="camera" size={14} />{work.deliverables}</span>
        </div>
        <div className="pt-4 border-t border-clay">
          <span className="text-xs uppercase tracking-widest text-stone">{work.turn}</span>
        </div>
      </div>
    </article>
  );
};

const FeaturedWork = () => {
  const headRef = useReveal();
  return (
    <section id="work" className="scroll-mt-28 bg-bone-2 py-20">
      <div className="max-w-7xl mx-auto px-6">
        <div ref={headRef} className="vm-reveal mb-12">
          <span className="text-sm font-medium text-bronze uppercase tracking-widest">Recent work</span>
          <h2 className="text-4xl md:text-5xl font-semibold text-graphite mt-2 leading-tight tracking-[-0.025em] text-balance">From the last few weeks.</h2>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
          {WORK.map((w, i) => <WorkCard key={w.id} work={w} index={i} />)}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { FeaturedWork });

// ===== Services.jsx =====
const SERVICES = [
  { icon: "camera",     name: "Photography",  desc: "Interior and exterior, MLS-ready, color-corrected, next morning." },
  { icon: "drone",      name: "Drone",        desc: "FAA-licensed aerial stills and short clips of home + lot." },
  { icon: "video",      name: "Video",        desc: "Gimbal walkthroughs and twilight cinematic edits." },
  { icon: "floor-plan", name: "Floor plans",  desc: "Accurate 2D and 3D floor plans with room dimensions." },
  { icon: "globe",      name: "Property site",desc: "Single-property site with your branding and full gallery." },
  { icon: "social",     name: "Reels",        desc: "Vertical reels and square highlights for Instagram." },
];

const ServiceTile = ({ s, index }) => {
  const ref = useReveal();
  return (
    <div ref={ref} className="vm-reveal text-center"
         style={{ transitionDelay: `${Math.min(index * 60, 480)}ms` }}>
      <div className="icon-tile mx-auto mb-6"><Icon name={s.icon} size={28} /></div>
      <h3 className="text-lg font-semibold text-graphite mb-2">{s.name}</h3>
      <p className="text-sm text-stone leading-relaxed max-w-[16rem] mx-auto">{s.desc}</p>
    </div>
  );
};

const Services = () => {
  const headRef = useReveal();
  return (
    <section id="services" className="scroll-mt-28 bg-bone py-20">
      <div className="max-w-7xl mx-auto px-6">
        <div ref={headRef} className="vm-reveal text-center max-w-2xl mx-auto mb-16">
          <span className="text-sm font-medium text-bronze uppercase tracking-widest">What we shoot</span>
          <h2 className="text-3xl md:text-4xl font-semibold text-graphite mt-2 mb-4 leading-tight text-balance">Everything a listing needs.</h2>
          <p className="text-lg text-stone">Book one service or the whole set. Most agents pair photography with a floor plan and a short walkthrough — three deliverables, one shoot.</p>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-10">
          {SERVICES.map((s, i) => <ServiceTile key={s.name} s={s} index={i} />)}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Services });

// ===== WhyPickUs.jsx =====
const REASONS = [
  { icon: "clock",        name: "Always on time",      desc: "We arrive at the scheduled minute, with the crew and gear the brief calls for." },
  { icon: "check",        name: "24-hour gallery",     desc: "Standard 24-hour turnaround. Twilight and same-day available for a small uplift." },
  { icon: "camera",       name: "Consistent edit",     desc: "Warm white-balance, vertical lines, no over-cooked HDR. Every shoot looks like the last." },
  { icon: "arrow-right",  name: "Easy to book",        desc: "One link, three fields. Confirmation in the hour, calendar invite the same day." },
];

const ReasonTile = ({ r, index }) => {
  const ref = useReveal();
  return (
    <div ref={ref} className="vm-reveal text-center"
         style={{ transitionDelay: `${Math.min(index * 60, 480)}ms` }}>
      <div className="icon-tile mx-auto mb-6"><Icon name={r.icon} size={26} /></div>
      <h3 className="text-lg font-semibold text-graphite mb-2">{r.name}</h3>
      <p className="text-sm text-stone leading-relaxed max-w-[14rem] mx-auto">{r.desc}</p>
    </div>
  );
};

const WhyPickUs = () => {
  const headRef = useReveal();
  return (
    <section className="bg-bone-2 py-20">
      <div className="max-w-7xl mx-auto px-6">
        <div ref={headRef} className="vm-reveal text-center max-w-2xl mx-auto mb-16">
          <span className="text-sm font-medium text-bronze uppercase tracking-widest">Why agents pick us</span>
          <h2 className="text-3xl md:text-4xl font-semibold text-graphite mt-2 mb-4 leading-tight text-balance">The boring parts, done right.</h2>
          <p className="text-lg text-stone">Most of what makes media work for a listing is consistency, not flash. Punctual crews, predictable color, files where you expect them.</p>
        </div>
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-10">
          {REASONS.map((r, i) => <ReasonTile key={r.name} r={r} index={i} />)}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { WhyPickUs });

// ===== Packages.jsx =====
const PACKAGES = [
  {
    name: "Essential", price: "from $225", featured: false,
    desc: "For standard listings. Photo, drone, and the basics that make a clean gallery.",
    features: [
      "MLS-ready listing photos",
      "Drone photos (all standard angles)",
      "Basic 2D floor plan",
      "TV screens replaced",
      "Single-property website",
    ],
    bundleId: SPIRO.essential,
  },
  {
    name: "Premium", price: "from $299", featured: true,
    desc: "What most agents book. Adds 3D tour and a twilight image.",
    features: [
      "MLS-ready listing photos",
      "Drone photos",
      "Zillow 3D Tour",
      "Virtual twilight image",
      "TV screens replaced",
      "2D floor plan with measurements",
      "Single-property website",
    ],
    bundleId: SPIRO.premium,
  },
  {
    name: "Luxury", price: "from $650", featured: false,
    desc: "For homes that need a marketing campaign. Adds cinematic video and four twilight images.",
    features: [
      "MLS-ready listing photos",
      "Drone photos",
      "Cinematic video (incl. drone video)",
      "30s social-media reel",
      "Zillow 3D Tour",
      "4 virtual twilight photos",
      "TV screens replaced",
      "2D floor plan with measurements",
      "Single-property website",
    ],
    bundleId: SPIRO.luxury,
  },
];

const PackageCard = ({ pkg, index }) => {
  const ref = useReveal();
  return (
    <div ref={ref}
         className={"vm-reveal card-package " + (pkg.featured ? "card-package--featured" : "")}
         style={{ transitionDelay: `${Math.min(index * 80, 480)}ms` }}>
      {pkg.featured && (
        <span className="pill-tag absolute -top-3 left-1/2 -translate-x-1/2 shadow-card">Most booked</span>
      )}
      <div className={"text-2xl font-semibold mb-3 " + (pkg.featured ? "text-bone" : "text-graphite")}>
        {pkg.name}
      </div>
      <div className={"flex items-baseline gap-2 mb-3 " + (pkg.featured ? "text-bone" : "text-graphite")}>
        <span className="text-4xl sm:text-5xl font-semibold tracking-tight tabular-nums">{pkg.price}</span>
        <span className={"text-sm " + (pkg.featured ? "text-bone/60" : "text-stone")}>/ shoot</span>
      </div>
      <p className={"text-base mb-6 " + (pkg.featured ? "text-bone/75" : "text-stone")}>{pkg.desc}</p>
      <div className={"border-t mb-6 " + (pkg.featured ? "border-bone/15" : "border-clay")} />
      <ul className="flex flex-col gap-3 mb-8 flex-1">
        {pkg.features.map(f => (
          <li key={f} className={"flex items-start gap-2.5 text-sm " + (pkg.featured ? "text-bone/85" : "text-graphite")}>
            <span className={"shrink-0 mt-0.5 " + (pkg.featured ? "text-bronze-soft" : "text-bronze")}>
              <Icon name="check" size={14} />
            </span>
            {f}
          </li>
        ))}
      </ul>
      <a href={spiroLink(pkg.bundleId)} target="_blank" rel="noopener noreferrer"
         className={"w-full justify-center " + (pkg.featured ? "btn-primary--invert" : "btn-secondary")}>
        Book {pkg.name.toLowerCase()}
        <Icon name="arrow-right" size={14} />
      </a>
    </div>
  );
};

const Packages = () => {
  const headRef = useReveal();
  const live = useSpiroBundles();
  const cards = PACKAGES.map(p => {
    const liveData = live?.get(p.bundleId);
    if (!liveData) return p;
    return {
      ...p,
      price:    liveData.price    || p.price,
      features: liveData.features.length ? liveData.features : p.features,
    };
  });
  return (
    <section id="packages" className="scroll-mt-28 bg-bone-2 py-20">
      <div className="max-w-7xl mx-auto px-6">
        <div ref={headRef} className="vm-reveal text-center max-w-2xl mx-auto mb-16">
          <span className="text-sm font-medium text-bronze uppercase tracking-widest">Simple packages</span>
          <h2 className="text-3xl md:text-4xl font-semibold text-graphite mt-2 mb-4 leading-tight text-balance">Pick the one that fits the listing.</h2>
          <p className="text-lg text-stone">Final price depends on square footage and add-ons; the exact quote appears in the booking flow.</p>
        </div>
        <div className="grid md:grid-cols-3 gap-6 items-stretch">
          {cards.map((p, i) => <PackageCard key={p.name} pkg={p} index={i} />)}
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { Packages });

// ===== BookCTA.jsx =====
const BookCTA = () => {
  const eyebrowRef = useReveal();
  const titleRef   = useReveal();
  const contactRef = useReveal();
  const ctaRef     = useReveal();

  const contacts = [
    { icon: "phone",     label: "747-243-8969",      href: "tel:7472438969",                          external: false },
    { icon: "mail",      label: "vlad@veradoma.com", href: "mailto:vlad@veradoma.com",                external: false },
    { icon: "instagram", label: "@veradoma_media",   href: "https://instagram.com/veradoma_media",    external: true  },
  ];

  return (
    <section id="book" className="scroll-mt-28 bg-ink text-bone py-24">
      <div className="max-w-7xl mx-auto px-6 grid md:grid-cols-2 gap-12 items-center">
        <div>
          <span ref={eyebrowRef} className="vm-reveal text-sm font-medium text-bronze-soft uppercase tracking-widest">Ready when you are</span>
          <h2 ref={titleRef} className="vm-reveal font-display text-4xl md:text-5xl leading-tight mt-3 mb-8 text-balance" style={{ transitionDelay: "80ms" }}>
            Book a shoot.
          </h2>
          <div ref={contactRef} className="vm-reveal space-y-4" style={{ transitionDelay: "160ms" }}>
            {contacts.map(c => (
              <a key={c.icon} href={c.href}
                 {...(c.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
                 className="flex items-center gap-4 text-bone hover:text-bronze-soft transition-colors duration-fast">
                <span className="w-11 h-11 bg-bronze/15 rounded-xl flex items-center justify-center text-bronze-soft">
                  <Icon name={c.icon} size={18} />
                </span>
                <span>{c.label}</span>
              </a>
            ))}
            <div className="flex items-center gap-4 text-bone/70">
              <span className="w-11 h-11 bg-bronze/15 rounded-xl flex items-center justify-center text-bronze-soft">
                <Icon name="pin" size={18} />
              </span>
              <span>Orange County · CA</span>
            </div>
          </div>
        </div>

        <div ref={ctaRef} className="vm-reveal flex flex-col items-start md:items-end gap-4" style={{ transitionDelay: "240ms" }}>
          <a href={spiroLink()} target="_blank" rel="noopener noreferrer"
             className="btn-primary--invert text-base px-8 py-4">
            Start booking
            <Icon name="arrow-right" size={18} />
          </a>
          <p className="text-bone/60 text-sm max-w-xs md:text-right">
            Or pick a specific package above — each opens the booking flow preselected.
          </p>
        </div>
      </div>
    </section>
  );
};

Object.assign(window, { BookCTA });

// ===== Footer.jsx =====
const FOOTER_COLS = {
  Services: ["Photography", "Drone", "Video", "Floor plans", "Property sites", "Reels"],
  "Get in touch": [
    { label: "747-243-8969",       href: "tel:7472438969" },
    { label: "vlad@veradoma.com",  href: "mailto:vlad@veradoma.com" },
    { label: "@veradoma_media",    href: "https://instagram.com/veradoma_media" },
    { label: "book.veradoma.com",  href: "https://book.veradoma.com" },
  ],
  Locations: ["Newport Beach", "Costa Mesa", "Laguna Beach", "Irvine", "Corona del Mar", "Newport Coast"],
};

const Footer = () => {
  const brandRef = useReveal();
  return (
    <footer className="bg-ink text-bone py-16">
      <div className="max-w-7xl mx-auto px-6">
        <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-12 mb-12">
          <div ref={brandRef} className="vm-reveal">
            <div className="h-20 w-full overflow-hidden flex items-center justify-center mb-4">
              <img src="assets/logo-dark-bg.png" alt="Veradoma Media" className="h-[240%] w-auto max-w-none translate-y-[6%]" width="1536" height="1024" />
            </div>

            <p className="text-sm text-bone/60 leading-relaxed mb-6 max-w-xs">
              Real estate photography and visual media for agents and property professionals across Orange County.
            </p>
            <div className="flex gap-3">
              <a href="https://instagram.com/veradoma_media"
                 target="_blank" rel="noopener noreferrer"
                 aria-label="Instagram"
                 className="w-10 h-10 rounded-lg bg-bone/8 hover:bg-bone/15 flex items-center justify-center text-bone transition-colors duration-fast">
                <Icon name="instagram" size={16} />
              </a>
            </div>
          </div>

          {Object.entries(FOOTER_COLS).map(([title, items], colIndex) => (
            <div key={title}>
              <h4 className="font-semibold text-bone mb-4 text-sm uppercase tracking-wider">{title}</h4>
              <ul className="space-y-2.5">
                {items.map(item => {
                  const isObj = typeof item === "object";
                  const label = isObj ? item.label : item;
                  return (
                    <li key={label}>
                      {isObj ? (
                        <a href={item.href}
                           className="text-sm text-bone/60 hover:text-bone transition-colors duration-fast">
                          {label}
                        </a>
                      ) : (
                        <span className="text-sm text-bone/60">{label}</span>
                      )}
                    </li>
                  );
                })}
              </ul>
            </div>
          ))}
        </div>

        <div className="pt-8 border-t border-bone/10 flex flex-col md:flex-row justify-between items-start md:items-center gap-3 text-sm text-bone/60">
          <span>© 2026 Veradoma Media · Orange County, CA</span>
          <span>veradoma.com</span>
        </div>
      </div>
    </footer>
  );
};

Object.assign(window, { Footer });

// ===== App entry =====
const App = () => {
  return (
    <React.Fragment>
      <Header />
      <main id="main">
        <Hero />
        <FeaturedWork />
        <Services />
        <WhyPickUs />
        <Packages />
        <BookCTA />
      </main>
      <Footer />
    </React.Fragment>
  );
};

ReactDOM.createRoot(document.getElementById("app")).render(<App />);