import React, { FormEvent, ReactElement, useEffect, useMemo, useState } from 'react';
import Head from 'next/head';
import Link from 'next/link';
import LayoutGuest from '../layouts/Guest';
import { getPageTitle } from '../config';

type MarketPlan = {
  id: string;
  marketName: string;
  deliveryFocus: string;
  expectedCustomers: number;
  weather: string;
  tourism: string;
  createdAt: string;
  checklist: string[];
  featuredProducts: string[];
  revenueEstimate: number;
};

type PlanForm = {
  marketName: string;
  deliveryFocus: string;
  expectedCustomers: string;
  weather: string;
  tourism: string;
};

const storageKey = 'ilha-market-day-plans';

const featuredByFocus: Record<string, string[]> = {
  tropical: ['Coco gelado', 'Açaí da ilha', 'Banana-prata', 'Suco de caju'],
  bakery: ['Pão francês', 'Bolo de fubá', 'Pão de queijo', 'Café coado'],
  fishing: ['Tilápia fresca', 'Camarão', 'Isca artesanal', 'Gelo para pesca'],
  farming: ['Mandioca', 'Couve', 'Tomate cereja', 'Flores tropicais'],
};

const focusLabels: Record<string, string> = {
  tropical: 'Tropical essentials',
  bakery: 'Bakery morning rush',
  fishing: 'Fishing dock supply',
  farming: 'Farm-to-market harvest',
};

const weatherLabels: Record<string, string> = {
  sunny: 'Sunny beach day',
  rainy: 'Warm tropical rain',
  storm: 'Storm watch',
  fog: 'Foggy mountain morning',
};

const tourismLabels: Record<string, string> = {
  low: 'Local residents only',
  normal: 'Balanced village day',
  high: 'Cruise/tourist surge',
};

const currencyFormatter = new Intl.NumberFormat('pt-BR', {
  style: 'currency',
  currency: 'BRL',
});

const dateFormatter = new Intl.DateTimeFormat('en-US', {
  month: 'short',
  day: 'numeric',
  hour: '2-digit',
  minute: '2-digit',
});

function buildChecklist(form: PlanForm, customers: number) {
  const base = [
    `Receive ${focusLabels[form.deliveryFocus].toLowerCase()} delivery at Porto da Esperança.`,
    'Restock hero shelf, cold aisle, and checkout impulse basket before opening.',
    'Assign one employee to PIX/card checkout and one to shelf recovery.',
  ];

  if (form.weather === 'storm') {
    base.push('Move umbrellas, candles, batteries, and bottled water to the front display.');
  }

  if (form.weather === 'sunny') {
    base.push('Boost cold drinks, beach snacks, sunscreen, and fresh fruit near the entrance.');
  }

  if (form.tourism === 'high') {
    base.push('Prepare bilingual welcome signs and souvenir bundles for tourists.');
  }

  if (customers > 80) {
    base.push('Schedule an afternoon micro-delivery so shelves do not empty after lunch.');
  }

  return base;
}

function calculateRevenue(form: PlanForm, customers: number) {
  const focusMultiplier = form.deliveryFocus === 'bakery' ? 31 : form.deliveryFocus === 'fishing' ? 44 : form.deliveryFocus === 'farming' ? 35 : 38;
  const tourismMultiplier = form.tourism === 'high' ? 1.34 : form.tourism === 'low' ? 0.82 : 1;
  const weatherMultiplier = form.weather === 'storm' ? 0.72 : form.weather === 'rainy' ? 0.9 : form.weather === 'sunny' ? 1.18 : 0.96;

  return Math.round(customers * focusMultiplier * tourismMultiplier * weatherMultiplier);
}

function createPlan(form: PlanForm): MarketPlan {
  const expectedCustomers = Number(form.expectedCustomers);

  return {
    id: `${Date.now()}`,
    marketName: form.marketName.trim(),
    deliveryFocus: form.deliveryFocus,
    expectedCustomers,
    weather: form.weather,
    tourism: form.tourism,
    createdAt: new Date().toISOString(),
    checklist: buildChecklist(form, expectedCustomers),
    featuredProducts: featuredByFocus[form.deliveryFocus],
    revenueEstimate: calculateRevenue(form, expectedCustomers),
  };
}

