'use client';

import React from 'react';
import { X, Share, PlusSquare, CheckCircle2 } from 'lucide-react';

interface Props {
  isOpen: boolean;
  onClose: () => void;
}

export const IosInstallModal: React.FC<Props> = ({ isOpen, onClose }) => {
  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/85 backdrop-blur-sm animate-in fade-in">
      <div className="w-full max-w-md bg-slate-900 border border-slate-800 rounded-2xl p-5 shadow-2xl space-y-4">
        {/* Header */}
        <div className="flex items-center justify-between pb-3 border-b border-slate-800">
          <div className="flex items-center space-x-2.5">
            <div className="w-9 h-9 rounded-full overflow-hidden border border-amber-400 bg-slate-800 shrink-0">
              <img src="/logo.png" alt="Atiku 2027" className="w-full h-full object-cover" />
            </div>
            <div>
              <h3 className="text-sm font-bold text-white flex items-center gap-1.5">
                <span>Install on Apple iPhone / iPad</span>
                <span className="text-[10px] bg-amber-500/20 text-amber-300 px-1.5 py-0.2 rounded font-mono">
                  iOS WebApp
                </span>
              </h3>
              <p className="text-[11px] text-slate-400">Add to Home Screen in 2 simple steps</p>
            </div>
          </div>
          <button
            onClick={onClose}
            className="p-1.5 rounded-lg text-slate-400 hover:text-white hover:bg-slate-800 transition"
          >
            <X className="w-4 h-4" />
          </button>
        </div>

        {/* 2-Step Visual Instructions */}
        <div className="space-y-3 text-xs text-slate-300">
          <div className="p-3 bg-slate-950 rounded-xl border border-slate-800 flex items-start gap-3">
            <div className="w-7 h-7 rounded-lg bg-blue-950 text-blue-400 border border-blue-700 flex items-center justify-center font-bold shrink-0 text-xs">
              1
            </div>
            <div>
              <div className="font-bold text-white flex items-center gap-1.5">
                <span>Tap the Safari Share Button</span>
                <Share className="w-3.5 h-3.5 text-blue-400" />
              </div>
              <p className="text-[11px] text-slate-400 mt-0.5">
                In Safari browser at the bottom (or top on iPad), tap the square icon with an arrow pointing up.
              </p>
            </div>
          </div>

          <div className="p-3 bg-slate-950 rounded-xl border border-slate-800 flex items-start gap-3">
            <div className="w-7 h-7 rounded-lg bg-amber-950 text-amber-400 border border-amber-700 flex items-center justify-center font-bold shrink-0 text-xs">
              2
            </div>
            <div>
              <div className="font-bold text-white flex items-center gap-1.5">
                <span>Select &quot;Add to Home Screen&quot;</span>
                <PlusSquare className="w-3.5 h-3.5 text-amber-400" />
              </div>
              <p className="text-[11px] text-slate-400 mt-0.5">
                Scroll down in the share sheet and tap <strong>Add to Home Screen</strong>, then tap <strong>Add</strong> at top right.
              </p>
            </div>
          </div>

          <div className="p-3 bg-emerald-950/40 rounded-xl border border-emerald-800/60 flex items-center gap-2.5 text-emerald-200">
            <CheckCircle2 className="w-5 h-5 text-emerald-400 shrink-0" />
            <span className="text-[11px]">
              The official Atiku 2027 Situation Room app icon will appear instantly on your iPhone Home Screen.
            </span>
          </div>
        </div>

        <button
          type="button"
          onClick={onClose}
          className="w-full py-2.5 rounded-xl bg-amber-500 hover:bg-amber-400 text-slate-950 font-bold text-xs shadow-md transition"
        >
          Got It, Thanks!
        </button>
      </div>
    </div>
  );
};