import { Smartphone } from "lucide-react";

export default function MobileFlowsPortal() {
  return (
    <div className="my-15 text-slate-100 font-sans">
      {/* --- HEADER SECTION --- */}
      <div className="flex flex-col md:flex-row md:items-end justify-between gap-4 mb-6">
        <div>
          {/* Breadcrumb */}
          <div className="flex items-center gap-2 text-[10px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
            <span>PLATFORM</span>
            <span>•</span>
            <span>MOBILE</span>
          </div>

          {/* Title */}
          <h1 className="text-2xl font-bold text-white tracking-tight">
            KAFM Field — mobile flows
          </h1>

          {/* Subtitle / Description */}
          <p className="text-sm font-medium text-slate-400 mt-1 max-w-2xl leading-relaxed">
            The technician mobile app, embedded live: two flow variations (1a Field Deck · dark, 1b Day Runner · light), 17 screens each — jobs, checklists, QR, inventory, chat, incidents, reports. Every phone is fully interactive.
          </p>
        </div>

        {/* Action Button */}
        <div className="self-start md:self-auto shrink-0">
          <button className="flex items-center gap-2 bg-[#0A1628] hover:bg-slate-800 text-slate-200 border border-slate-700/80 px-4 py-2 rounded-lg text-xs font-semibold transition-colors shadow-sm cursor-pointer">
            <Smartphone className="w-4 h-4 text-slate-300" />
            <span>Open full screen</span>
          </button>
        </div>
      </div>

      {/* --- EMBEDDED PHONE DISPLAY AREA --- */}
      <div className="w-full bg-[#EAEFF4] rounded-2xl min-h-[500px] border border-slate-800 shadow-2xl p-6 flex items-center justify-center">
        {/* Mobile preview frame container goes here */}
        <p className="text-slate-500 font-mono text-xs">
          [ Live Mobile App Frames ]
        </p>
      </div>
    </div>
  );
}