// sections.jsx — the page, in cut-paper folk style.

const NAV_LINKS = [
  ['Discover', 'Discover.html'],
  ['Categories', 'Categories.html'],
  ['For organizers', 'Organizers.html'],
  ['Who we are', 'WhoWeAre.html'],
];
function Nav({ active }) {
  const [user, setUser] = React.useState(null);
  React.useEffect(() => { whoami().then(setUser); }, []);
  return (
    <nav style={{ position: 'sticky', top: 0, zIndex: 50, background: PAL.paper + 'ee', backdropFilter: 'blur(8px)', borderBottom: `1px solid ${PAL.line}` }}>
      <div style={{ maxWidth: 1200, margin: '0 auto', padding: '14px 30px', display: 'flex', alignItems: 'center', gap: 28 }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
          <LogoOrb size={34} />
          <span style={{ font: '700 24px/1 var(--display)', color: PAL.ink, letterSpacing: '-0.02em' }}>orange<span style={{ color: PAL.orange }}>.</span></span>
        </a>
        <div className="nav-links" style={{ display: 'flex', gap: 24, marginLeft: 14 }}>
          {NAV_LINKS.map(([l, href]) => {
            const on = active === l;
            return <a key={l} href={href} style={{ font: '600 14.5px/1 var(--body)', color: on ? PAL.orange : PAL.ink, textDecoration: 'none', opacity: on ? 1 : 0.8 }}>{l}</a>;
          })}
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 14 }}>
          {user ? (
            <React.Fragment>
              <a href="Profile.html" title="Your profile" style={{ display: 'inline-flex', alignItems: 'center', gap: 8, font: '700 14px/1 var(--body)', color: PAL.ink, textDecoration: 'none' }}>
                <span style={{ width: 26, height: 26, borderRadius: 99, background: user.role === 'organizer' ? PAL.sage : PAL.orange, color: '#fff', display: 'grid', placeItems: 'center', font: '700 12px/1 var(--mono)' }}>{user.name[0].toUpperCase()}</span>
                Hi, {user.name.split(' ')[0]}
              </a>
              {user.role === 'organizer' && (
                <a href="Organizers.html#post" style={{ textDecoration: 'none' }}><Btn kind="solid" size="sm" icon="plus">Post</Btn></a>
              )}
              <Btn kind="paper" size="sm" onClick={() => logoutUser()}>Log out</Btn>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <a href="Login.html" style={{ font: '700 14.5px/1 var(--body)', color: PAL.ink, textDecoration: 'none' }}>Log in</a>
              <a href="Join.html" style={{ textDecoration: 'none' }}><Btn kind="solid" size="sm">Join in</Btn></a>
            </React.Fragment>
          )}
        </div>
      </div>
    </nav>
  );
}