export default function IlhaMarketLanding() {
  const [form, setForm] = useState<PlanForm>({
    marketName: 'Ilha Market',
    deliveryFocus: 'tropical',
    expectedCustomers: '64',
    weather: 'sunny',
    tourism: 'normal',
  });
  const [plans, setPlans] = useState<MarketPlan[]>([]);
  const [selectedPlanId, setSelectedPlanId] = useState<string | null>(null);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

  useEffect(() => {
    try {
      const savedPlans = window.localStorage.getItem(storageKey);
      if (savedPlans) {
        const parsedPlans = JSON.parse(savedPlans) as MarketPlan[];
        setPlans(parsedPlans);
        setSelectedPlanId(parsedPlans[0]?.id ?? null);
      }
    } catch (err) {
      console.error('Failed to load Ilha Market plans from localStorage:', err);
    }
  }, []);

  useEffect(() => {
    try {
      window.localStorage.setItem(storageKey, JSON.stringify(plans));
    } catch (err) {
      console.error('Failed to save Ilha Market plans to localStorage:', err);
    }
  }, [plans]);

  const draftPlan = useMemo(() => {
    const customers = Number(form.expectedCustomers) || 0;

    return {
      checklist: buildChecklist(form, customers),
      featuredProducts: featuredByFocus[form.deliveryFocus],
      revenueEstimate: calculateRevenue(form, customers),
    };
  }, [form]);

  const selectedPlan = plans.find((plan) => plan.id === selectedPlanId) ?? plans[0] ?? null;

  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    setError('');
    setSuccess('');

    const expectedCustomers = Number(form.expectedCustomers);

    if (form.marketName.trim().length < 3) {
      setError('Name the market with at least 3 characters.');
      return;
    }

    if (!Number.isFinite(expectedCustomers) || expectedCustomers < 10 || expectedCustomers > 250) {
      setError('Expected customers must be between 10 and 250 for this playable slice.');
      return;
    }

    const nextPlan = createPlan(form);
    setPlans((currentPlans) => [nextPlan, ...currentPlans].slice(0, 6));
    setSelectedPlanId(nextPlan.id);
    setSuccess(`${nextPlan.marketName} is ready to open with ${nextPlan.featuredProducts.length} featured product groups.`);
  };

  const removePlan = (planId: string) => {
    setPlans((currentPlans) => {
      const nextPlans = currentPlans.filter((plan) => plan.id !== planId);
      setSelectedPlanId(nextPlans[0]?.id ?? null);
      return nextPlans;
    });
    setSuccess('Market day removed from the planner.');
  };

  return (
    <>
      <Head>
        <title>{getPageTitle('Ilha Market')}</title>
        <meta
          name="description"
          content="Ilha Market is a cozy Brazilian island supermarket management and life simulation game concept."
        />
      </Head>

      <main className="min-h-screen overflow-hidden bg-[#fff7e8] text-[#183d35]">
        <section className="relative isolate px-5 py-6 sm:px-8 lg:px-12">
          <div className="absolute inset-0 -z-10 bg-[radial-gradient(circle_at_15%_15%,rgba(255,181,93,0.36),transparent_28%),radial-gradient(circle_at_80%_4%,rgba(42,157,143,0.26),transparent_32%),linear-gradient(135deg,#fff7e8_0%,#dff7ed_48%,#ffe3b3_100%)]" />
          <div className="absolute -right-20 top-24 -z-10 h-72 w-72 rounded-full bg-[#ff7a59]/20 blur-3xl" />
          <div className="absolute -bottom-20 left-10 -z-10 h-80 w-80 rounded-full bg-[#2a9d8f]/20 blur-3xl" />

          <nav className="mx-auto flex max-w-7xl items-center justify-between rounded-full border border-white/70 bg-white/55 px-5 py-3 shadow-sm backdrop-blur">
            <Link href="/" className="flex items-center gap-3 font-semibold tracking-tight text-[#183d35]">
              <span className="grid h-10 w-10 place-items-center rounded-full bg-[#ff7a59] text-xl shadow-lg shadow-[#ff7a59]/25">🏝️</span>
              <span className="text-lg">Ilha Market™</span>
            </Link>
            <div className="flex items-center gap-2 text-sm font-semibold">
              <a href="#planner" className="hidden rounded-full px-4 py-2 text-[#24564b] transition hover:bg-white/70 sm:inline-flex">
                Market planner
              </a>
              <Link href="/login" className="rounded-full bg-[#183d35] px-4 py-2 text-white shadow-lg shadow-[#183d35]/20 transition hover:bg-[#25574d] focus:outline-none focus:ring-2 focus:ring-[#ffb55d]">
                Admin login
              </Link>
            </div>
          </nav>

          <div className="mx-auto grid max-w-7xl items-center gap-12 py-16 lg:grid-cols-[1.05fr_0.95fr] lg:py-24">
            <div>
              <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/80 bg-white/60 px-4 py-2 text-sm font-semibold text-[#2a6f62] shadow-sm backdrop-blur">
                <span className="h-2 w-2 rounded-full bg-[#2a9d8f]" />
                Cozy Rio-coast life sim + supermarket management
              </div>
              <h1 className="max-w-4xl text-5xl font-black leading-[0.95] tracking-[-0.04em] text-[#163830] sm:text-6xl lg:text-7xl">
                Reopen the island’s only market and bring the community back to life.
              </h1>
              <p className="mt-6 max-w-2xl text-lg leading-8 text-[#42665e]">
                Plan delivery days, stock tropical products, prepare PIX/card checkout, and build the first playable management loop for <strong>Ilha Market™</strong> — a warm, stylized Brazilian island game concept.
              </p>
              <div className="mt-8 flex flex-col gap-3 sm:flex-row">
                <a href="#planner" className="rounded-full bg-[#ff7a59] px-6 py-3 text-center font-bold text-white shadow-xl shadow-[#ff7a59]/25 transition hover:-translate-y-0.5 hover:bg-[#ef6846] focus:outline-none focus:ring-2 focus:ring-[#183d35]">
                  Start a market day
                </a>
                <Link href="/login" className="rounded-full border border-[#183d35]/15 bg-white/70 px-6 py-3 text-center font-bold text-[#183d35] shadow-sm transition hover:-translate-y-0.5 hover:bg-white focus:outline-none focus:ring-2 focus:ring-[#ffb55d]">
                  Open admin interface
                </Link>
              </div>

              <dl className="mt-10 grid max-w-2xl grid-cols-3 gap-3">
                {[
                  ['9+', 'Island regions'],
                  ['4', 'Payment modes'],
                  ['24h', 'Living routines'],
                ].map(([value, label]) => (
                  <div key={label} className="rounded-3xl border border-white/70 bg-white/55 p-4 text-center shadow-sm backdrop-blur">
                    <dt className="text-2xl font-black text-[#183d35]">{value}</dt>
                    <dd className="text-xs font-semibold uppercase tracking-[0.18em] text-[#5f8278]">{label}</dd>
                  </div>
                ))}
              </dl>
            </div>

            <div className="relative">
              <div className="absolute -left-6 top-12 h-24 w-24 rounded-full bg-[#ffcf6d] blur-2xl" />
              <div className="relative rounded-[2.5rem] border border-white/80 bg-white/65 p-4 shadow-2xl shadow-[#2a6f62]/15 backdrop-blur">
                <div className="overflow-hidden rounded-[2rem] bg-[#8fd8c1]">
                  <div className="relative min-h-[460px] bg-[linear-gradient(180deg,#7ed2e6_0%,#dff7ed_38%,#fff0bd_39%,#fff0bd_51%,#2a9d8f_52%,#1f7c70_100%)] p-6">
                    <div className="absolute left-8 top-8 h-20 w-20 rounded-full bg-[#fff2a8] shadow-[0_0_60px_rgba(255,242,168,0.85)]" />
                    <div className="absolute bottom-10 left-6 right-6 h-20 rounded-[100%] bg-[#106a73]/25 blur-sm" />
                    <div className="absolute bottom-16 left-10 right-10 h-24 rounded-[100%] border-t-4 border-white/60" />

                    <div className="absolute bottom-20 left-1/2 w-[78%] -translate-x-1/2 rounded-[2rem] bg-[#fff7e8] p-4 shadow-2xl">
                      <div className="rounded-[1.5rem] bg-[#ff7a59] px-5 py-3 text-center text-xl font-black text-white shadow-lg">ILHA MARKET</div>
                      <div className="mt-4 grid grid-cols-3 gap-3">
                        <div className="h-24 rounded-2xl bg-[#2a9d8f] p-2 shadow-inner">
                          <div className="h-full rounded-xl bg-[#b7eadb]" />
                        </div>
                        <div className="h-24 rounded-2xl bg-[#f4a261] p-2 shadow-inner">
                          <div className="h-full rounded-xl bg-[#ffe0a8]" />
                        </div>
                        <div className="h-24 rounded-2xl bg-[#2a9d8f] p-2 shadow-inner">
                          <div className="h-full rounded-xl bg-[#b7eadb]" />
                        </div>
                      </div>
                      <div className="mt-4 flex items-center justify-between rounded-2xl bg-[#183d35] px-4 py-3 text-sm font-bold text-white">
                        <span>PIX • Credit • Cash</span>
                        <span>Open 08:00</span>
                      </div>
                    </div>

                    <div className="absolute bottom-24 right-10 grid h-16 w-16 place-items-center rounded-full bg-[#4b2e21] text-3xl shadow-xl">🧺</div>
                    <div className="absolute bottom-24 left-12 grid h-14 w-14 place-items-center rounded-full bg-[#24564b] text-2xl shadow-xl">🐟</div>
                    <div className="absolute left-10 top-36 text-6xl drop-shadow-lg">🌴</div>
                    <div className="absolute right-12 top-28 text-5xl drop-shadow-lg">🌺</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section className="bg-[#183d35] px-5 py-10 text-white sm:px-8 lg:px-12">
          <div className="mx-auto grid max-w-7xl gap-4 md:grid-cols-4">
            {[
              ['Explore', 'Village, beach, forest, mangrove, farm, harbor, lookout, caves.'],
              ['Manage', 'Deliveries, shelves, pricing, staff, reports, PIX and card checkout.'],
              ['Connect', 'NPC routines, families, friendships, quests, festivals and reputation.'],
              ['Grow', 'Farm, fish, craft, restore buildings, upgrade tourism and the harbor.'],
            ].map(([title, text]) => (
              <article key={title} className="rounded-3xl border border-white/10 bg-white/10 p-5 shadow-xl shadow-black/5">
                <h2 className="text-lg font-black text-[#ffcf6d]">{title}</h2>
                <p className="mt-2 text-sm leading-6 text-white/75">{text}</p>
              </article>
            ))}
          </div>
        </section>

        <section id="planner" className="px-5 py-16 sm:px-8 lg:px-12">
          <div className="mx-auto max-w-7xl">
            <div className="mb-8 max-w-3xl">
              <p className="text-sm font-black uppercase tracking-[0.26em] text-[#e46b4e]">Playable MVP slice</p>
              <h2 className="mt-3 text-4xl font-black tracking-[-0.03em] text-[#183d35] sm:text-5xl">Market Day Planner</h2>
              <p className="mt-4 text-[#54756d]">
                Create a daily operating plan for Dona Percília’s reopened supermarket. The planner validates inputs, generates a stocking checklist, saves recent plans in this browser, and lets you inspect or remove each plan.
              </p>
            </div>

            <div className="grid gap-6 lg:grid-cols-[0.9fr_1.1fr]">
              <form onSubmit={handleSubmit} className="rounded-[2rem] border border-[#e7d9bd] bg-white p-6 shadow-xl shadow-[#dcae72]/10">
                <div className="mb-6 flex items-center justify-between gap-4">
                  <div>
                    <h3 className="text-2xl font-black text-[#183d35]">Plan opening day</h3>
                    <p className="text-sm text-[#66877f]">Tune demand, weather, and delivery focus.</p>
                  </div>
                  <span className="rounded-full bg-[#dff7ed] px-3 py-1 text-xs font-black uppercase tracking-[0.2em] text-[#2a6f62]">Live</span>
                </div>

                <div className="space-y-4">
                  <label className="block">
                    <span className="text-sm font-bold text-[#24564b]">Market name</span>
                    <input
                      value={form.marketName}
                      onChange={(event) => setForm({ ...form, marketName: event.target.value })}
                      className="mt-2 w-full rounded-2xl border border-[#d9cdb5] bg-[#fffaf1] px-4 py-3 text-[#183d35] outline-none transition focus:border-[#2a9d8f] focus:ring-4 focus:ring-[#2a9d8f]/15"
                      placeholder="Ilha Market"
                    />
                  </label>

                  <div className="grid gap-4 sm:grid-cols-2">
                    <label className="block">
                      <span className="text-sm font-bold text-[#24564b]">Delivery focus</span>
                      <select
                        value={form.deliveryFocus}
                        onChange={(event) => setForm({ ...form, deliveryFocus: event.target.value })}
                        className="mt-2 w-full rounded-2xl border border-[#d9cdb5] bg-[#fffaf1] px-4 py-3 text-[#183d35] outline-none transition focus:border-[#2a9d8f] focus:ring-4 focus:ring-[#2a9d8f]/15"
                      >
                        {Object.entries(focusLabels).map(([value, label]) => (
                          <option key={value} value={value}>{label}</option>
                        ))}
                      </select>
                    </label>

                    <label className="block">
                      <span className="text-sm font-bold text-[#24564b]">Expected customers</span>
                      <input
                        type="number"
                        min="10"
                        max="250"
                        value={form.expectedCustomers}
                        onChange={(event) => setForm({ ...form, expectedCustomers: event.target.value })}
                        className="mt-2 w-full rounded-2xl border border-[#d9cdb5] bg-[#fffaf1] px-4 py-3 text-[#183d35] outline-none transition focus:border-[#2a9d8f] focus:ring-4 focus:ring-[#2a9d8f]/15"
                      />
                    </label>
                  </div>

                  <div className="grid gap-4 sm:grid-cols-2">
                    <label className="block">
                      <span className="text-sm font-bold text-[#24564b]">Weather</span>
                      <select
                        value={form.weather}
                        onChange={(event) => setForm({ ...form, weather: event.target.value })}
                        className="mt-2 w-full rounded-2xl border border-[#d9cdb5] bg-[#fffaf1] px-4 py-3 text-[#183d35] outline-none transition focus:border-[#2a9d8f] focus:ring-4 focus:ring-[#2a9d8f]/15"
                      >
                        {Object.entries(weatherLabels).map(([value, label]) => (
                          <option key={value} value={value}>{label}</option>
                        ))}
                      </select>
                    </label>

                    <label className="block">
                      <span className="text-sm font-bold text-[#24564b]">Tourism demand</span>
                      <select
                        value={form.tourism}
                        onChange={(event) => setForm({ ...form, tourism: event.target.value })}
                        className="mt-2 w-full rounded-2xl border border-[#d9cdb5] bg-[#fffaf1] px-4 py-3 text-[#183d35] outline-none transition focus:border-[#2a9d8f] focus:ring-4 focus:ring-[#2a9d8f]/15"
                      >
                        {Object.entries(tourismLabels).map(([value, label]) => (
                          <option key={value} value={value}>{label}</option>
                        ))}
                      </select>
                    </label>
                  </div>
                </div>

                {error && <p className="mt-5 rounded-2xl bg-[#fff0ed] px-4 py-3 text-sm font-semibold text-[#ad3826]">{error}</p>}
                {success && <p className="mt-5 rounded-2xl bg-[#e8fbf3] px-4 py-3 text-sm font-semibold text-[#1d725d]">{success}</p>}

                <button type="submit" className="mt-6 w-full rounded-2xl bg-[#183d35] px-5 py-4 font-black text-white shadow-xl shadow-[#183d35]/20 transition hover:-translate-y-0.5 hover:bg-[#25574d] focus:outline-none focus:ring-4 focus:ring-[#ffb55d]/50">
                  Generate and save market plan
                </button>
              </form>

              <div className="grid gap-6 xl:grid-cols-[0.92fr_1.08fr]">
                <article className="rounded-[2rem] border border-[#e7d9bd] bg-[#fffdf8] p-6 shadow-xl shadow-[#dcae72]/10">
                  <div className="flex items-start justify-between gap-3">
                    <div>
                      <h3 className="text-2xl font-black text-[#183d35]">Live forecast</h3>
                      <p className="text-sm text-[#66877f]">Preview before saving.</p>
                    </div>
                    <span className="rounded-2xl bg-[#ffcf6d] px-3 py-2 text-sm font-black text-[#704313]">
                      {currencyFormatter.format(draftPlan.revenueEstimate)}
                    </span>
                  </div>

                  <div className="mt-5 flex flex-wrap gap-2">
                    {draftPlan.featuredProducts.map((product) => (
                      <span key={product} className="rounded-full bg-[#dff7ed] px-3 py-1 text-sm font-bold text-[#24564b]">{product}</span>
                    ))}
                  </div>

                  <ol className="mt-6 space-y-3">
                    {draftPlan.checklist.map((item, index) => (
                      <li key={item} className="flex gap-3 rounded-2xl bg-[#f5ecdc] p-3 text-sm leading-6 text-[#42665e]">
                        <span className="grid h-7 w-7 shrink-0 place-items-center rounded-full bg-white font-black text-[#e46b4e]">{index + 1}</span>
                        {item}
                      </li>
                    ))}
                  </ol>
                </article>

                <article className="rounded-[2rem] border border-[#e7d9bd] bg-white p-6 shadow-xl shadow-[#dcae72]/10">
                  <div className="flex items-start justify-between gap-4">
                    <div>
                      <h3 className="text-2xl font-black text-[#183d35]">Saved market days</h3>
                      <p className="text-sm text-[#66877f]">Recent plans are stored locally for this MVP.</p>
                    </div>
                    <span className="rounded-full bg-[#183d35] px-3 py-1 text-sm font-black text-white">{plans.length}</span>
                  </div>

                  {plans.length === 0 ? (
                    <div className="mt-6 rounded-3xl border border-dashed border-[#d9cdb5] bg-[#fffaf1] p-8 text-center">
                      <div className="text-4xl">🛒</div>
                      <p className="mt-3 font-black text-[#183d35]">No saved market days yet.</p>
                      <p className="mt-1 text-sm text-[#66877f]">Generate a plan to create the first playable management checkpoint.</p>
                    </div>
                  ) : (
                    <div className="mt-6 space-y-3">
                      {plans.map((plan) => (
                        <button
                          key={plan.id}
                          type="button"
                          onClick={() => setSelectedPlanId(plan.id)}
                          className={`w-full rounded-3xl border p-4 text-left transition focus:outline-none focus:ring-4 focus:ring-[#2a9d8f]/15 ${selectedPlan?.id === plan.id ? 'border-[#2a9d8f] bg-[#e8fbf3]' : 'border-[#efe2ca] bg-[#fffaf1] hover:border-[#ffb55d]'}`}
                        >
                          <div className="flex items-center justify-between gap-3">
                            <span className="font-black text-[#183d35]">{plan.marketName}</span>
                            <span className="text-sm font-black text-[#e46b4e]">{currencyFormatter.format(plan.revenueEstimate)}</span>
                          </div>
                          <p className="mt-1 text-sm text-[#66877f]">
                            {focusLabels[plan.deliveryFocus]} • {weatherLabels[plan.weather]} • {plan.expectedCustomers} customers
                          </p>
                        </button>
                      ))}
                    </div>
                  )}
                </article>
              </div>
            </div>

            <article className="mt-6 rounded-[2rem] border border-[#e7d9bd] bg-[#183d35] p-6 text-white shadow-2xl shadow-[#183d35]/15">
              {selectedPlan ? (
                <div className="grid gap-6 lg:grid-cols-[0.8fr_1.2fr]">
                  <div>
                    <p className="text-sm font-black uppercase tracking-[0.24em] text-[#ffcf6d]">Selected plan detail</p>
                    <h3 className="mt-3 text-3xl font-black">{selectedPlan.marketName}</h3>
                    <p className="mt-3 text-white/70">
                      Created {dateFormatter.format(new Date(selectedPlan.createdAt))}. Prepare for {tourismLabels[selectedPlan.tourism].toLowerCase()} with {weatherLabels[selectedPlan.weather].toLowerCase()}.
                    </p>
                    <div className="mt-6 grid grid-cols-2 gap-3">
                      <div className="rounded-3xl bg-white/10 p-4">
                        <p className="text-xs font-bold uppercase tracking-[0.18em] text-white/50">Customers</p>
                        <p className="mt-1 text-2xl font-black">{selectedPlan.expectedCustomers}</p>
                      </div>
                      <div className="rounded-3xl bg-white/10 p-4">
                        <p className="text-xs font-bold uppercase tracking-[0.18em] text-white/50">Forecast</p>
                        <p className="mt-1 text-2xl font-black">{currencyFormatter.format(selectedPlan.revenueEstimate)}</p>
                      </div>
                    </div>
                    <button
                      type="button"
                      onClick={() => removePlan(selectedPlan.id)}
                      className="mt-5 rounded-full border border-white/20 px-5 py-3 text-sm font-bold text-white/80 transition hover:border-[#ffcf6d] hover:text-[#ffcf6d] focus:outline-none focus:ring-4 focus:ring-[#ffcf6d]/30"
                    >
                      Remove selected plan
                    </button>
                  </div>
                  <div className="grid gap-4 md:grid-cols-2">
                    <div className="rounded-3xl bg-white p-5 text-[#183d35]">
                      <h4 className="font-black">Featured shelf set</h4>
                      <div className="mt-4 grid gap-2">
                        {selectedPlan.featuredProducts.map((product) => (
                          <div key={product} className="rounded-2xl bg-[#fff0d0] px-4 py-3 text-sm font-bold">{product}</div>
                        ))}
                      </div>
                    </div>
                    <div className="rounded-3xl bg-white p-5 text-[#183d35]">
                      <h4 className="font-black">Opening checklist</h4>
                      <ul className="mt-4 space-y-2 text-sm leading-6 text-[#54756d]">
                        {selectedPlan.checklist.map((item) => (
                          <li key={item} className="flex gap-2">
                            <span className="text-[#2a9d8f]">✓</span>
                            <span>{item}</span>
                          </li>
                        ))}
                      </ul>
                    </div>
                  </div>
                </div>
              ) : (
                <div className="py-8 text-center">
                  <div className="text-5xl">🌅</div>
                  <h3 className="mt-4 text-2xl font-black">Select or create a plan to inspect the playable detail view.</h3>
                  <p className="mt-2 text-white/70">This is the first working loop for the Ilha Market management game.</p>
                </div>
              )}
            </article>
          </div>
        </section>
      </main>
    </>
  );
}

IlhaMarketLanding.getLayout = function getLayout(page: ReactElement) {
  return <LayoutGuest>{page}</LayoutGuest>;
};
