"use client";

import { useEffect, useState } from "react";

/**
 * True on phone-sized viewports (≤639px), false during SSR and on desktop.
 * The mobile-only step flows switch on this; everything wider keeps the
 * desktop layout untouched.
 */
export function useIsPhone(): boolean {
  const [phone, setPhone] = useState(false);

  useEffect(() => {
    const query = window.matchMedia("(max-width: 639px)");
    const sync = () => setPhone(query.matches);
    sync();
    query.addEventListener("change", sync);
    return () => query.removeEventListener("change", sync);
  }, []);

  return phone;
}