function Hero() {
  const [q, setQ] = React.useState('');
  const go = () => { location.href = 'Discover.html' + (q.trim() ? '?q=' + encodeURIComponent(q.trim()) : ''); };
  return (
    <header style={{ position: 'relative', overflow: 'hidden' }}>
      <div style={{ position: 'absolute', top: -120, right: -120, opacity: 0.85, pointerEvents: 'none' }}>
        <Sunburst r={380} fill={tint(PAL.sun, 0.4)} rays={20} />
      </div>
      <div className="g-hero" style={{ position: 'relative', maxWidth: 1200, margin: '0 auto', padding: '60px 30px 56px',
        display: 'grid', gridTemplateColumns: '1.04fr 0.96fr', gap: 44, alignItems: 'center' }}>
        {/* copy */}
        <div>
          <Reveal>
            <Label>Show up · pitch in</Label>
            <h1 style={{ font: '700 clamp(42px,5.6vw,76px)/0.98 var(--display)', color: PAL.ink, letterSpacing: '-0.03em', margin: '14px 0 0' }}>
              Where good work finds<br />{' '}its <span style={{ color: PAL.orange }}>people.</span>
            </h1>
          </Reveal>
          <Reveal d={110}>
            <p style={{ font: '400 19px/1.5 var(--body)', color: tint(PAL.ink, 0.78), margin: '22px 0 0', maxWidth: 440, textWrap: 'pretty' }}>
              Find one-time gigs, day work, and volunteering near you.
            </p>
          </Reveal>
          <Reveal d={190}>
            <div className="hero-search" style={{ marginTop: 28, display: 'flex', alignItems: 'center', gap: 8, background: PAL.card, border: `1px solid ${PAL.line}`, borderRadius: 999, padding: 7, maxWidth: 520, boxShadow: `0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 20px -10px rgba(42,33,26,0.28)` }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, flex: 1.4, padding: '8px 14px' }}>
                <Icon name="search" size={19} c={PAL.orange} />
                <input value={q} onChange={(e) => setQ(e.target.value)} onKeyDown={(e) => e.key === 'Enter' && go()}
                  placeholder="Festival crew, food bank…" aria-label="Search opportunities"
                  style={{ flex: 1, minWidth: 0, border: 'none', outline: 'none', background: 'transparent', font: '500 15px/1 var(--body)', color: PAL.ink }} />
              </div>
              <div style={{ width: 2, height: 24, background: tint(PAL.ink, 0.15) }} />
              <div style={{ display: 'flex', alignItems: 'center', gap: 9, flex: 1, padding: '8px 14px' }}>
                <Icon name="pin" size={18} c={PAL.orange} /><span style={{ font: '500 15px/1 var(--body)', color: tint(PAL.ink, 0.5) }}>Near you</span>
              </div>
              <Btn kind="solid" icon="arrow" onClick={go}>Search</Btn>
            </div>
          </Reveal>
          <Reveal d={260}>
            <div style={{ display: 'flex', gap: 18, marginTop: 16, flexWrap: 'wrap' }}>
              {['Always free to join', 'No résumé needed', 'Verified organizers'].map((t) => (
                <span key={t} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, font: '600 13px/1 var(--body)', color: tint(PAL.ink, 0.62) }}>
                  <Icon name="check" size={15} c={PAL.sage} sw={2.6} /> {t}
                </span>
              ))}
            </div>
          </Reveal>
        </div>

        {/* real-photo collage — each picture in a clean matted box frame */}
        <Reveal variant="right" d={120}>
          <div className="paper-bob" style={{ position: 'relative', height: 460 }}>
            <div style={{ position: 'absolute', top: 0, left: 0, width: '64%', background: '#fff', padding: 9, border: `1px solid ${PAL.line}`, borderRadius: 14, boxShadow: '0 16px 36px rgba(42,33,26,0.13)' }}>
              <div style={{ position: 'relative', height: 282, borderRadius: 6, overflow: 'hidden', background: tint(PAL.orange, 0.16), boxShadow: 'inset 0 0 0 1px rgba(42,33,26,0.08)' }}>
                <image-slot id="hero-main" shape="rect" fit="cover" src="assets/hero-festival.jpg" placeholder="Drop a festival / crowd photo"
                  style={{ display: 'block', width: '100%', height: '100%' }}></image-slot>
                <span style={{ position: 'absolute', left: 12, top: 12, font: '700 11px/1 var(--mono)', letterSpacing: '0.06em', color: '#fff', background: PAL.ink, padding: '6px 10px', borderRadius: 999, pointerEvents: 'none' }}>FESTIVAL CREW</span>
              </div>
            </div>
            <div style={{ position: 'absolute', right: 0, top: 92, width: '46%', background: '#fff', padding: 9, border: `1px solid ${PAL.line}`, borderRadius: 14, boxShadow: '0 16px 36px rgba(42,33,26,0.13)' }}>
              <div style={{ position: 'relative', height: 178, borderRadius: 6, overflow: 'hidden', background: tint(PAL.sage, 0.18), boxShadow: 'inset 0 0 0 1px rgba(42,33,26,0.08)' }}>
                <image-slot id="hero-2" shape="rect" fit="cover" src="assets/hero-volunteer.jpg" placeholder="Drop a volunteers photo"
                  style={{ display: 'block', width: '100%', height: '100%' }}></image-slot>
              </div>
            </div>
            <div style={{ position: 'absolute', left: '14%', bottom: 0, width: '52%', background: '#fff', padding: 9, border: `1px solid ${PAL.line}`, borderRadius: 14, boxShadow: '0 16px 36px rgba(42,33,26,0.13)' }}>
              <div style={{ position: 'relative', height: 166, borderRadius: 6, overflow: 'hidden', background: tint(PAL.blue, 0.16), boxShadow: 'inset 0 0 0 1px rgba(42,33,26,0.08)' }}>
                <image-slot id="hero-3" shape="rect" fit="cover" src="assets/hero-hospitality.jpg" placeholder="Drop a hospitality / day-work photo"
                  style={{ display: 'block', width: '100%', height: '100%' }}></image-slot>
              </div>
            </div>
          </div>
        </Reveal>
      </div>
    </header>
  );
}

