import { useIdentity } from '@deplixo/sdk';
import { useMemo, useState, useRef } from 'react';
import { PikeIcon, PikeBadge } from './components/PikeLogo.jsx';
import {
  MapIcon, FishIcon, LureIcon, WeatherIcon, PermitIcon, CabinIcon,
  SearchIcon, HomeNavIcon, CatchIcon, ProfileIcon, SparkIcon,
} from './components/Icons.jsx';

// Main action tiles on home — now 8 cards per spec.
const NAV_TILES = [
  { id: 'kalat',    label: 'KALAT',             Icon: FishIcon,    hint: 'Suomen kalalajit', view: 'kalat' },
  { id: 'kartta',   label: 'KARTTA',            Icon: MapIcon,     hint: 'Vesistöt & paikat', view: 'kartta' },
  { id: 'saaliit',  label: 'SAALISPÄIVÄKIRJA',  Icon: CatchIcon,   hint: 'Tallenna saalis',   view: 'saaliit' },
  { id: 'viehet',   label: 'VIEHEET',           Icon: LureIcon,    hint: 'Galleria',          view: 'viehet' },
  { id: 'saa',      label: 'SÄÄ & KALASTUS',    Icon: WeatherIcon, hint: 'Kalastussää',       view: 'saa' },
  { id: 'laavut',   label: 'LAAVUT & NUOTIOPAIKAT', Icon: PermitIcon, hint: 'Taukopaikat',    view: 'laavut' },
  { id: 'mokit',    label: 'VUOKRAMÖKIT',       Icon: CabinIcon,   hint: 'Majoitus',          view: 'mokit' },
  { id: 'feed',     label: 'KALASTAJIEN SAALIIT', Icon: ProfileIcon, hint: 'Yhteisön feed',   view: 'feed' },
];

const BOTTOM_TABS = [
  { id: 'koti',     label: 'Koti',     Icon: HomeNavIcon,  view: 'koti' },
  { id: 'kartta',   label: 'Kartta',   Icon: MapIcon,      view: 'kartta' },
  { id: 'kalat',    label: 'Kalat',    Icon: FishIcon,     view: 'kalat' },
  { id: 'saaliit',  label: 'Saaliit',  Icon: CatchIcon,    view: 'saaliit' },
  { id: 'profiili', label: 'Profiili', Icon: ProfileIcon,  view: 'profiili' },
];

const LOCATIONS = [
  { id: 'saimaa',    label: 'Saimaa',           base: 72 },
  { id: 'paijanne',  label: 'Päijänne',         base: 68 },
  { id: 'inari',     label: 'Inarijärvi',       base: 65 },
  { id: 'rannikko',  label: 'Suomenlahti',      base: 60 },
  { id: 'pikkujarvi',label: 'Lähijärvi',        base: 55 },
];

const WEATHERS = [
  { id: 'pilvinen',  label: 'Pilvipouta',  mod:  12 },
  { id: 'sade',      label: 'Tihkusade',   mod:   8 },
  { id: 'tyyni',     label: 'Tyyni',       mod:  -5 },
  { id: 'aurinko',   label: 'Helteinen',   mod: -15 },
  { id: 'myrsky',    label: 'Myrsky',      mod: -20 },
];

const SPECIES = [
  { id: 'hauki',   label: 'Hauki',       loves: ['pilvinen', 'sade'],    hates: ['aurinko'] },
  { id: 'kuha',    label: 'Kuha',        loves: ['pilvinen', 'tyyni'],   hates: ['myrsky'] },
  { id: 'ahven',   label: 'Ahven',       loves: ['tyyni', 'aurinko'],    hates: ['myrsky'] },
  { id: 'taimen',  label: 'Taimen',      loves: ['sade', 'pilvinen'],    hates: ['aurinko'] },
  { id: 'siika',   label: 'Siika',       loves: ['tyyni', 'pilvinen'],   hates: ['myrsky'] },
];

const AREA_SPECIES = {
  saimaa: [
    { id: 'hauki',    name: 'Hauki',           latin: 'Esox lucius',          size: '2–8 kg',    note: 'Yleisin peto — kaislikoista' },
    { id: 'kuha',     name: 'Kuha',            latin: 'Sander lucioperca',    size: '1–4 kg',    note: 'Syvänteet, hämärän aika' },
    { id: 'ahven',    name: 'Ahven',           latin: 'Perca fluviatilis',    size: '200–800 g', note: 'Parvissa luodoilla' },
    { id: 'jarvilohi',name: 'Järvilohi',       latin: 'Salmo salar m. sebago',size: '3–7 kg',    note: 'Uhanalainen — vapautus!' },
    { id: 'nieria',   name: 'Saimaannieriä',   latin: 'Salvelinus alpinus',   size: '1–3 kg',    note: 'Harvinainen, syvät vedet' },
    { id: 'made',     name: 'Made',            latin: 'Lota lota',            size: '500 g–2 kg',note: 'Talvikalastus, pohjalla' },
  ],
  paijanne: [
    { id: 'hauki',  name: 'Hauki',    latin: 'Esox lucius',       size: '2–10 kg',   note: 'Kookkaita yksilöitä' },
    { id: 'kuha',   name: 'Kuha',     latin: 'Sander lucioperca', size: '1–5 kg',    note: 'Päijänteen vahvin laji' },
    { id: 'ahven',  name: 'Ahven',    latin: 'Perca fluviatilis', size: '200 g–1 kg',note: 'Isokokoisia ahvenia' },
    { id: 'taimen', name: 'Järvitaimen', latin: 'Salmo trutta m. lacustris', size: '2–6 kg', note: 'Istutuskanta, vapautus' },
    { id: 'muikku', name: 'Muikku',   latin: 'Coregonus albula',  size: '50–150 g',  note: 'Nuottakalastus' },
    { id: 'siika',  name: 'Siika',    latin: 'Coregonus lavaretus', size: '500 g–2 kg', note: 'Verkoilla ja uistimella' },
  ],
  inari: [
    { id: 'nieria',    name: 'Nieriä (rautu)', latin: 'Salvelinus alpinus', size: '1–5 kg',  note: 'Inarin tunnuskala' },
    { id: 'taimen',    name: 'Taimen',         latin: 'Salmo trutta',       size: '1–4 kg',  note: 'Virtapaikat, saaristo' },
    { id: 'siika',     name: 'Siika',          latin: 'Coregonus lavaretus',size: '500 g–2 kg', note: 'Useita muotoja' },
    { id: 'harjus',    name: 'Harjus',         latin: 'Thymallus thymallus',size: '300 g–1 kg', note: 'Perhokalastus kesällä' },
    { id: 'hauki',     name: 'Hauki',          latin: 'Esox lucius',        size: '2–7 kg',  note: 'Matalat lahdet' },
    { id: 'siikapojat',name: 'Pohjasiika',     latin: 'Coregonus lavaretus pidschian', size: '400 g–1,5 kg', note: 'Syvien vesien laji' },
  ],
  rannikko: [
    { id: 'hauki',  name: 'Hauki',       latin: 'Esox lucius',          size: '2–12 kg',   note: 'Saaristo, kevät huippu' },
    { id: 'ahven',  name: 'Ahven',       latin: 'Perca fluviatilis',    size: '300 g–1,2 kg', note: 'Isot raidat luodoilta' },
    { id: 'kuha',   name: 'Kuha',        latin: 'Sander lucioperca',    size: '1–6 kg',    note: 'Sameat lahdet kesällä' },
    { id: 'merita', name: 'Meritaimen',  latin: 'Salmo trutta m. trutta', size: '1–5 kg', note: 'Rantavieheellä keväällä' },
    { id: 'silakka',name: 'Silakka',     latin: 'Clupea harengus membras', size: '20–80 g', note: 'Lippokalastus satamissa' },
    { id: 'turska', name: 'Turska',      latin: 'Gadus morhua',         size: '1–3 kg',    note: 'Harvinaistunut Itämeressä' },
  ],
  pikkujarvi: [
    { id: 'ahven',  name: 'Ahven',  latin: 'Perca fluviatilis', size: '100–500 g', note: 'Runsain laji' },
    { id: 'hauki',  name: 'Hauki',  latin: 'Esox lucius',       size: '1–5 kg',    note: 'Rantakaislikot' },
    { id: 'sarki', name: 'Särki',  latin: 'Rutilus rutilus',   size: '100–400 g', note: 'Mato-onkiminen' },
    { id: 'lahna',  name: 'Lahna',  latin: 'Abramis brama',     size: '500 g–3 kg',note: 'Syvemmät kuopat' },
  ],
};

