// iceland-app.jsx — Home, Day Detail, nav shell. Needs all prior files.
const { useState: useS } = React;

// ── Home ─────────────────────────────────────────────────────
function Home({ go, onSignOut }) {
  const cd = useCountdown(TRIP.meta.depart);
  const utils = [
    { id: 'routes', label: 'Routes' }, { id: 'slaap', label: 'Slaapplekken' },
    { id: 'paklijst', label: 'Paklijst' }, { id: 'boekingen', label: 'Boekingen' },
    { id: 'praktisch', label: 'Praktisch' }, { id: 'budget', label: 'Budget' },
  ];
  return (
    <div style={{ height: '100%', overflowY: 'auto', background: GL.bg, WebkitOverflowScrolling: 'touch' }}>
      {/* Hero */}
      <div style={{ position: 'relative', height: 360 }}>
        <Ph hue={222} h={360} src={TRIP.meta.heroImg} label="Langjökull gletsjer" />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(11,12,15,0.5) 0%, rgba(11,12,15,0.05) 38%, rgba(11,12,15,0.97) 100%)' }} />
        <div style={{ position: 'absolute', top: 22, left: 20, right: 20, display: 'flex', justifyContent: 'space-between' }}>
          <Kicker>{TRIP.meta.dates.toUpperCase()}</Kicker>
          <Kicker color={GL.faint}>{TRIP.meta.crew.toUpperCase()} · ZELF RIJDEN</Kicker>
        </div>
        <div style={{ position: 'absolute', bottom: 20, left: 20, right: 20 }}>
          <div style={{ fontFamily: GL.display, fontSize: 80, lineHeight: 0.82, letterSpacing: 0.5, textTransform: 'uppercase', color: GL.text }}>IJsland</div>
          <div style={{ fontFamily: GL.display, fontSize: 21, letterSpacing: 3, textTransform: 'uppercase', color: GL.glacier, marginTop: 9 }}>Mannentrip — vol gas</div>
        </div>
      </div>

      {/* Countdown */}
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', padding: '15px 20px', borderBottom: `1px solid ${GL.line}` }}>
        <div style={{ fontFamily: GL.mono, fontSize: 11, letterSpacing: 1.5, color: GL.mut }}>NOG TE GAAN</div>
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 7 }}>
          {cd && <React.Fragment>
            <span style={{ fontFamily: GL.display, fontSize: 40, lineHeight: 1, color: GL.glacier }}>{cd.days}</span>
            <span style={{ fontFamily: GL.mono, fontSize: 11, letterSpacing: 1, color: GL.mut }}>D</span>
            <span style={{ fontFamily: GL.display, fontSize: 40, lineHeight: 1, color: GL.text, marginLeft: 6 }}>{cd.hours}</span>
            <span style={{ fontFamily: GL.mono, fontSize: 11, letterSpacing: 1, color: GL.mut }}>U</span>
          </React.Fragment>}
        </div>
      </div>

      {/* Reiskaart entry */}
      <div style={{ padding: '16px 16px 6px' }}>
        <button onClick={() => go({ screen: 'map' })} style={{
          position: 'relative', width: '100%', height: 150, borderRadius: 16, overflow: 'hidden', cursor: 'pointer',
          border: `1px solid ${GL.lineStrong}`, padding: 0, textAlign: 'left',
          background: 'radial-gradient(120% 120% at 25% 10%, oklch(0.26 0.04 232), oklch(0.13 0.03 240) 75%)' }}>
          <MiniMap />
          <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(11,12,15,0.85) 0%, rgba(11,12,15,0.3) 60%, transparent 100%)' }} />
          <div style={{ position: 'absolute', left: 18, top: 0, bottom: 0, display: 'flex', flexDirection: 'column', justifyContent: 'center', width: '62%' }}>
            <Kicker>INTERACTIEVE KAART</Kicker>
            <div style={{ fontFamily: GL.display, fontSize: 30, textTransform: 'uppercase', color: GL.text, lineHeight: 0.95, marginTop: 6 }}>Reiskaart</div>
            <div style={{ fontFamily: GL.body, fontSize: 12.5, color: GL.mut, marginTop: 7, lineHeight: 1.4 }}>Alle {TRIP.pins.length} stops — tik voor foto, tijd & uitleg.</div>
          </div>
          <div style={{ position: 'absolute', right: 14, bottom: 14, width: 38, height: 38, borderRadius: '50%', background: GL.glacier,
            display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <svg width="15" height="15" viewBox="0 0 24 24" fill="none"><path d="M5 12h13M12 5l7 7-7 7" stroke={GL.bg} strokeWidth="2.4" strokeLinecap="round" strokeLinejoin="round"/></svg>
          </div>
        </button>
      </div>

      {/* Day cards */}
      <div style={{ padding: '12px 16px 6px' }}>
        <div style={{ fontFamily: GL.mono, fontSize: 10, letterSpacing: 1.5, color: GL.faint, margin: '6px 2px 12px' }}>HET PROGRAMMA · 5 DAGEN</div>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
          {TRIP.days.map((d, i) => (
            <button key={d.n} onClick={() => go({ screen: 'day', i })} style={{
              position: 'relative', height: 134, borderRadius: 15, overflow: 'hidden', cursor: 'pointer',
              border: `1px solid ${GL.line}`, padding: 0, textAlign: 'left', width: '100%' }}>
              <Ph hue={d.hue} h={134} src={d.img} />
              <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(100deg, rgba(8,9,12,0.94) 0%, rgba(8,9,12,0.55) 52%, rgba(8,9,12,0.18) 100%)' }} />
              <div style={{ position: 'absolute', inset: 0, padding: '15px 16px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
                  <div>
                    <span style={{ fontFamily: GL.mono, fontSize: 10, letterSpacing: 1.5, color: GL.glacier }}>{d.dow} · {d.date.toUpperCase()}</span>
                    <div style={{ fontFamily: GL.display, fontSize: 26, letterSpacing: 0.4, textTransform: 'uppercase', lineHeight: 0.95, marginTop: 4, color: GL.text }}>{d.title}</div>
                  </div>
                  <div style={{ fontFamily: GL.display, fontSize: 36, lineHeight: 1, color: 'rgba(255,255,255,0.22)' }}>{d.n}</div>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                  {d.kind === 'kick' && <KickBadge small />}
                  <span style={{ fontFamily: GL.body, fontSize: 12.5, color: 'rgba(255,255,255,0.85)', lineHeight: 1.3 }}>{d.kick ? d.kick.name : d.lede.split('.')[0]}</span>
                </div>
              </div>
            </button>
          ))}
        </div>
      </div>

      {/* Utilities */}
      <div style={{ padding: '14px 16px 40px' }}>
        <div style={{ fontFamily: GL.mono, fontSize: 10, letterSpacing: 1.5, color: GL.faint, margin: '6px 2px 12px' }}>INFO & VOORBEREIDING</div>
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
          {utils.map(u => (
            <button key={u.id} onClick={() => go({ screen: u.id })} style={{
              display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer',
              padding: '15px 15px', borderRadius: 13, background: GL.surface, border: `1px solid ${GL.line}`,
              fontFamily: GL.mono, fontSize: 12.5, letterSpacing: 0.3, color: GL.text }}>
              {u.label}
              <svg width="13" height="13" viewBox="0 0 24 24" fill="none"><path d="M5 12h13M12 5l7 7-7 7" stroke={GL.glacier} strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </button>
          ))}
        </div>
        <div style={{ textAlign: 'center', fontFamily: GL.mono, fontSize: 10, letterSpacing: 1, color: GL.faint, marginTop: 28 }}>SKÁL — MAAK ER EEN VETTE TRIP VAN</div>
        {onSignOut && (
          <div style={{ textAlign: 'center', marginTop: 18 }}>
            <button onClick={onSignOut} style={{ background: 'none', border: 'none', cursor: 'pointer',
              fontFamily: GL.mono, fontSize: 10, letterSpacing: 1, color: GL.faint, textDecoration: 'underline', padding: 8 }}>
              UITLOGGEN
            </button>
          </div>
        )}
      </div>
    </div>
  );
}

// ── Day detail ───────────────────────────────────────────────
function DayDetail({ i, onBack, go }) {
  const d = TRIP.days[i];
  return (
    <div style={{ height: '100%', overflowY: 'auto', background: GL.bg, WebkitOverflowScrolling: 'touch' }}>
      {/* hero */}
      <div style={{ position: 'relative', height: 240 }}>
        <Ph hue={d.hue} h={240} src={d.img} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(11,12,15,0.4) 0%, rgba(11,12,15,0.1) 30%, rgba(11,12,15,0.97) 100%)' }} />
        <button onClick={onBack} style={{ position: 'absolute', top: 16, left: 16, width: 40, height: 40, borderRadius: 12, cursor: 'pointer',
          background: 'rgba(11,12,15,0.55)', border: `1px solid ${GL.line}`, backdropFilter: 'blur(12px)',
          display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0 }}>
          <svg width="11" height="18" viewBox="0 0 11 18" fill="none"><path d="M9 1L2 9l7 8" stroke={GL.text} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/></svg>
        </button>
        <div style={{ position: 'absolute', bottom: 16, left: 20, right: 20, display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
          <div>
            <span style={{ fontFamily: GL.mono, fontSize: 11, letterSpacing: 1.5, color: GL.glacier }}>{d.dayName.toUpperCase()} · {d.date.toUpperCase()}</span>
            <div style={{ fontFamily: GL.display, fontSize: 40, lineHeight: 0.9, textTransform: 'uppercase', color: GL.text, marginTop: 5 }}>{d.title}</div>
          </div>
          <div style={{ fontFamily: GL.display, fontSize: 50, lineHeight: 0.8, color: 'rgba(255,255,255,0.18)' }}>{d.n}</div>
        </div>
      </div>

      <div style={{ padding: '18px 18px 50px' }}>
        <p style={{ fontFamily: GL.body, fontSize: 14.5, lineHeight: 1.5, color: GL.mut, margin: '0 0 18px' }}>{d.lede}</p>

        {/* KICK highlight */}
        {d.kick && (
          <div style={{ position: 'relative', borderRadius: 16, overflow: 'hidden', marginBottom: 20, border: `1px solid ${GL.glacierDim}` }}>
            <Ph hue={d.hue} h={120} src={d.kick.photo} />
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(0deg, rgba(8,9,12,0.92), rgba(8,9,12,0.2))' }} />
            <div style={{ position: 'absolute', left: 16, bottom: 14, right: 16 }}>
              <KickBadge />
              <div style={{ fontFamily: GL.display, fontSize: 23, textTransform: 'uppercase', color: GL.text, lineHeight: 1, marginTop: 8 }}>{d.kick.name}</div>
            </div>
          </div>
        )}

        {/* schedule */}
        <div style={{ fontFamily: GL.mono, fontSize: 10, letterSpacing: 1.5, color: GL.faint, marginBottom: 12 }}>PROGRAMMA</div>
        <div>
          {d.schedule.map((s, j) => (
            <div key={j} style={{ display: 'flex', gap: 14, position: 'relative' }}>
              <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', width: 48, flexShrink: 0 }}>
                <span style={{ fontFamily: GL.mono, fontSize: 12, fontWeight: 700, color: s.kick ? GL.glacier : GL.text, paddingTop: 1 }}>{s.time}</span>
                <span style={{ width: s.kick ? 10 : 7, height: s.kick ? 10 : 7, borderRadius: '50%', marginTop: 8,
                  background: s.kick ? GL.glacier : 'rgba(255,255,255,0.35)', boxShadow: s.kick ? `0 0 0 4px ${GL.glacierDim}` : 'none', flexShrink: 0 }} />
                {j < d.schedule.length - 1 && <span style={{ flex: 1, width: 1.5, background: GL.line, marginTop: 4 }} />}
              </div>
              <div style={{ flex: 1, paddingBottom: 22 }}>
                {s.kick && <div style={{ marginBottom: 5 }}><KickBadge small /></div>}
                <div style={{ fontFamily: GL.body, fontWeight: 600, fontSize: 15, color: GL.text, lineHeight: 1.3 }}>{s.text}</div>
                {s.note && <div style={{ fontFamily: GL.body, fontSize: 13, color: GL.mut, marginTop: 5, lineHeight: 1.45 }}>{s.note}</div>}
                {s.map && <div style={{ marginTop: 7 }}><PinLink href={s.map} kind="map">Kaart</PinLink></div>}
              </div>
            </div>
          ))}
        </div>

        {/* route */}
        <div style={{ marginTop: 8, marginBottom: 18 }}>
          <MapsButton url={d.route.url} label={d.route.label} />
        </div>

        {/* base */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 11, padding: '13px 15px', borderRadius: 13, background: GL.surface, border: `1px solid ${GL.line}` }}>
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none"><path d="M4 11l8-6 8 6v9H4v-9z" stroke={GL.glacier} strokeWidth="1.8" strokeLinejoin="round"/><path d="M9 20v-5h6v5" stroke={GL.glacier} strokeWidth="1.8" strokeLinejoin="round"/></svg>
          <div>
            <div style={{ fontFamily: GL.mono, fontSize: 9.5, letterSpacing: 1, color: GL.faint }}>OVERNACHTEN</div>
            <div style={{ fontFamily: GL.body, fontWeight: 600, fontSize: 14.5, color: GL.text, marginTop: 2 }}>{d.base}</div>
          </div>
        </div>

        {/* aside (Inside the Volcano) */}
        {d.aside && (
          <div style={{ marginTop: 18, borderRadius: 16, border: `1px solid ${GL.line}`, overflow: 'hidden', background: GL.surface }}>
            <div style={{ padding: '15px 16px 12px' }}>
              <div style={{ fontFamily: GL.display, fontSize: 19, textTransform: 'uppercase', color: GL.text }}>{d.aside.title}</div>
              <p style={{ fontFamily: GL.body, fontSize: 13, color: GL.mut, lineHeight: 1.5, margin: '7px 0 0' }}>{d.aside.body}</p>
            </div>
            <div style={{ display: 'flex', borderTop: `1px solid ${GL.line}` }}>
              <div style={{ flex: 1, padding: '12px 14px', borderRight: `1px solid ${GL.line}` }}>
                <div style={{ fontFamily: GL.mono, fontSize: 9.5, letterSpacing: 1, color: GL.glacier, marginBottom: 7 }}>+ VOORDELEN</div>
                {d.aside.pros.map((p, k) => <div key={k} style={{ fontFamily: GL.body, fontSize: 12, color: GL.mut, lineHeight: 1.35, marginBottom: 6 }}>{p}</div>)}
              </div>
              <div style={{ flex: 1, padding: '12px 14px' }}>
                <div style={{ fontFamily: GL.mono, fontSize: 9.5, letterSpacing: 1, color: GL.warn, marginBottom: 7 }}>− NADELEN</div>
                {d.aside.cons.map((p, k) => <div key={k} style={{ fontFamily: GL.body, fontSize: 12, color: GL.mut, lineHeight: 1.35, marginBottom: 6 }}>{p}</div>)}
              </div>
            </div>
            <div style={{ padding: '12px 16px', borderTop: `1px solid ${GL.line}`, background: GL.glacierDim }}>
              <span style={{ fontFamily: GL.mono, fontSize: 9.5, letterSpacing: 1, color: GL.glacier }}>ADVIES — </span>
              <span style={{ fontFamily: GL.body, fontSize: 12.5, color: GL.text, lineHeight: 1.45 }}>{d.aside.advice}</span>
            </div>
          </div>
        )}

        {/* prev / next */}
        <div style={{ display: 'flex', gap: 10, marginTop: 22 }}>
          {i > 0 ? (
            <button onClick={() => go({ screen: 'day', i: i - 1 })} style={navBtn('left')}>
              <span style={{ fontFamily: GL.mono, fontSize: 9, letterSpacing: 1, color: GL.faint }}>← DAG {TRIP.days[i - 1].n}</span>
              <span style={{ fontFamily: GL.body, fontWeight: 600, fontSize: 13, color: GL.text }}>{TRIP.days[i - 1].title}</span>
            </button>
          ) : <div style={{ flex: 1 }} />}
          {i < TRIP.days.length - 1 ? (
            <button onClick={() => go({ screen: 'day', i: i + 1 })} style={{ ...navBtn('right'), textAlign: 'right' }}>
              <span style={{ fontFamily: GL.mono, fontSize: 9, letterSpacing: 1, color: GL.faint }}>DAG {TRIP.days[i + 1].n} →</span>
              <span style={{ fontFamily: GL.body, fontWeight: 600, fontSize: 13, color: GL.text }}>{TRIP.days[i + 1].title}</span>
            </button>
          ) : <div style={{ flex: 1 }} />}
        </div>
      </div>
    </div>
  );
}
function navBtn(side) {
  return { flex: 1, display: 'flex', flexDirection: 'column', gap: 3, cursor: 'pointer',
    alignItems: side === 'right' ? 'flex-end' : 'flex-start',
    padding: '13px 15px', borderRadius: 13, background: GL.surface, border: `1px solid ${GL.line}` };
}

// ── App shell with nav stack ─────────────────────────────────
const PANELS = { routes: 'RoutesPanel', slaap: 'SlaapPanel', paklijst: 'PaklijstPanel',
  boekingen: 'BoekingenPanel', praktisch: 'PraktischPanel', budget: 'BudgetPanel' };

function App({ onSignOut }) {
  const [stack, setStack] = useS([{ screen: 'home' }]);
  const go = v => setStack(s => [...s, v]);
  const back = () => setStack(s => s.length > 1 ? s.slice(0, -1) : s);
  // reset to home then push (used by map → day so back from day returns to map is preserved; here we keep stack)

  const renderLayer = (v, idx) => {
    if (v.screen === 'day') return <DayDetail i={v.i} onBack={back} go={go} />;
    if (v.screen === 'map') return <FullMapScreen onClose={back} onOpenDay={(di) => go({ screen: 'day', i: di })} />;
    const Comp = window[PANELS[v.screen]];
    return Comp ? <Comp onBack={back} /> : null;
  };

  return (
    <div className="app">
      <div style={{ height: '100%', display: stack.length > 1 ? 'none' : 'block' }}>
        <Home go={go} onSignOut={onSignOut} />
      </div>
      {stack.slice(1).map((v, idx) => {
        const isTop = idx + 1 === stack.length - 1;
        return (
          <div key={idx + '-' + v.screen + (v.i ?? '')} className="layer"
            style={{ display: isTop ? 'block' : 'none', animation: isTop ? 'slideIn .28s cubic-bezier(.2,.8,.2,1)' : 'none' }}>
            {renderLayer(v, idx)}
          </div>
        );
      })}
    </div>
  );
}
window.App = App;
// Rendering is handled by the auth gate in iceland-auth.jsx (after Google login + data load).