function Stats() {
  // marketing defaults; replaced by live database counts when the API is up
  const [s, setS] = React.useState([['12,000+', 'helpers signed up'], ['3,400', 'opportunities filled'], ['850', 'verified organizers'], ['94', 'towns & cities']]);
  React.useEffect(() => {
    api.get('/api/stats').then((d) => setS([
      [d.helpers.toLocaleString(), d.helpers === 1 ? 'helper signed up' : 'helpers signed up'],
      [d.filled.toLocaleString(), d.filled === 1 ? 'spot claimed' : 'spots claimed'],
      [d.organizers.toLocaleString(), d.organizers === 1 ? 'organizer on board' : 'organizers on board'],
      [d.towns.toLocaleString(), 'places to pitch in'],
    ])).catch(() => {});
  }, []);
  return (
    <section style={{ maxWidth: 1200, margin: '0 auto', padding: '44px 30px 0' }}>
      <Reveal variant="zoom">
        <div className="g-stats" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', background: PAL.ink, border: `1px solid ${PAL.line}`, borderRadius: 18, overflow: 'hidden', boxShadow: `0 8px 24px rgba(238,90,36,0.16)` }}>
          {s.map(([n, l], i) => (
            <div key={i} style={{ padding: '22px 24px', borderLeft: i ? `2px solid ${tint(PAL.card, 0.14)}` : 'none' }}>
              <div style={{ font: '700 32px/1 var(--display)', color: PAL.sun }}>{n}</div>
              <div style={{ font: '500 13px/1.3 var(--body)', color: tint(PAL.card, 0.7), marginTop: 6 }}>{l}</div>
            </div>
          ))}
        </div>
      </Reveal>
    </section>
  );
}

function Categories() {
  const cats = [
    { key: 'festival', blurb: 'Event staff, setup, ushers, guest help.' },
    { key: 'volunteer', blurb: 'Cleanups, food banks, charity drives.' },
    { key: 'gig', blurb: 'Moving, warehouse, delivery, day jobs.' },
    { key: 'hospitality', blurb: 'Catering, bartending, servers, promo.' },
  ];
  // live per-category open counts from the database
  const [counts, setCounts] = React.useState(null);
  React.useEffect(() => {
    api.get('/api/categories').then((d) => setCounts(d.categories)).catch(() => {});
  }, []);
  const nFor = (k) => (counts ? `${counts[k]} open` : '…');
  return (
    <section id="categories" style={{ maxWidth: 1200, margin: '0 auto', padding: '76px 30px 10px' }}>
      <Reveal><Label>Find your lane</Label>
        <h2 style={{ font: '700 40px/1.04 var(--display)', color: PAL.ink, margin: '12px 0 30px', letterSpacing: '-0.02em' }}>Four ways to jump in</h2>
      </Reveal>
      <div className="g-cats" style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 18 }}>
        {cats.map((c, i) => {
          const meta = CAT[c.key];
          return (
            <Reveal key={c.key} variant="pop" d={i * 110}>
              <a href={`Categories.html#${c.key}`} className="pcard" style={{ display: 'flex', flexDirection: 'column', height: '100%', textDecoration: 'none',
                background: PAL.card, border: `1px solid ${PAL.line}`, borderRadius: 18, overflow: 'hidden', boxShadow: `0 1px 0 rgba(255,255,255,0.7) inset, 0 8px 20px -10px rgba(42,33,26,0.28)` }}>
                <div style={{ position: 'relative', height: 118, background: tint(meta.color, 0.18), borderBottom: `1px solid ${PAL.line}`, overflow: 'hidden' }}>
                  <image-slot id={`home-cat-${c.key}`} shape="rect" fit="cover" src={meta.hero}
                    placeholder={`Drop a ${meta.label.split(' ')[0].toLowerCase()} photo`}
                    style={{ display: 'block', position: 'absolute', inset: 0, width: '100%', height: '100%' }}></image-slot>
                  <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(42,33,26,0) 45%, rgba(42,33,26,0.42))', pointerEvents: 'none' }} />
                  <span style={{ position: 'absolute', left: 12, bottom: 12, width: 44, height: 44, borderRadius: 12, background: meta.color, border: '1.5px solid #fff', display: 'grid', placeItems: 'center', boxShadow: '0 3px 8px rgba(42,33,26,0.35)' }}>
                    <Icon name={meta.icon} size={23} c="#fff" sw={2.2} />
                  </span>
                </div>
                <div style={{ padding: 18, display: 'flex', flexDirection: 'column', flex: 1 }}>
                  <h3 style={{ font: '700 18px/1.15 var(--display)', color: PAL.ink, margin: 0 }}>{meta.label}</h3>
                  <p style={{ font: '400 13.5px/1.5 var(--body)', color: tint(PAL.ink, 0.62), margin: '8px 0 16px', textWrap: 'pretty' }}>{c.blurb}</p>
                  <div style={{ marginTop: 'auto', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
                    <span style={{ font: '700 12px/1 var(--mono)', color: meta.color }}>{nFor(c.key)}</span>
                    <Icon name="arrow" size={18} c={PAL.ink} sw={2.4} />
                  </div>
                </div>
              </a>
            </Reveal>
          );
        })}
      </div>
    </section>
  );
}

Object.assign(window, { Nav, Hero, Stats, Categories });