/* app.jsx — shell: header nav, footer, hash router, tweaks context */
const FFCtx = React.createContext(null);
const useFF = () => React.useContext(FFCtx);

const NAV = [
  { key:'home',       label:'Home' },
  { key:'calendar',   label:'Events' },
  { key:'foodtrucks', label:'Food Trucks' },
  { key:'farmstands', label:'Farm Stands' },
  { key:'garage',     label:'Garage Sales', href:'/garagesales.html' },
];

const ACCENTS = {
  rust:   { accent:'#c4612e', deep:'#a44d22', soft:'#e2a273' },
  olive:  { accent:'#41431b', deep:'#2e3012', soft:'#aeb784' },
  river:  { accent:'#2f6f7e', deep:'#235460', soft:'#7eb0b8' },
  amber:  { accent:'#cf9521', deep:'#a9781a', soft:'#e8c879' },
};

function Logo({ onClick }) {
  return (
    <button onClick={onClick} style={{ display:'flex', alignItems:'center', gap:11, background:'none', border:'none', padding:0 }}>
      <span style={{ width:40, height:40, borderRadius:12, background:'var(--spruce)', display:'grid', placeItems:'center',
        boxShadow:'0 2px 0 var(--spruce-deep)' }}>
        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="var(--paper)" strokeWidth="1.9" strokeLinecap="round" strokeLinejoin="round">
          <path d="M5 20c1-7 4-11 7-11M19 20c-1-5-3-8-5-9"/><path d="M12 9c0-3 2-5 2-5M12 4.5C12 3 10.5 2 9 2"/>
          <circle cx="12" cy="13.5" r="1.4" fill="var(--accent)" stroke="none"/>
        </svg>
      </span>
      <span style={{ fontFamily:'var(--display)', fontWeight:800, fontSize:22, letterSpacing:'-.02em', lineHeight:1 }}>
        Fraser<span style={{ color:'var(--accent)' }}>Finds</span>
        <span style={{ display:'block', fontFamily:'var(--body)', fontWeight:600, fontSize:10.5, letterSpacing:'.16em',
          textTransform:'uppercase', color:'var(--ink-faint)', marginTop:2 }}>Prince George, BC</span>
      </span>
    </button>
  );
}

function Header() {
  const { route, go } = useFF();
  const [open, setOpen] = React.useState(false);
  return (
    <header style={{ position:'sticky', top:0, zIndex:200, background:'rgba(248,243,225,.88)',
      backdropFilter:'blur(10px)', borderBottom:'1.5px solid var(--line)' }}>
      <div className="page-wrap" style={{ display:'flex', alignItems:'center', justifyContent:'space-between', height:74, gap:20 }}>
        <Logo onClick={()=>go('home')} />
        <nav className="ff-nav" style={{ display:'flex', alignItems:'center', gap:4 }}>
          {NAV.filter(n=>n.key!=='home').map(n=>{
            const active = route===n.key;
            if (n.href) {
              return (
                <a key={n.key} href={n.href}
                  style={{ background:'none', border:'none', padding:'8px 13px', borderRadius:9, display:'block',
                    fontFamily:'var(--body)', fontWeight:600, fontSize:14.5, color:'var(--ink-soft)', textDecoration:'none' }}>
                  {n.label}
                </a>
              );
            }
            return (
              <button key={n.key} onClick={()=>go(n.key)}
                style={{ background: active?'var(--paper-3)':'none', border:'none', padding:'8px 13px', borderRadius:9,
                  fontFamily:'var(--body)', fontWeight:600, fontSize:14.5, color: active?'var(--ink)':'var(--ink-soft)' }}>
                {n.label}
              </button>
            );
          })}
        </nav>
        <div style={{ display:'flex', alignItems:'center', gap:10 }}>
          <button className="btn btn-primary ff-cta" onClick={()=>go('submit')}>
            <IconPlus size={17}/> <span>Add a listing</span>
          </button>
          <button className="ff-burger" onClick={()=>setOpen(o=>!o)} aria-label="Menu"
            style={{ display:'none', width:42, height:42, borderRadius:10, border:'1.5px solid var(--line)', background:'#fffdf6' }}>
            {open ? <IconClose size={20}/> : <IconMenu size={20}/>}
          </button>
        </div>
      </div>
      {open &&
        <div className="page-wrap" style={{ paddingBottom:14, display:'flex', flexWrap:'wrap', gap:8 }}>
          {NAV.filter(n=>n.key!=='home').map(n=>(
            n.href
              ? <a key={n.key} href={n.href} className="chip" style={{ fontSize:14, padding:'8px 14px' }}>{n.label}</a>
              : <button key={n.key} onClick={()=>{go(n.key);setOpen(false);}} className="chip"
                  style={{ fontSize:14, padding:'8px 14px' }}>{n.label}</button>
          ))}
        </div>}
    </header>
  );
}