const RECENT_CATCHES = [
  {
    id: 'c-mikko-hauki',
    user: 'Mikko R.',
    initials: 'MR',
    avatarTone: 'tone-a',
    species: 'Hauki',
    weight: '7,2 kg',
    length: '98 cm',
    location: 'Saimaa · Puumala',
    lure: 'Rapala Super Shad Rap',
    time: '2 h sitten',
    note: 'Napsi kaislikon reunasta aamuhämärissä. Vapautettu takaisin! 🎣',
    likes: 42,
    comments: 8,
  },
  {
    id: 'c-anni-kuha',
    user: 'Anni L.',
    initials: 'AL',
    avatarTone: 'tone-b',
    species: 'Kuha',
    weight: '3,8 kg',
    length: '71 cm',
    location: 'Päijänne · Sysmä',
    lure: 'Jigi 12 cm, puna-valkoinen',
    time: '5 h sitten',
    note: 'Syvänteestä 14 m, pilvistä ja tyyntä. Täydellinen ilta.',
    likes: 67,
    comments: 14,
  },
  {
    id: 'c-jukka-ahven',
    user: 'Jukka P.',
    initials: 'JP',
    avatarTone: 'tone-c',
    species: 'Ahven',
    weight: '820 g',
    length: '38 cm',
    location: 'Suomenlahti · Porvoon saaristo',
    lure: 'Mepps Aglia #3',
    time: '1 pv sitten',
    note: 'Luodon kärjestä kolmas heitto. Komea raita!',
    likes: 29,
    comments: 5,
  },
  {
    id: 'c-sanna-taimen',
    user: 'Sanna K.',
    initials: 'SK',
    avatarTone: 'tone-d',
    species: 'Järvitaimen',
    weight: '4,5 kg',
    length: '76 cm',
    location: 'Inarijärvi · Nellim',
    lure: 'Perho: Black Zonker',
    time: '2 pv sitten',
    note: 'Elämän kala! Istukas, rasvaevä leikattu — talteen.',
    likes: 118,
    comments: 23,
  },
];

