import { useState, useEffect } from “react”;
import { CalendarDays, Car, Phone } from “lucide-react”;

// Simple inline SVG icons for rice & beans
const RiceIcon = () => (
<svg viewBox=”0 0 64 64″ className=”w-8 h-8″ aria-hidden>
<defs>
<linearGradient id=”riceGrad” x1=”0″ x2=”0″ y1=”0″ y2=”1″>
<stop offset=”0%” stopColor=”#f5e6c6″/>
<stop offset=”100%” stopColor=”#e7d9b9″/>
</linearGradient>
</defs>
<g fill=”url(#riceGrad)” stroke=”#c2b089″ strokeWidth=”1.5″ strokeLinecap=”round” strokeLinejoin=”round”>
<ellipse cx=”16″ cy=”24″ rx=”6″ ry=”3″/>
<ellipse cx=”30″ cy=”18″ rx=”6″ ry=”3″/>
<ellipse cx=”44″ cy=”22″ rx=”6″ ry=”3″/>
<ellipse cx=”26″ cy=”30″ rx=”6″ ry=”3″/>
<ellipse cx=”38″ cy=”34″ rx=”6″ ry=”3″/>
<ellipse cx=”20″ cy=”38″ rx=”6″ ry=”3″/>
</g>
</svg>
);

const BeansIcon = () => (
<svg viewBox=”0 0 64 64″ className=”w-8 h-8″ aria-hidden>
<defs>
<linearGradient id=”beanGrad” x1=”0″ x2=”0″ y1=”0″ y2=”1″>
<stop offset=”0%” stopColor=”#8b5e3c”/>
<stop offset=”100%” stopColor=”#6d452d”/>
</linearGradient>
</defs>
<g fill=”url(#beanGrad)” stroke=”#5a3824″ strokeWidth=”1.5″ strokeLinecap=”round” strokeLinejoin=”round”>
<path d=”M20 40c-4-6 2-12 6-14 6-3 12 2 14 6 2 5-1 10-6 12-6 2-10-2-14-4z”/>
<path d=”M38 24c-3-4 1-8 4-9 4-2 8 1 9 4 2 4-1 7-4 8-4 1-6-1-9-3z”/>
</g>
</svg>
);

const DatePill = ({ label, date }: { label: string; date: string }) => (
<div className=”flex items-center gap-3 rounded-2xl bg-amber-50/80 ring-1 ring-amber-200 px-3 py-2″>
<CalendarDays className=”w-5 h-5″ aria-hidden />
<div className=”leading-tight”>
<p className=”text-xs text-amber-900/80″>{label}</p>
<p className=”text-sm font-semibold text-amber-950″>{date}</p>
</div>
</div>
);

const Flyout = () => {
const [open, setOpen] = useState(true);

// auto open on mount
useEffect(() => setOpen(true), []);

return (
<div className=”fixed right-4 bottom-4 z-50 font-sans”>
{/* Toggle button (when closed) */}
{!open && (
<button
onClick={() => setOpen(true)}
className=”shadow-lg rounded-full px-4 py-2 bg-amber-200 text-amber-950 hover:bg-amber-300 transition”
aria-label=”Open announcement”
>
Misión Peniel Drive
</button>
)}

{/* Panel */}
<aside
className={`max-w-md w-[90vw] sm:w-[28rem] transition-all duration-300 ${
open ? “translate-y-0 opacity-100” : “translate-y-6 opacity-0 pointer-events-none”
}`}
role=”dialog”
aria-labelledby=”mp-title”
>
<div className=”relative rounded-3xl shadow-xl overflow-hidden ring-1 ring-amber-300/70″ style={{background: “linear-gradient(180deg, #f7f1e6 0%, #f3eadb 100%)”}}>
{/* Close */}
<button
onClick={() => setOpen(false)}
className=”absolute top-3 right-3 text-amber-900/70 hover:text-amber-900 text-sm”
aria-label=”Close announcement”
>
✕
</button>

{/* Header strip */}
<div className=”bg-amber-200/70 px-5 py-3 flex items-center gap-3″>
<div className=”flex -space-x-1″>
<RiceIcon />
<BeansIcon />
</div>
<h2 id=”mp-title” className=”text-lg font-bold text-amber-950 tracking-tight”>
Support Misión Peniel – Rice & Beans Drive
</h2>
</div>

{/* Body */}
<div className=”px-5 py-4 grid gap-4 text-stone-800″>
<p className=”text-sm leading-relaxed”>
Drop off any size packages or cans of rice and beans in the <strong>narthex through October 12</strong> or in the <strong>church office by October 16</strong>.
Volunteer to help distribute food on <strong>October 17</strong> – carpool leaves at <strong>12:40 PM</strong>.
Contact <strong>Bonnie Hartley</strong> at <a className=”underline hover:no-underline” href=”tel:17243661465″>724-366-1465</a>.
</p>

{/* Key dates */}
<div className=”flex flex-wrap gap-3″>
<DatePill label=”Narthex drop-off deadline” date=”Oct 12″ />
<DatePill label=”Church office deadline” date=”Oct 16″ />
<div className=”flex items-center gap-3 rounded-2xl bg-emerald-50/90 ring-1 ring-emerald-200 px-3 py-2″>
<Car className=”w-5 h-5″ aria-hidden />
<div className=”leading-tight”>
<p className=”text-xs text-emerald-900/80″>Volunteer Trip</p>
<p className=”text-sm font-semibold text-emerald-950″>Oct 17 · Carpool 12:40 PM</p>
</div>
</div>
</div>

{/* Visual card */}
<div className=”rounded-2xl p-4 bg-white/60 ring-1 ring-stone-200 grid grid-cols-[auto,1fr] gap-4 items-center”>
<div className=”flex items-center gap-2″>
<RiceIcon />
<BeansIcon />
</div>
<div className=”text-sm”>
<p className=”font-semibold text-stone-900″>What to bring</p>
<p className=”text-stone-700″>Any size bags/cans of rice and beans. Thank you for caring for our neighbors in Immokalee.</p>
</div>
</div>

{/* Footer actions */}
<div className=”flex flex-wrap gap-3 pt-1″>
<a
href=”mailto:bonniejhartley@gmail.com?subject=Volunteer%20for%20Misi%C3%B3n%20Peniel%20Distribution%20(Oct%2017)&body=Hi%20Bonnie%2C%20I%E2%80%99d%20like%20to%20join%20the%20carpool%20leaving%20at%2012%3A40%20PM%20on%20Oct%2017.%20%5BYour%20name%5D”
className=”px-4 py-2 rounded-xl bg-emerald-600 text-white hover:bg-emerald-700 transition shadow-sm”
>
Volunteer on Oct 17
</a>
<a
href=”tel:17243661465″
className=”px-4 py-2 rounded-xl bg-amber-700 text-white hover:bg-amber-800 transition shadow-sm inline-flex items-center gap-2″
>
<Phone className=”w-4 h-4″ /> Call Bonnie
</a>
<button
className=”px-4 py-2 rounded-xl bg-stone-600 text-white hover:bg-stone-700 transition shadow-sm”
onClick={() => setOpen(false)}
>
Dismiss
</button>
</div>
</div>
</div>
</aside>
</div>
);
};

export default function LPCFlyoutBannerMockup() {
return (
<div className=”min-h-[60vh] grid place-items-center bg-gradient-to-br from-stone-100 to-amber-50 p-6″>
<div className=”max-w-2xl text-center space-y-3″>
<h1 className=”text-2xl font-bold text-stone-900″>Website Flyout Banner – Preview</h1>
<p className=”text-stone-700 text-sm”>Warm, inviting banner using soft earth tones and friendly fonts. Includes rice & beans illustrations, deadline dates, and a carpool reminder for the volunteer trip.</p>
</div>
<Flyout />
</div>
);
}