function Footer() {
  const { go } = useFF();
  return (
    <footer className="contour-bg" style={{ marginTop:80, color:'var(--paper)', padding:'52px 0 38px' }}>
      <div className="page-wrap" style={{ display:'grid', gridTemplateColumns:'1.4fr 1fr 1fr', gap:36 }}>
        <div>
          <div style={{ fontFamily:'var(--display)', fontWeight:800, fontSize:24 }}>Fraser<span style={{color:'var(--accent-soft)'}}>Finds</span>.ca</div>
          <p style={{ color:'rgba(248,243,225,.72)', maxWidth:320, marginTop:10, fontSize:15 }}>
            A neighbourly guide to Prince George — made by locals, for locals. Got something to add? We'd love to hear it.
          </p>
          <button className="btn" onClick={()=>go('submit')} style={{ marginTop:8, background:'var(--accent)', color:'#fff8ee' }}>
            <IconPlus size={16}/> Add a listing
          </button>
        </div>
        <div>
          <div style={{ fontFamily:'var(--body)', fontWeight:700, fontSize:12, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--accent-soft)', marginBottom:12 }}>Explore</div>
          {NAV.map(n=>(
            <div key={n.key} style={{ marginBottom:8 }}>
              {n.href
                ? <a href={n.href} style={{ color:'rgba(248,243,225,.82)', fontSize:15 }}>{n.label}</a>
                : <button onClick={()=>go(n.key)} style={{ background:'none', border:'none', color:'rgba(248,243,225,.82)', padding:0, fontSize:15 }}>{n.label}</button>}
            </div>
          ))}
        </div>
        <div>
          <div style={{ fontFamily:'var(--body)', fontWeight:700, fontSize:12, letterSpacing:'.16em', textTransform:'uppercase', color:'var(--accent-soft)', marginBottom:12 }}>The fine print</div>
          <p style={{ color:'rgba(248,243,225,.62)', fontSize:13.5, lineHeight:1.6 }}>
            A community project, not an official City of Prince George service. Listings are submitted by residents and may not be verified.
            © 2026 FraserFinds.ca
          </p>
          <a href="mailto:admin@fraserfinds.ca"
            style={{ display:'inline-block', marginTop:10, color:'rgba(248,243,225,.72)', fontSize:13.5, textDecoration:'none',
              borderBottom:'1px solid rgba(248,243,225,.3)' }}>
            admin@fraserfinds.ca
          </a>
        </div>
      </div>
    </footer>
  );
}

/* ---- Tweaks ---- */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "rust",
  "homeLayout": "almanac",
  "mapStyle": "illustrated"
}/*EDITMODE-END*/;

function FFTweaks() {
  const { t, setTweak } = useFF();
  return (
    <TweaksPanel>
      <TweakSection label="Theme" />
      <TweakColor label="Accent colour" value={ACCENTS[t.accent]?.accent}
        options={[ACCENTS.rust.accent, ACCENTS.olive.accent, ACCENTS.river.accent, ACCENTS.amber.accent]}
        onChange={(v)=>{ const k = Object.keys(ACCENTS).find(k=>ACCENTS[k].accent===v); setTweak('accent', k||'rust'); }} />
      <TweakSection label="Home page" />
      <TweakRadio label="Layout" value={t.homeLayout} options={['almanac','hero']}
        onChange={(v)=>setTweak('homeLayout', v)} />
    </TweaksPanel>
  );
}

/* ---- Router ---- */
const ROUTES = {
  home:       () => <window.Pages.Home/>,
  calendar:   () => <window.Pages.Calendar/>,
  foodtrucks: () => <window.Pages.FoodTrucks/>,
  farmstands: () => <window.Pages.FarmStands/>,
  submit:     () => <window.Pages.Submit/>,
};

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = React.useState(() => (location.hash.replace('#','') || 'home'));

  React.useEffect(() => {
    const h = () => setRoute(location.hash.replace('#','') || 'home');
    window.addEventListener('hashchange', h);
    return () => window.removeEventListener('hashchange', h);
  }, []);

  const go = (r) => {
    location.hash = r;
    window.scrollTo({ top:0, behavior: 'instant' in window ? 'instant' : 'auto' });
  };

  React.useEffect(() => {
    const a = ACCENTS[t.accent] || ACCENTS.rust;
    const root = document.documentElement;
    root.style.setProperty('--accent', a.accent);
    root.style.setProperty('--accent-deep', a.deep);
    root.style.setProperty('--accent-soft', a.soft);
  }, [t.accent]);

  const accent = (ACCENTS[t.accent] || ACCENTS.rust).accent;
  const ctx = { t, setTweak, route, go, accent };
  const View = ROUTES[route] || ROUTES.home;

  return (
    <FFCtx.Provider value={ctx}>
      <div className="ff-map-bg" style={{ opacity: 0.07 }}><MapArt /></div>
      <Header/>
      <main key={route} className="rise"><View/></main>
      <Footer/>
      <FFTweaks/>
    </FFCtx.Provider>
  );
}

Object.assign(window, { FFCtx, useFF, ACCENTS });
ReactDOM.createRoot(document.getElementById('root')).render(<App/>);