// Fish species gallery — real photographic images served via a dedicated
// image proxy (images.weserv.nl, the "deplixo.proxy" style image proxy) so
// the browser can reliably fetch Wikimedia Commons photos without CORS or
// hotlink issues. Each entry includes full species info for the detail view
// (identification, habitat, best times, lures, weather).
const proxied = (url) => {
  // Strip the scheme — weserv expects "host/path" with no leading "https://".
  const stripped = url.replace(/^https?:\/\//, '');
  return `https://images.weserv.nl/?url=${encodeURIComponent(stripped)}&w=800&output=jpg`;
};

const FISH_GALLERY = [
  {
    id: 'ahven',
    name: 'Ahven',
    latin: 'Perca fluviatilis',
    note: 'Yleisin peto, maistuu loistavasti',
    photo: proxied('https://upload.wikimedia.org/wikipedia/commons/thumb/4/4b/Perca_fluviatilis_Prague_Vltava_3.jpg/1280px-Perca_fluviatilis_Prague_Vltava_3.jpg'),
    identification: 'Tummanvihreä selkä ja 5–9 pystyraitaa kyljissä. Oranssit alaevät ja piikikäs selkäevä, jossa musta täplä takaosassa.',
    habitat: 'Kaikki Suomen järvet ja rannikko. Viihtyy luodoilla, kivikoissa, laitureilla ja kaislikoiden liepeillä parvissa.',
    bestTimes: 'Kesä–syksy valoisaan aikaan, erityisesti aamu ja iltapäivä. Syyskuulla isot ahvenet syvemmälle.',
    lures: 'Pienet lippa- ja lusikkavieheet (Mepps #2–3), tasapainopilkki, jigi 5–7 cm, mato-onki.',
    weather: 'Tyyni tai hieman tuulinen, aurinkoinen tai puolipilvinen päivä. Vältä myrskyä.',
  },
  {
    id: 'hauki',
    name: 'Hauki',
    latin: 'Esox lucius',
    note: 'Kaislikoiden kuningas',
    photo: proxied('https://upload.wikimedia.org/wikipedia/commons/thumb/9/9b/Esox_lucius1.jpg/1280px-Esox_lucius1.jpg'),
    identification: 'Pitkä, torpedomainen vartalo, litteä kuonopää ja terävät hampaat. Vihertävä kyljissä vaaleita täpliä ja raitoja.',
    habitat: 'Matalat kasvikasvustot, kaislikot, lahdet ja saaristot koko Suomessa. Suuret yksilöt syvempien reunoilla.',
    bestTimes: 'Kevät heti kudun jälkeen (touko–kesäkuu) ja syksy (syys–lokakuu). Hämärä aamu ja ilta parhaita.',
    lures: 'Jerkbaitit (Rapala Super Shad Rap, X-Rap), isot lusikat, kumikalat 15–25 cm, spinnerbaitit.',
    weather: 'Pilvinen, lämmin ja hieman tuulinen päivä. Tihkusade aktivoi — vältä kirkasta helteistä päivää.',
  },
  {
    id: 'kuha',
    name: 'Kuha',
    latin: 'Sander lucioperca',
    note: 'Syvänteiden hopea',
    photo: proxied('https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Zander.jpg/1280px-Zander.jpg'),
    identification: 'Hopeanharmaa, pitkulainen peto. Selässä kaksi erillistä selkäevää, hampaat terävät kuten haukella. Suuret, lasimaiset silmät.',
    habitat: 'Syvät, rehevät järvet ja saaristo. Oleskelee syvänteiden reunoilla 5–15 metrissä, nousee öisin matalammalle.',
    bestTimes: 'Kesä–loppusyksy. Hämärä ja yö parhaita — auringonlaskusta puoleenyöhön. Myös pilvisinä päivinä.',
    lures: 'Jigit 10–14 cm (puna-valkoinen, kirjo), syvälle sukeltavat vaaput, tasapainopilkki talvella.',
    weather: 'Pilvinen tai tyyni, matalapaine. Sameat vedet suosivat kuhaa. Vältä myrskyä ja kirkasta helteistä päivää.',
  },
  {
    id: 'siika',
    name: 'Siika',
    latin: 'Coregonus lavaretus',
    note: 'Hopeinen pohjoisen helmi',
    photo: proxied('https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Coregonus_lavaretus1.jpg/1280px-Coregonus_lavaretus1.jpg'),
    identification: 'Hopeanvärinen, sivuilta litistynyt lohikala. Rasvaevä, pieni suu alahuulella, hopeiset suomut.',
    habitat: 'Puhtaat, viileät järvet ja rannikko. Useita muotoja (järvi-, vaellus-, pohjasiika). Viihtyy avovesillä ja rannoilla.',
    bestTimes: 'Alkukesä (touko–kesäkuu) rannoilla sulamisen jälkeen, syksy kutuaikaan loka–marraskuussa.',
    lures: 'Pienet lusikat, siikaperhot (nymfit), heittoperhokalastus, verkot. Kuivaperhoja pintasyötöllä.',
    weather: 'Tyyni, viileä ja pilvinen päivä. Alkukesän auringonlasku on taika-aikaa.',
  },
  {
    id: 'taimen',
    name: 'Taimen',
    latin: 'Salmo trutta',
    note: 'Virran vikkeliä aristokraatteja',
    photo: proxied('https://upload.wikimedia.org/wikipedia/commons/thumb/5/5e/Salmo_trutta.jpg/1280px-Salmo_trutta.jpg'),
    identification: 'Pyöreämpi vartalo kuin lohella, mustia täpliä myös pyrstön alapuolella. Punaisia pisteitä kyljissä, rasvaevä.',
    habitat: 'Virtaavat vedet, kosket ja järvien kylmät alueet. Vaelluskantoja merellä ja järvillä (meritaimen, järvitaimen).',
    bestTimes: 'Kesä sateisina päivinä ja syksy kutuaikaan. Virtavesillä aamu ja ilta — talvi avovesialueilla.',
    lures: 'Perhot (Black Zonker, Mikkeli, nymfit), spinnerit (Mepps #2–3), vaapu 7–11 cm, uistin.',
    weather: 'Pilvinen, viileä sadepäivä on paras. Vältä kirkasta helteistä päivää — kala menee syvälle.',
  },
  {
    id: 'lohi',
    name: 'Lohi',
    latin: 'Salmo salar',
    note: 'Vaelluskalojen ylpeys',
    photo: proxied('https://upload.wikimedia.org/wikipedia/commons/thumb/9/9d/Salmo_salar-Atlantic_Salmon-Atlanterhavsparken_Norway.JPG/1280px-Salmo_salar-Atlantic_Salmon-Atlanterhavsparken_Norway.JPG'),
    identification: 'Hopeanhohtoinen, voimakas vartalo. Mustia täpliä selässä ja kyljissä pyrstöviivan yläpuolella. Rasvaevä ja syvälovinen pyrstö.',
    habitat: 'Kutuvaellukset Tornion- ja Simojokeen sekä Itämereen. Avomerellä syö silakkaa, nousee jokeen kesällä.',
    bestTimes: 'Kesä–alkusyksy nousujoilla (kesä–elokuu). Vetouistelu Itämerellä kevät–kesä.',
    lures: 'Lohiperhot (tubiperhot, Templedog), isot vaaput, uistimet, tasapainot (Rapala Downdeep, Nils Master).',
    weather: 'Pilvipouta ja heikko sade jokivedessä. Veden lämpötila 10–16 °C paras. Vältä kuivaa helteistä kautta.',
  },
  {
    id: 'made',
    name: 'Made',
    latin: 'Lota lota',
    note: 'Talven herkku, pohjalla',
    photo: proxied('https://upload.wikimedia.org/wikipedia/commons/thumb/f/f3/Lota_lota_Oulanka.jpg/1280px-Lota_lota_Oulanka.jpg'),
    identification: 'Ainoa makean veden turskakala. Pitkä vartalo, leveä pää, viiksi leuan alla. Marmoroitu ruskeankeltainen väritys.',
    habitat: 'Viileät, happirikkaat järvet ja virrat koko Suomessa. Pohjakala — kivikot, hiekkapohjat 3–20 metrissä.',
    bestTimes: 'Talvi (joulu–helmikuu) kutuaikaan — paras pilkkikausi. Myös syyskuulla pimeällä rannoilta.',
    lures: 'Pilkkivieheet painolla (madepilkki) silakkasyötöllä, iskukoukut, pohjaonki muikun palalla.',
    weather: 'Kylmä talvipakkanen (-5…-20 °C) ja kiinteä jää. Pimeä yö parhaita — made on yöeläjä.',
  },
];

// Lure gallery
const LURES = [
  { id: 'rapala-ssr', name: 'Super Shad Rap', type: 'Jerkbait', for: 'Hauki, kuha', conditions: 'Matalat kaislikot, pilvinen', color: '#c0392b' },
  { id: 'jigi-12',    name: 'Jigi 12 cm',     type: 'Pehmoviehe', for: 'Kuha, hauki', conditions: 'Syvänteet, hämärä',       color: '#8e44ad' },
  { id: 'mepps-3',    name: 'Mepps Aglia #3', type: 'Lusikkaviehe', for: 'Ahven, taimen', conditions: 'Kirkas vesi, aurinko', color: '#f39c12' },
  { id: 'perho-zonker', name: 'Black Zonker', type: 'Perho',    for: 'Taimen, lohi', conditions: 'Virtavedet, sade',          color: '#2c3e50' },
  { id: 'rapala-xrap',  name: 'Rapala X-Rap', type: 'Jerkbait', for: 'Hauki, kuha',  conditions: 'Rannat, tuulinen',          color: '#27ae60' },
  { id: 'tasapaino',    name: 'Tasapainopilkki', type: 'Pilkki', for: 'Ahven, kuha', conditions: 'Talvikalastus, jää',       color: '#2980b9' },
];

// Map points (lat/lng-ish percentages used in the stylized map)
const MAP_POINTS = [
  { id: 'p-saimaa',    kind: 'fish',    label: 'Saimaa — kuha-apaja',   x: 62, y: 48 },
  { id: 'p-paijanne',  kind: 'fish',    label: 'Päijänne — hauki',      x: 48, y: 55 },
  { id: 'p-inari',     kind: 'fish',    label: 'Inari — nieriä',        x: 55, y: 12 },
  { id: 'p-laavu-1',   kind: 'laavu',   label: 'Laavu: Puumala',        x: 65, y: 52 },
  { id: 'p-laavu-2',   kind: 'laavu',   label: 'Laavu: Nellim',         x: 58, y: 18 },
  { id: 'p-nuotio-1',  kind: 'nuotio',  label: 'Nuotiopaikka: Sysmä',   x: 46, y: 58 },
  { id: 'p-wc-1',      kind: 'wc',      label: 'WC: Puumalan satama',   x: 68, y: 50 },
  { id: 'p-vene-1',    kind: 'vene',    label: 'Venepaikka: Lahti',     x: 44, y: 62 },
  { id: 'p-mokki-1',   kind: 'mokki',   label: 'Vuokramökki: Puumala',  x: 70, y: 54 },
  { id: 'p-mokki-2',   kind: 'mokki',   label: 'Vuokramökki: Nellim',   x: 56, y: 20 },
  { id: 'p-me',        kind: 'me',      label: 'Sinä olet tässä',       x: 50, y: 70 },
];

const LAAVUT = [
  { id: 'l-puumala',   name: 'Puumalan laavu',      kind: 'Laavu',          dist: '1,2 km', note: 'Puut, kuivakäymälä, laituri' },
  { id: 'l-nellim',    name: 'Nellimin kota',       kind: 'Laavu',          dist: '14 km',  note: 'Avoinna ympäri vuoden' },
  { id: 'n-sysma',     name: 'Sysmän nuotiopaikka', kind: 'Nuotiopaikka',   dist: '3,4 km', note: 'Grillikatos, puut' },
  { id: 'wc-puumala',  name: 'Puumalan satama WC',  kind: 'WC',             dist: '0,8 km', note: 'Esteetön, auki 24/7' },
  { id: 'l-koli',      name: 'Kolin laavu',         kind: 'Laavu',          dist: '42 km',  note: 'Näköalapaikka' },
];

const CABINS = [
  { id: 'mk-puumala',  name: 'Puumalan rantamökki', beds: '4+2', dist: '0,5 km järvestä', price: '120 €/vrk', note: 'Sauna, vene, laituri' },
  { id: 'mk-nellim',   name: 'Nellimin huvila',     beds: '6',   dist: '0,2 km järvestä', price: '180 €/vrk', note: 'Takka, savusauna' },
  { id: 'mk-sysma',    name: 'Sysmän aittamökki',   beds: '2',   dist: '1,0 km järvestä', price: '85 €/vrk',  note: 'Soutuvene mukana' },
  { id: 'mk-koli',     name: 'Kolin lomamökki',     beds: '8',   dist: '2,0 km järvestä', price: '220 €/vrk', note: 'Palju, näköala' },
];

function computeForecast(locId, weatherId, speciesId) {
  const loc = LOCATIONS.find(l => l.id === locId);
  const weather = WEATHERS.find(w => w.id === weatherId);
  const species = SPECIES.find(s => s.id === speciesId);
  if (!loc || !weather || !species) return null;

  let score = loc.base + weather.mod;
  if (species.loves.includes(weather.id)) score += 15;
  if (species.hates.includes(weather.id)) score -= 15;
  score = Math.max(0, Math.min(100, score));

  let verdict, tone;
  if (score >= 80)      { verdict = 'Erinomainen — lähde heti!';      tone = 'excellent'; }
  else if (score >= 60) { verdict = 'Hyvä — kannattaa kokeilla.';     tone = 'good'; }
  else if (score >= 40) { verdict = 'Kohtalainen — voi napata.';      tone = 'ok'; }
  else                  { verdict = 'Heikko — ehkä toinen päivä.';    tone = 'weak'; }

  return { score, verdict, tone, summary: `${species.label} · ${loc.label} · ${weather.label}` };
}

// ---------- Header ----------
function Header() {
  return (
    <header className="app-header">
      <div className="brand">
        <PikeBadge size={52} />
        <div className="brand-text">
          <h1 className="wordmark">NAPPAAKO<span className="qmark">?</span></h1>
          <p className="tagline">Suomalainen kalastuskaveri</p>
        </div>
      </div>
      <button className="icon-btn header-icon" data-testid="header-pike-button" aria-label="NAPPAAKO? etusivu">
        <PikeIcon size={34} />
      </button>
    </header>
  );
}

// ---------- Hero banner ----------
function HeroBanner() {
  return (
    <section className="hero-banner" aria-label="Tervetuloa kalastukseen">
      <svg className="hero-art" viewBox="0 0 400 220" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
        <defs>
          <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#f6c97a" />
            <stop offset="0.55" stopColor="#f08c4a" />
            <stop offset="1" stopColor="#5d6b8a" />
          </linearGradient>
          <linearGradient id="water" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#1e4b6b" />
            <stop offset="1" stopColor="#0d2b40" />
          </linearGradient>
          <linearGradient id="forest" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0" stopColor="#1d3a2a" />
            <stop offset="1" stopColor="#0b2016" />
          </linearGradient>
        </defs>
        <rect x="0" y="0" width="400" height="130" fill="url(#sky)" />
        <circle cx="300" cy="100" r="28" fill="#fff2c0" opacity="0.9" />
        <polygon points="0,130 40,105 80,125 120,100 170,120 220,95 270,120 320,105 400,125 400,135 0,135" fill="url(#forest)" opacity="0.9" />
        <rect x="0" y="130" width="400" height="90" fill="url(#water)" />
        <g opacity="0.5" fill="#f6c97a">
          <rect x="292" y="140" width="16" height="3" />
          <rect x="288" y="150" width="24" height="2" />
          <rect x="294" y="160" width="12" height="2" />
          <rect x="286" y="172" width="28" height="2" />
          <rect x="292" y="184" width="16" height="2" />
        </g>
        <g stroke="#5fa8c7" strokeWidth="1" fill="none" opacity="0.35">
          <path d="M20 160 Q 40 155 60 160 T 100 160" />
          <path d="M110 180 Q 130 175 150 180 T 190 180" />
          <path d="M220 195 Q 240 190 260 195 T 300 195" />
        </g>
        <g transform="translate(60,155)">
          <path d="M0 10 Q 30 20 60 10 L 55 16 Q 30 24 5 16 Z" fill="#111" />
          <rect x="26" y="-18" width="2" height="20" fill="#111" />
          <circle cx="27" cy="-22" r="4" fill="#111" />
          <line x1="27" y1="-18" x2="52" y2="4" stroke="#111" strokeWidth="1" />
        </g>
        <g transform="translate(240,150)">
          <ellipse cx="0" cy="0" rx="10" ry="4" fill="#4a7a95" />
          <polygon points="10,0 16,-4 16,4" fill="#2d5a75" />
        </g>
      </svg>
      <div className="hero-overlay">
        <span className="hero-kicker">🎣 NAPPAAKO?</span>
        <h2 className="hero-title">Lähde kalaan tänään</h2>
        <p className="hero-sub">Sää, paikat, lajit ja luvat — kaikki yhdessä sovelluksessa.</p>
      </div>
    </section>
  );
}

// ---------- Search ----------
function SearchBar() {
  return (
    <form className="search-bar" role="search" onSubmit={(e) => e.preventDefault()}>
      <label htmlFor="main-search" className="sr-only">Hae</label>
      <span className="search-icon" aria-hidden="true"><SearchIcon /></span>
      <input
        id="main-search"
        type="search"
        placeholder="Hae kalalajia, vesistöä tai kalastuspaikkaa…"
        data-testid="main-search-input"
        autoComplete="off"
      />
      <button type="submit" className="search-submit" data-testid="main-search-submit">Hae</button>
    </form>
  );
}

// ---------- Nav grid ----------
function NavGrid({ onOpen }) {
  return (
    <nav aria-label="Päävalinnat">
      <ul className="nav-grid">
        {NAV_TILES.map(({ id, label, Icon, hint, view }) => (
          <li key={id}>
            <button
              type="button"
              className="nav-tile"
              data-testid={`nav-${id}-button`}
              onClick={() => onOpen(view)}
            >
              <span className="nav-tile-icon"><Icon /></span>
              <span className="nav-tile-label">{label}</span>
              <span className="nav-tile-hint">{hint}</span>
            </button>
          </li>
        ))}
      </ul>
    </nav>
  );
}

// ---------- Nappaako Nyt card ----------
function NappaakoNytCard({ locationId, setLocationId }) {
  const [weatherId, setWeatherId] = useState('');
  const [speciesId, setSpeciesId] = useState('');
  const [result, setResult] = useState(null);

  const ready = locationId && weatherId && speciesId;
  const preview = useMemo(
    () => (ready ? computeForecast(locationId, weatherId, speciesId) : null),
    [ready, locationId, weatherId, speciesId]
  );

  const display = result ?? preview;
  const fillPct = display ? display.score : 0;

  const handleCheck = () => {
    if (!ready) return;
    setResult(computeForecast(locationId, weatherId, speciesId));
  };

  return (
    <section className="feature-card" aria-labelledby="nyt-title">
      <div className="feature-card-bg" aria-hidden="true">
        <svg viewBox="0 0 400 160" preserveAspectRatio="none" className="wave-svg">
          <path d="M0 90 Q 50 70 100 90 T 200 90 T 300 90 T 400 90 V160 H0Z" fill="var(--primary-dark)" opacity="0.35" />
          <path d="M0 110 Q 50 90 100 110 T 200 110 T 300 110 T 400 110 V160 H0Z" fill="var(--primary-dark)" opacity="0.55" />
          <path d="M0 130 Q 50 115 100 130 T 200 130 T 300 130 T 400 130 V160 H0Z" fill="var(--primary-dark)" opacity="0.75" />
        </svg>
      </div>

      <div className="feature-card-inner">
        <div className="feature-head">
          <span className="feature-badge"><SparkIcon width="16" height="16" /> ENNUSTE</span>
          <h2 id="nyt-title" className="feature-title">NAPPAAKO NYT?</h2>
        </div>

        <p className="feature-desc">
          Kalastusennuste yhdistää sijainnin, sään ja kalalajien aktiivisuuden —
          näet yhdellä silmäyksellä, kannattaako lähteä järvelle.
        </p>

        <div className="forecast-form">
          <label className="forecast-field">
            <span className="forecast-label">Sijainti</span>
            <select
              className="forecast-select"
              value={locationId}
              onChange={(e) => { setLocationId(e.target.value); setResult(null); }}
              data-testid="nappaako-location-select"
            >
              <option value="">Valitse vesistö…</option>
              {LOCATIONS.map(l => <option key={l.id} value={l.id}>{l.label}</option>)}
            </select>
          </label>

          <label className="forecast-field">
            <span className="forecast-label">Sää</span>
            <select
              className="forecast-select"
              value={weatherId}
              onChange={(e) => { setWeatherId(e.target.value); setResult(null); }}
              data-testid="nappaako-weather-select"
            >
              <option value="">Valitse sää…</option>
              {WEATHERS.map(w => <option key={w.id} value={w.id}>{w.label}</option>)}
            </select>
          </label>

          <label className="forecast-field">
            <span className="forecast-label">Kalalaji</span>
            <select
              className="forecast-select"
              value={speciesId}
              onChange={(e) => { setSpeciesId(e.target.value); setResult(null); }}
              data-testid="nappaako-species-select"
            >
              <option value="">Valitse laji…</option>
              {SPECIES.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
            </select>
          </label>
        </div>

        <div className="feature-meter" aria-hidden={!display}>
          <div className="meter-track">
            <div className="meter-fill" style={{ width: `${fillPct}%` }} />
            <div className="meter-marker" style={{ left: `${fillPct}%` }} />
          </div>
          <div className="meter-labels">
            <span>Heikko</span><span>Kohtalainen</span><span>Hyvä</span><span>Erinomainen</span>
          </div>
        </div>

        {display && (
          <div className={`forecast-result tone-${display.tone}`} role="status" aria-live="polite" data-testid="nappaako-result">
            <div className="forecast-score"><strong>{display.score}</strong><span>/100</span></div>
            <div className="forecast-text">
              <p className="forecast-verdict">{display.verdict}</p>
              <p className="forecast-summary">{display.summary}</p>
            </div>
          </div>
        )}

        <button type="button" className="feature-cta" data-testid="nappaako-nyt-button" onClick={handleCheck} disabled={!ready}>
          {ready ? 'Tarkista nappaako nyt' : 'Valitse sijainti, sää ja laji'}
        </button>
        <p className="feature-foot">Yhdistetään oikeaan sää- ja sijaintidataan</p>
      </div>
    </section>
  );
}

// ---------- Mitä täällä nappaa section ----------
function MitaNappaaSection({ locationId }) {
  const location = LOCATIONS.find(l => l.id === locationId);
  const species = locationId ? (AREA_SPECIES[locationId] ?? []) : [];

  return (
    <section className="list-section" aria-labelledby="mita-title">
      <div className="section-head">
        <div>
          <h2 id="mita-title" className="section-title">Mitä täällä nappaa?</h2>
          <p className="section-sub">
            {location ? `Alueen kalalajit — ${location.label}` : 'Alueen kalalajit — valitse ensin sijainti'}
          </p>
        </div>
        <button type="button" className="link-btn" data-testid="mita-nappaa-all-button">Kaikki lajit</button>
      </div>

      {!locationId && (
        <div className="placeholder-grid">
          {[0, 1, 2, 3].map((i) => (
            <div className="species-card placeholder" key={i} aria-hidden="true">
              <div className="species-thumb"><PikeIcon size={56} /></div>
              <div className="species-meta">
                <div className="skeleton skeleton-line" style={{ width: '70%' }} />
                <div className="skeleton skeleton-line" style={{ width: '45%' }} />
              </div>
            </div>
          ))}
        </div>
      )}

      {locationId && species.length > 0 && (
        <ul className="placeholder-grid species-list" data-testid="mita-nappaa-list">
          {species.map((s) => (
            <li key={s.id} className="species-card" data-testid={`species-${s.id}-card`}>
              <div className="species-thumb"><FishIcon width="40" height="40" /></div>
              <div className="species-meta">
                <p className="species-name">{s.name}</p>
                <p className="species-latin">{s.latin}</p>
                <p className="species-size"><span className="species-size-badge">{s.size}</span></p>
                <p className="species-note">{s.note}</p>
              </div>
            </li>
          ))}
        </ul>
      )}

      {locationId
        ? <p className="placeholder-note">Lähde: Suomen kalalajiesiintymät ({location.label}).</p>
        : <p className="placeholder-note">Lajitiedot täydentyvät oikeasta Suomen kalalajitietokannasta.</p>}
    </section>
  );
}

// ---------- Tuoreimmat saaliit feed ----------
function TuoreimmatSaaliitSection({ extra, onShare }) {
  const all = extra.concat(RECENT_CATCHES);
  return (
    <section className="list-section" aria-labelledby="saaliit-title">
      <div className="section-head">
        <div>
          <h2 id="saaliit-title" className="section-title">Kalastajien saaliit</h2>
          <p className="section-sub">Yhteisön tuoreet saalisraportit</p>
        </div>
        <button type="button" className="link-btn" data-testid="saaliit-all-button">Katso kaikki</button>
      </div>

      <ul className="catches-list" data-testid="catches-list">
        {all.map((c) => (
          <li key={c.id}>
            <article className="catch-card" data-testid={`catch-${c.id}-card`}>
              <div className={`catch-avatar ${c.avatarTone}`} aria-hidden="true">
                <span className="catch-avatar-initials">{c.initials}</span>
              </div>
              <div className="catch-body">
                <div className="catch-head">
                  <p className="catch-user">{c.user}</p>
                  <span className="catch-time">{c.time}</span>
                </div>
                <p className="catch-headline">
                  <strong>{c.species}</strong>
                  <span className="catch-meta-dot" aria-hidden="true">·</span>
                  <span className="catch-size">{c.weight} / {c.length}</span>
                </p>
                <p className="catch-location">📍 {c.location}</p>
                <p className="catch-note">{c.note}</p>
                <div className="catch-footer">
                  <span className="catch-lure">🎣 {c.lure}</span>
                  <span className="catch-stats">
                    <button type="button" className="catch-stat-btn"
                      data-testid={`catch-${c.id}-like-button`}
                      aria-label={`Tykkää saaliista — ${c.user} ${c.species}`}>❤ {c.likes ?? 0}</button>
                    <button type="button" className="catch-stat-btn"
                      data-testid={`catch-${c.id}-comment-button`}
                      aria-label={`Kommentoi saalista — ${c.user} ${c.species}`}>💬 {c.comments ?? 0}</button>
                  </span>
                </div>
              </div>
              <div className="catch-photo" aria-hidden="true">
                <FishIcon width="40" height="40" />
              </div>
            </article>
          </li>
        ))}
      </ul>
      <button type="button" className="ghost-btn full" data-testid="share-catch-button" onClick={onShare}>
        Jaa oma saalis
      </button>
    </section>
  );
}

// ---------- Interactive map ----------
function MapView({ title = 'Kartta', subtitle = 'Kalastuspaikat, laavut, WC:t, venepaikat & mökit' }) {
  const [selected, setSelected] = useState(null);
  const kindLabel = { fish: 'Kalastuspaikka', laavu: 'Laavu', nuotio: 'Nuotiopaikka', wc: 'WC', vene: 'Venepaikka', mokki: 'Vuokramökki', me: 'Oma sijainti' };
  const kindEmoji = { fish: '🐟', laavu: '⛺', nuotio: '🔥', wc: '🚻', vene: '⛵', mokki: '🏡', me: '📍' };

  return (
    <section className="view-section" aria-labelledby="map-title">
      <div className="section-head">
        <div>
          <h2 id="map-title" className="section-title">{title}</h2>
          <p className="section-sub">{subtitle}</p>
        </div>
      </div>
      <div className="map-canvas" data-testid="map-canvas">
        <svg viewBox="0 0 400 300" className="map-svg" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
          <defs>
            <linearGradient id="map-land" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0" stopColor="#dfe9d7" />
              <stop offset="1" stopColor="#bcd0a9" />
            </linearGradient>
            <linearGradient id="map-water" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stopColor="#9ec9df" />
              <stop offset="1" stopColor="#4a90b8" />
            </linearGradient>
          </defs>
          <rect x="0" y="0" width="400" height="300" fill="url(#map-land)" />
          <path d="M180 60 Q 240 50 280 90 Q 300 140 260 180 Q 220 210 180 190 Q 140 160 150 110 Z" fill="url(#map-water)" />
          <path d="M60 180 Q 100 170 130 200 Q 140 240 100 260 Q 60 270 50 230 Z" fill="url(#map-water)" />
          <path d="M300 220 Q 340 215 360 240 Q 365 265 335 275 Q 305 275 300 250 Z" fill="url(#map-water)" />
          <path d="M150 110 Q 140 150 100 180" stroke="#4a90b8" strokeWidth="4" fill="none" opacity="0.7" />
          <path d="M260 180 Q 290 200 300 230" stroke="#4a90b8" strokeWidth="4" fill="none" opacity="0.7" />
          <g fill="#4e7a3a" opacity="0.6">
            <circle cx="40" cy="60" r="14" />
            <circle cx="60" cy="80" r="10" />
            <circle cx="330" cy="60" r="12" />
            <circle cx="350" cy="80" r="9" />
            <circle cx="30" cy="140" r="11" />
          </g>
          <path d="M0 250 Q 100 240 200 250 T 400 240" stroke="#f0d9a0" strokeWidth="3" fill="none" strokeDasharray="6 6" />
        </svg>

        {MAP_POINTS.map(p => (
          <button
            key={p.id}
            type="button"
            className={`map-pin pin-${p.kind}${selected === p.id ? ' is-selected' : ''}`}
            style={{ left: `${p.x}%`, top: `${p.y}%` }}
            data-testid={`map-pin-${p.id}`}
            aria-label={p.label}
            onClick={() => setSelected(p.id)}
          >
            <span className="map-pin-emoji" aria-hidden="true">{kindEmoji[p.kind]}</span>
          </button>
        ))}

        {selected && (() => {
          const p = MAP_POINTS.find(mp => mp.id === selected);
          return (
            <div className="map-popup" data-testid="map-popup">
              <strong>{kindEmoji[p.kind]} {kindLabel[p.kind]}</strong>
              <span>{p.label}</span>
            </div>
          );
        })()}
      </div>

      <div className="map-legend" aria-label="Kartan symbolit">
        <span className="legend-item"><em className="dot dot-fish" />Kalastus</span>
        <span className="legend-item"><em className="dot dot-laavu" />Laavut</span>
        <span className="legend-item"><em className="dot dot-nuotio" />Nuotio</span>
        <span className="legend-item"><em className="dot dot-wc" />WC</span>
        <span className="legend-item"><em className="dot dot-vene" />Vene</span>
        <span className="legend-item"><em className="dot dot-mokki" />Mökit</span>
        <span className="legend-item"><em className="dot dot-me" />Sinä</span>
      </div>
    </section>
  );
}

// ---------- Fish detail view ----------
function FishDetailView({ fish, onBack }) {
  return (
    <section className="view-section fish-detail" aria-labelledby="fish-detail-title">
      <button type="button" className="back-btn" data-testid="fish-detail-back-button" onClick={onBack}>
        ← Takaisin kalagalleriaan
      </button>

      <div className="fish-detail-hero">
        <img
          src={fish.photo}
          alt={`${fish.name} (${fish.latin})`}
          className="fish-detail-img"
          data-testid={`fish-detail-image-${fish.id}`}
          loading="eager"
        />
        <div className="fish-detail-head">
          <h2 id="fish-detail-title" className="fish-detail-name">{fish.name}</h2>
          <p className="fish-detail-latin">{fish.latin}</p>
          <p className="fish-detail-tag">{fish.note}</p>
        </div>
      </div>

      <dl className="fish-detail-list">
        <div className="fish-detail-row">
          <dt>🔎 Tunnistustiedot</dt>
          <dd>{fish.identification}</dd>
        </div>
        <div className="fish-detail-row">
          <dt>🌿 Tyypillinen elinympäristö</dt>
          <dd>{fish.habitat}</dd>
        </div>
        <div className="fish-detail-row">
          <dt>⏰ Parhaat kalastusajat</dt>
          <dd>{fish.bestTimes}</dd>
        </div>
        <div className="fish-detail-row">
          <dt>🎣 Sopivat vieheet</dt>
          <dd>{fish.lures}</dd>
        </div>
        <div className="fish-detail-row">
          <dt>☁️ Sopivat sääolosuhteet</dt>
          <dd>{fish.weather}</dd>
        </div>
      </dl>
    </section>
  );
}

// ---------- Fish gallery view (card layout with photos) ----------
function FishGalleryView({ onSelect }) {
  return (
    <section className="view-section">
      <div className="section-head">
        <div>
          <h2 className="section-title">Kalalajit</h2>
          <p className="section-sub">Suomen yleisimmät kalat</p>
        </div>
      </div>
      <ul className="fish-gallery" data-testid="fish-gallery">
        {FISH_GALLERY.map(f => (
          <li key={f.id} className="fish-card" data-testid={`fish-card-${f.id}`}>
            <div className="fish-photo">
              <img
                src={f.photo}
                alt={`${f.name} (${f.latin})`}
                className="fish-photo-img"
                loading="lazy"
              />
            </div>
            <div className="fish-info">
              <p className="fish-name">{f.name}</p>
              <p className="fish-latin">{f.latin}</p>
              <p className="fish-note">{f.note}</p>
              <button
                type="button"
                className="feature-cta solid fish-details-btn"
                data-testid={`fish-details-${f.id}-button`}
                onClick={() => onSelect(f.id)}
              >
                Katso tiedot
              </button>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}

// ---------- Lure gallery view ----------
function LureGalleryView() {
  return (
    <section className="view-section">
      <div className="section-head">
        <div>
          <h2 className="section-title">Vieheet</h2>
          <p className="section-sub">Mille kalalle ja millaisissa olosuhteissa</p>
        </div>
      </div>
      <ul className="lure-gallery" data-testid="lure-gallery">
        {LURES.map(l => (
          <li key={l.id} className="lure-card" data-testid={`lure-card-${l.id}`}>
            <div className="lure-photo" style={{ background: `linear-gradient(135deg, ${l.color}, #111827)` }}>
              <svg viewBox="0 0 100 60" className="lure-ill" aria-hidden="true">
                <ellipse cx="40" cy="30" rx="24" ry="10" fill={l.color} stroke="#000" strokeOpacity="0.3" />
                <circle cx="20" cy="30" r="3" fill="#fff" />
                <circle cx="20" cy="30" r="1.5" fill="#000" />
                <path d="M64 30 L 90 30" stroke="#111" strokeWidth="2" />
                <path d="M85 25 L 92 32 L 85 32 Z" fill="#111" />
              </svg>
            </div>
            <div className="lure-info">
              <p className="lure-name">{l.name}</p>
              <p className="lure-type">{l.type}</p>
              <p className="lure-meta"><strong>Kalalle:</strong> {l.for}</p>
              <p className="lure-meta"><strong>Olot:</strong> {l.conditions}</p>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}

// ---------- Catch log form ----------
function CatchLogView({ onSaved }) {
  const [form, setForm] = useState({
    species: '', weight: '', length: '', date: '', location: '', lure: '', weather: '', note: '',
  });
  const [saved, setSaved] = useState(false);

  const update = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!form.species) return;
    const entry = {
      id: `my-${Date.now()}`,
      user: 'Sinä',
      initials: 'SI',
      avatarTone: 'tone-c',
      species: form.species || 'Kala',
      weight: form.weight || '—',
      length: form.length || '—',
      location: form.location || '—',
      lure: form.lure || '—',
      time: 'juuri nyt',
      note: form.note || 'Oma saalis.',
      likes: 0, comments: 0,
    };
    onSaved?.(entry);
    setSaved(true);
    setForm({ species: '', weight: '', length: '', date: '', location: '', lure: '', weather: '', note: '' });
  };

  return (
    <section className="view-section">
      <div className="section-head">
        <div>
          <h2 className="section-title">Saalispäiväkirja</h2>
          <p className="section-sub">Tallenna oma saalis</p>
        </div>
      </div>
      <form className="catch-form" onSubmit={handleSubmit} data-testid="catch-form">
        <label className="field">
          <span>Kalalaji</span>
          <input type="text" value={form.species} onChange={update('species')} placeholder="esim. Hauki" data-testid="catch-species-input" required />
        </label>
        <div className="field-row">
          <label className="field">
            <span>Paino</span>
            <input type="text" value={form.weight} onChange={update('weight')} placeholder="2,5 kg" data-testid="catch-weight-input" />
          </label>
          <label className="field">
            <span>Pituus</span>
            <input type="text" value={form.length} onChange={update('length')} placeholder="65 cm" data-testid="catch-length-input" />
          </label>
        </div>
        <label className="field">
          <span>Päivämäärä</span>
          <input type="date" value={form.date} onChange={update('date')} data-testid="catch-date-input" />
        </label>
        <label className="field">
          <span>Paikka</span>
          <input type="text" value={form.location} onChange={update('location')} placeholder="Saimaa · Puumala" data-testid="catch-location-input" />
        </label>
        <label className="field">
          <span>Viehe</span>
          <input type="text" value={form.lure} onChange={update('lure')} placeholder="Rapala Super Shad Rap" data-testid="catch-lure-input" />
        </label>
        <label className="field">
          <span>Sää</span>
          <input type="text" value={form.weather} onChange={update('weather')} placeholder="Pilvinen, 14 °C" data-testid="catch-weather-input" />
        </label>
        <label className="field">
          <span>Kuva (URL)</span>
          <input type="text" placeholder="Liitä kuvan osoite" data-testid="catch-photo-input" />
        </label>
        <label className="field">
          <span>Oma teksti</span>
          <textarea rows="3" value={form.note} onChange={update('note')} placeholder="Kerro, miten saalis napsi…" data-testid="catch-note-input" />
        </label>
        <button type="submit" className="feature-cta solid" data-testid="catch-save-button">Tallenna saalis</button>
        {saved && <p className="saved-note" role="status" data-testid="catch-saved-note">✓ Saalis tallennettu feediin</p>}
      </form>
    </section>
  );
}

// ---------- Laavut view ----------
function LaavutView() {
  return (
    <section className="view-section">
      <div className="section-head">
        <div>
          <h2 className="section-title">Laavut & nuotiopaikat</h2>
          <p className="section-sub">Laavut, nuotiopaikat ja WC:t kartalla ja listana</p>
        </div>
      </div>
      <MapView title="LAAVUT" subtitle="Löydä laavut, nuotiopaikat ja WC:t" />
      <ul className="list-plain" data-testid="laavut-list">
        {LAAVUT.map(l => (
          <li key={l.id} className="plain-card" data-testid={`laavu-item-${l.id}`}>
            <div className="plain-icon" aria-hidden="true">⛺</div>
            <div className="plain-body">
              <p className="plain-title">{l.name}</p>
              <p className="plain-sub">{l.kind} · {l.dist}</p>
              <p className="plain-note">{l.note}</p>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}

// ---------- Mökit view ----------
function MokitView() {
  return (
    <section className="view-section">
      <div className="section-head">
        <div>
          <h2 className="section-title">Vuokramökit</h2>
          <p className="section-sub">Lähellä kalastuspaikkoja</p>
        </div>
      </div>
      <MapView title="Mökit kartalla" subtitle="Vuokramökit kalastusalueen läheltä" />
      <ul className="cabin-list" data-testid="cabin-list">
        {CABINS.map(c => (
          <li key={c.id} className="cabin-card" data-testid={`cabin-card-${c.id}`}>
            <div className="cabin-photo" aria-hidden="true">
              <svg viewBox="0 0 100 60" preserveAspectRatio="xMidYMid slice">
                <rect x="0" y="40" width="100" height="20" fill="#4a90b8" />
                <polygon points="20,40 50,15 80,40" fill="#8b5a3c" />
                <rect x="30" y="40" width="40" height="20" fill="#c08458" />
                <rect x="44" y="48" width="12" height="12" fill="#4a3824" />
                <circle cx="85" cy="12" r="6" fill="#f6c97a" />
              </svg>
            </div>
            <div className="cabin-info">
              <p className="cabin-name">{c.name}</p>
              <p className="cabin-meta">🛏 {c.beds} · 📍 {c.dist}</p>
              <p className="cabin-note">{c.note}</p>
              <p className="cabin-price">{c.price}</p>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}

// ---------- Sää view ----------
function SaaView() {
  return (
    <section className="view-section">
      <div className="section-head">
        <div>
          <h2 className="section-title">Sää & kalastus</h2>
          <p className="section-sub">Mitä sää tarkoittaa kalastajalle</p>
        </div>
      </div>
      <ul className="weather-list" data-testid="weather-list">
        {WEATHERS.map(w => (
          <li key={w.id} className="weather-card" data-testid={`weather-card-${w.id}`}>
            <div className="weather-emoji" aria-hidden="true">
              {w.id === 'pilvinen' && '☁️'}
              {w.id === 'sade' && '🌧'}
              {w.id === 'tyyni' && '😶‍🌫️'}
              {w.id === 'aurinko' && '☀️'}
              {w.id === 'myrsky' && '⛈'}
            </div>
            <div>
              <p className="weather-name">{w.label}</p>
              <p className="weather-mod">Vaikutus: {w.mod > 0 ? '+' : ''}{w.mod} pistettä</p>
            </div>
          </li>
        ))}
      </ul>
    </section>
  );
}

// ---------- Profile view ----------
function ProfileView() {
  return (
    <section className="view-section">
      <div className="section-head">
        <div>
          <h2 className="section-title">Profiili</h2>
          <p className="section-sub">Oma kalastajan sivu</p>
        </div>
      </div>
      <div className="profile-card">
        <div className="profile-avatar">SI</div>
        <div>
          <p className="profile-name">Sinä, kalastaja</p>
          <p className="profile-sub">0 saalista jaettu · tasoltaan heittäjä</p>
        </div>
      </div>
    </section>
  );
}

// ---------- Bottom nav ----------
function BottomNav({ view, onNav }) {
  return (
    <nav className="bottom-nav" aria-label="Alanavigaatio">
      {BOTTOM_TABS.map(({ id, label, Icon, view: v }) => {
        const active = view === v || (v === 'koti' && view === 'home');
        return (
          <button
            key={id}
            type="button"
            className={`bottom-tab${active ? ' is-active' : ''}`}
            aria-current={active ? 'page' : undefined}
            data-testid={`bottom-${id}-button`}
            onClick={() => onNav(v === 'koti' ? 'home' : v)}
          >
            <Icon width="24" height="24" />
            <span>{label}</span>
          </button>
        );
      })}
    </nav>
  );
}

// ---------- App ----------
function App() {
  const { user } = useIdentity();
  const greetName = user?.name ? user.name.split(' ')[0] : null;
  const [locationId, setLocationId] = useState('');
  const [view, setView] = useState('home');
  const [myCatches, setMyCatches] = useState([]);
  const [selectedFishId, setSelectedFishId] = useState(null);

  const openView = (v) => {
    if (v !== 'kalat') setSelectedFishId(null);
    setView(v);
  };
  const addCatch = (c) => setMyCatches(prev => [c, ...prev]);

  const selectedFish = selectedFishId ? FISH_GALLERY.find(f => f.id === selectedFishId) : null;
  const showBackBar = view !== 'home' && !(view === 'kalat' && selectedFish);

  return (
    <div className="app-shell">
      <div className="app-bg" aria-hidden="true" />
      <Header />

      <main className="app-main">
        {showBackBar && (
          <button type="button" className="back-btn" data-testid="back-home-button" onClick={() => { setSelectedFishId(null); setView('home'); }}>
            ← Takaisin etusivulle
          </button>
        )}

        {view === 'home' && (
          <>
            {greetName && (
              <p className="greet">Terve, {greetName} 👋 — missä tänään kalastetaan?</p>
            )}
            <HeroBanner />
            <SearchBar />
            <NavGrid onOpen={openView} />
            <NappaakoNytCard locationId={locationId} setLocationId={setLocationId} />
            <MitaNappaaSection locationId={locationId} />
            <TuoreimmatSaaliitSection extra={myCatches} onShare={() => setView('saaliit')} />
          </>
        )}

        {view === 'kartta' && <MapView />}
        {view === 'kalat' && (
          selectedFish
            ? <FishDetailView fish={selectedFish} onBack={() => setSelectedFishId(null)} />
            : <FishGalleryView onSelect={setSelectedFishId} />
        )}
        {view === 'viehet' && <LureGalleryView />}
        {view === 'saaliit' && (
          <>
            <CatchLogView onSaved={addCatch} />
            <TuoreimmatSaaliitSection extra={myCatches} onShare={() => {}} />
          </>
        )}
        {view === 'feed' && <TuoreimmatSaaliitSection extra={myCatches} onShare={() => setView('saaliit')} />}
        {view === 'laavut' && <LaavutView />}
        {view === 'mokit' && <MokitView />}
        {view === 'saa' && <SaaView />}
        {view === 'profiili' && <ProfileView />}

        <footer className="app-foot">
          <PikeIcon size={32} />
          <p>NAPPAAKO? · Tehty suomalaisille kalastajille · v0.1</p>
        </footer>
      </main>

      <BottomNav view={view} onNav={(v) => { if (v !== 'kalat') setSelectedFishId(null); setView(v); }} />
    </div>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);