/* ZFREE Subpages — Fun, Business, Games, Tech News, Weather, Shopping, Kids, Events */

function SubpageFun() {
  return (
    <div>
      <div className="content-box">
        <div className="content-box-title">🎉 Fun!</div>
        <p style={{fontSize:12, marginBottom:8}}>Jokes, quizzes, horoscopes and more — all for FREE on ZFREE!</p>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:8}}>
          {[
            {t:'Joke of the Day', e:'😂', c:"Why don't scientists trust atoms? Because they make up everything!"},
            {t:'Daily Horoscope', e:'⭐', c:'Aries: A surprise awaits. Taurus: Good news coming. Gemini: Stay positive!'},
            {t:'Brain Teaser',    e:'🧠', c:'I have cities but no houses, mountains but no trees. What am I? A MAP!'},
            {t:'Fun Poll',        e:'📊', c:'Favourite NZ fast food? ○ Maccas ○ KFC ○ Burger King ○ Fish & Chips'},
          ].map((item,i) => (
            <div key={i} style={{background:'#c8e020', border:'1px solid #9dc009', padding:8, boxShadow:'2px 2px 0 rgba(0,0,0,0.15)'}}>
              <div style={{fontWeight:'bold', color:'#cc1111', fontSize:12, marginBottom:4}}>{item.e} {item.t}</div>
              <div style={{fontSize:11, lineHeight:1.5}}>{item.c}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="content-box">
        <div className="content-box-title">🕹️ Online Games — Free!</div>
        <div style={{display:'flex', flexDirection:'column', gap:4}}>
          {[
            {n:'Noughts & Crosses', id:'noughts'},
            {n:'Snake',             id:'snake'},
            {n:'Minesweeper',       id:null},
            {n:'Hangman',           id:'hangman'},
            {n:'Trivia Quiz — NZ Edition', id:null},
            {n:'Word Search',       id:null},
          ].map(g => (
            <div key={g.n} onClick={()=>g.id&&window.dispatchEvent(new CustomEvent('zfree:game', {detail: g.id}))}
              style={{background:'#c8e020', border:'1px solid #9dc009', padding:'4px 8px',
              cursor: g.id ? 'pointer' : 'default', color:'#cc1111', fontSize:12, fontWeight:'bold',
              display:'flex', justifyContent:'space-between', alignItems:'center'}}>
              <span>▶ {g.n}</span>
              {!g.id && <span style={{fontSize:10, color:'#888', fontWeight:'normal'}}>coming soon</span>}
            </div>
          ))}
        </div>
      </div>
      <div className="content-box">
        <div className="content-box-title">😂 More Jokes</div>
        {[
          {q:"Why did the scarecrow win an award?",    a:"He was outstanding in his field!"},
          {q:"What do you call a fish without eyes?",  a:"A fsh!"},
          {q:"Why did the computer go to the doctor?",  a:"Because it had a virus!"},
        ].map((j,i) => (
          <div key={i} style={{marginBottom:8, paddingBottom:8, borderBottom: i<2 ? '1px solid #c8e020' : 'none'}}>
            <div style={{fontSize:12, fontWeight:'bold'}}>{j.q}</div>
            <div style={{fontSize:12, color:'#cc1111', fontStyle:'italic', marginTop:2}}>{j.a}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function SubpageBusiness() {
  return (
    <div>
      <div className="content-box">
        <div className="content-box-title">💼 Business</div>
        <p style={{fontSize:12, marginBottom:8}}>NZ business news, company listings, and tools for Kiwi businesses.</p>
        <div style={{background:'#eeff44', border:'1px solid #9dc009', padding:6}}>
          <span className="new-badge">NEW!</span>&nbsp;
          <strong>ZFREE Business Directory</strong> — List your NZ business for free!&nbsp;
          <span className="ft-link">Register now →</span>
        </div>
      </div>
      <div className="content-box">
        <div className="content-box-title">📈 NZ Business News</div>
        {[
          {h:'NZX closes up 1.2% on strong dairy exports',       d:'7 Feb 2001', t:'The NZ stock exchange closed higher, led by gains in dairy and tourism sectors.'},
          {h:'Telecom NZ announces new broadband trials',        d:'6 Feb 2001', t:'Telecom NZ will begin ADSL broadband trials in Auckland and Wellington later this year.'},
          {h:'Air NZ reports record summer passenger numbers',   d:'5 Feb 2001', t:'Air New Zealand carried over 1.2 million passengers in January — a new monthly record.'},
        ].map((item,i) => (
          <div key={i} style={{marginBottom:10, paddingBottom:10, borderBottom: i<2 ? '1px solid #c8e020' : 'none'}}>
            <div style={{fontWeight:'bold', color:'#cc1111', fontSize:12, cursor:'pointer'}}>{item.h}</div>
            <div style={{fontSize:10, color:'#555', marginBottom:2}}>{item.d}</div>
            <div style={{fontSize:11, lineHeight:1.4}}>{item.t}</div>
          </div>
        ))}
      </div>
      <div className="content-box">
        <div className="content-box-title">🛠️ Business Tools</div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:6}}>
          {['Currency Converter','GST Calculator','Business Directory','Yellow Pages NZ','Trade Me','NZ Companies Office'].map(t => (
            <div key={t} style={{background:'#c8e020', border:'1px solid #9dc009', padding:'5px 8px',
              fontSize:12, color:'#cc1111', fontWeight:'bold', cursor:'pointer'}}>› {t}</div>
          ))}
        </div>
      </div>
    </div>
  );
}

function SubpageGames() {
  return (
    <div>
      <div className="content-box">
        <div className="content-box-title">🎮 Games</div>
        <p style={{fontSize:12, marginBottom:8}}>The latest gaming news, cheats, reviews and free online games!</p>
      </div>
      <div className="content-box">
        <div className="content-box-title">🕹️ Play Online — Free!</div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:6}}>
          {[
            {n:'Noughts & Crosses', e:'⭕', d:'Classic 3×3 strategy', id:'noughts'},
            {n:'Snake',             e:'🐍', d:'How long can you go?', id:'snake'},
            {n:'Minesweeper',       e:'💣', d:'Clear the minefield',  id:null},
            {n:'Hangman',           e:'🎯', d:'Guess the word',       id:'hangman'},
            {n:'Trivia NZ',         e:'🧠', d:'Test your Kiwi knowledge', id:null},
            {n:'Memory Match',      e:'🃏', d:'Match the pairs',      id:null},
          ].map((g,i) => (
            <div key={i} onClick={()=>g.id&&window.dispatchEvent(new CustomEvent('zfree:game', {detail: g.id}))}
              style={{background:'#c8e020', border:'1px solid #9dc009', padding:8,
              textAlign:'center', cursor: g.id ? 'pointer' : 'default',
              boxShadow:'2px 2px 0 rgba(0,0,0,0.15)', position:'relative'}}>
              <div style={{fontSize:24, marginBottom:3}}>{g.e}</div>
              <div style={{fontWeight:'bold', color:'#cc1111', fontSize:11}}>{g.n}</div>
              <div style={{fontSize:10, color:'#555'}}>{g.d}</div>
              {g.id && <div style={{fontSize:9, color:'#336600', fontWeight:'bold', marginTop:2}}>▶ Play Now!</div>}
              {!g.id && <div style={{fontSize:9, color:'#aaa', marginTop:2}}>Coming soon</div>}
            </div>
          ))}
        </div>
      </div>
      <div className="content-box">
        <div className="content-box-title">📰 Gaming News</div>
        {[
          {h:'PlayStation 2 launches in NZ — sells out in hours', d:'4 Feb 2001', t:"Sony's new console has sold out across NZ, with shops reporting queues around the block."},
          {h:'Half-Life: Counter-Strike goes gold',               d:'3 Feb 2001', t:"Valve's multiplayer mod is now a standalone product, available at NZ game stores now."},
          {h:'Game Boy Advance confirmed for NZ June release',    d:'1 Feb 2001', t:'Nintendo confirmed the handheld successor to the Game Boy Color launches in NZ in June 2001.'},
        ].map((item,i) => (
          <div key={i} style={{marginBottom:8, paddingBottom:8, borderBottom: i<2 ? '1px solid #c8e020' : 'none'}}>
            <div style={{fontWeight:'bold', color:'#cc1111', fontSize:12, cursor:'pointer'}}>{item.h}</div>
            <div style={{fontSize:10, color:'#555', marginBottom:2}}>{item.d}</div>
            <div style={{fontSize:11, lineHeight:1.4}}>{item.t}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function SubpageTechNews() {
  return (
    <div>
      <div className="content-box">
        <div className="content-box-title">🖥️ Tech News</div>
        <p style={{fontSize:12, marginBottom:8}}>The latest in technology, computers, and the internet — for NZ.</p>
      </div>
      <div className="content-box">
        <div className="content-box-title">📡 Top Stories</div>
        {[
          {h:'Microsoft releases Windows XP preview build',   d:'7 Feb 2001', t:'Microsoft gave journalists a preview of Windows XP, expected to ship later this year.'},
          {h:'Apple unveils new PowerMac G4 range',          d:'6 Feb 2001', t:'Apple updated its professional desktop line with faster G4 processors and a titanium PowerBook.'},
          {h:'Broadband coming to NZ suburbs by end of 2001',d:'5 Feb 2001', t:'Telecom NZ plans to bring ADSL broadband to major suburbs in Auckland, Wellington and Christchurch.'},
          {h:'Dot-com bubble: NZ startups cut 200 jobs',     d:'4 Feb 2001', t:'Several NZ internet companies announce layoffs as the global dot-com slowdown hits our shores.'},
        ].map((item,i) => (
          <div key={i} style={{marginBottom:10, paddingBottom:10, borderBottom: i<3 ? '1px solid #c8e020' : 'none'}}>
            <div style={{fontWeight:'bold', color:'#cc1111', fontSize:12, cursor:'pointer'}}>{item.h}</div>
            <div style={{fontSize:10, color:'#555', marginBottom:2}}>{item.d}</div>
            <div style={{fontSize:11, lineHeight:1.4}}>{item.t}</div>
          </div>
        ))}
      </div>
      <div className="content-box">
        <div className="content-box-title">📥 Downloads</div>
        <div style={{display:'flex', flexDirection:'column', gap:4}}>
          {[
            {n:'ZFREE Installer v2.1',  s:'2.4 MB',  d:'Updated 56K installer for Windows 98/ME/XP'},
            {n:'Internet Explorer 5.5', s:'14.8 MB', d:"Microsoft's latest browser — recommended"},
            {n:'Outlook Express 5.5',   s:'8.1 MB',  d:'Free email client from Microsoft'},
            {n:'WinZip 8.0',            s:'1.9 MB',  d:'Open ZIP and compressed files'},
            {n:'RealPlayer 8',          s:'6.3 MB',  d:'Stream audio and video online'},
          ].map((f,i) => (
            <div key={i} onClick={()=>window.dispatchEvent(new CustomEvent('zfree:download', {detail: {filename: f.n, sizeMb: parseFloat(f.s)}}))}
              style={{display:'flex', justifyContent:'space-between', alignItems:'center',
              background:'#c8e020', border:'1px solid #9dc009', padding:'4px 8px', cursor:'pointer'}}>
              <div>
                <span style={{fontWeight:'bold', color:'#cc1111', fontSize:12}}>📥 {f.n}</span>
                <span style={{fontSize:10, color:'#555', marginLeft:6}}>{f.d}</span>
              </div>
              <span style={{fontSize:10, color:'#333', fontWeight:'bold', whiteSpace:'nowrap'}}>{f.s}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

function SubpageWeather() {
  return (
    <div>
      <div className="content-box">
        <div className="content-box-title">🌤️ NZ Weather</div>
        <p style={{fontSize:12, marginBottom:8}}>Current conditions and forecasts for New Zealand cities.</p>
      </div>
      <div className="content-box">
        <div className="content-box-title">🌡️ Today's Forecast — Wednesday 7 February 2001</div>
        <div style={{display:'grid', gridTemplateColumns:'repeat(3,1fr)', gap:8}}>
          {[
            {city:'Auckland',     icon:'⛅', hi:24, lo:17, desc:"Partly cloudy. Chance of showers this afternoon."},
            {city:'Wellington',   icon:'💨', hi:18, lo:13, desc:'Blustery. Strong northerlies easing by evening.'},
            {city:'Christchurch', icon:'☀️', hi:26, lo:12, desc:"Sunny and warm. Light nor'westerly breeze."},
            {city:'Hamilton',     icon:'🌧️', hi:21, lo:15, desc:'Cloudy with morning rain clearing midday.'},
            {city:'Dunedin',      icon:'🌥️', hi:17, lo:9,  desc:'Overcast. Cool southerly change overnight.'},
            {city:'Queenstown',   icon:'⛅', hi:22, lo:8,  desc:'Partly cloudy. Fine spells in the afternoon.'},
          ].map((w,i) => (
            <div key={i} style={{background:'#c8e020', border:'1px solid #9dc009',
              padding:8, textAlign:'center', boxShadow:'2px 2px 0 rgba(0,0,0,0.15)'}}>
              <div style={{fontWeight:'bold', color:'#cc1111', fontSize:12}}>{w.city}</div>
              <div style={{fontSize:26, margin:'4px 0'}}>{w.icon}</div>
              <div style={{fontSize:12}}>
                <span style={{color:'#cc1111', fontWeight:'bold'}}>{w.hi}°</span>
                <span style={{color:'#555'}}> / {w.lo}°C</span>
              </div>
              <div style={{fontSize:10, color:'#333', marginTop:3, lineHeight:1.3}}>{w.desc}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="content-box">
        <div className="content-box-title">🗺️ National Summary</div>
        <p style={{fontSize:12, lineHeight:1.6}}>
          A ridge of high pressure is bringing settled conditions to the South Island and lower North Island today.
          A low pressure system approaching from the northwest may bring rain to the upper North Island by Friday.
          The weekend looks fine for most of the country, with temperatures above average for this time of year.
        </p>
        <p style={{fontSize:11, color:'#555', marginTop:6}}>
          Forecast provided by the NZ Meteorological Service. Updated daily at 6am NZST.
        </p>
      </div>
    </div>
  );
}

function SubpageShopping() {
  return (
    <div>
      <div className="content-box">
        <div className="content-box-title">🛍️ Shopping</div>
        <p style={{fontSize:12, marginBottom:8}}>Shop online with NZ's best retailers — delivered to your door!</p>
        <div style={{background:'#eeff44', border:'1px solid #9dc009', padding:6}}>
          <span className="new-badge">HOT!</span>&nbsp;
          <strong>Trade Me</strong> — NZ's biggest online auction site.&nbsp;
          <span className="ft-link">Visit Trade Me →</span>
        </div>
      </div>
      <div className="content-box">
        <div className="content-box-title">🏪 NZ Online Stores</div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:6}}>
          {[
            {n:'Trade Me',         e:'🔨', d:"NZ's #1 auction & classifieds site"},
            {n:'Farmers Online',   e:'👔', d:'Clothing, homewares and gifts'},
            {n:'Whitcoulls',       e:'📚', d:'Books, stationery and music'},
            {n:'Dick Smith NZ',    e:'📺', d:'Electronics and computers'},
            {n:'Countdown Online', e:'🛒', d:'Groceries delivered to your door'},
            {n:'Amazon.com',       e:'📦', d:'International shipping to NZ'},
          ].map((s,i) => (
            <div key={i} style={{background:'#c8e020', border:'1px solid #9dc009',
              padding:8, cursor:'pointer', boxShadow:'2px 2px 0 rgba(0,0,0,0.15)'}}>
              <div style={{fontWeight:'bold', color:'#cc1111', fontSize:12}}>{s.e} {s.n}</div>
              <div style={{fontSize:11, color:'#333', marginTop:2}}>{s.d}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="content-box">
        <div className="content-box-title">💡 Safe Shopping Tips</div>
        <ul style={{fontSize:12, lineHeight:1.7, paddingLeft:16}}>
          <li>Always check seller feedback on Trade Me before bidding.</li>
          <li>Use a credit card for safer online transactions.</li>
          <li>Look for the padlock icon before entering payment details.</li>
          <li>Compare prices across multiple sites before buying electronics.</li>
          <li>Factor in shipping — overseas orders can take 2–4 weeks to NZ.</li>
        </ul>
      </div>
    </div>
  );
}

function SubpageKids() {
  return (
    <div>
      <div className="content-box" style={{background:'#ffffcc', border:'2px solid #cc1111'}}>
        <div style={{color:'#cc1111', fontWeight:'bold', fontSize:14, marginBottom:4}}>🧒 ZFREE Kids Zone</div>
        <p style={{fontSize:12}}>
          A safe, fun place for Kiwi kids! All content on this page is checked and approved for children.&nbsp;
          <span className="new-badge">SAFE</span>
        </p>
      </div>
      <div className="content-box">
        <div className="content-box-title">🎨 Kids' Activities</div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap:6}}>
          {[
            {n:"Colouring Pages", e:'🖍️', d:'Print & colour in!'},
            {n:"Kids' Jokes",     e:'😄', d:'Laugh out loud!'},
            {n:'Story Corner',    e:'📖', d:'Read free stories'},
            {n:'Homework Help',   e:'✏️', d:'NZ curriculum links'},
            {n:"Kids' Games",     e:'🎮', d:'Safe online games'},
            {n:'Science Fun',     e:'🔬', d:'Cool experiments'},
          ].map((a,i) => (
            <div key={i} style={{background:'#c8e020', border:'1px solid #9dc009',
              padding:8, textAlign:'center', cursor:'pointer'}}>
              <div style={{fontSize:22, marginBottom:2}}>{a.e}</div>
              <div style={{fontWeight:'bold', color:'#cc1111', fontSize:11}}>{a.n}</div>
              <div style={{fontSize:10, color:'#555'}}>{a.d}</div>
            </div>
          ))}
        </div>
      </div>
      <div className="content-box">
        <div className="content-box-title">📖 Story of the Week</div>
        <div style={{background:'#c8e020', border:'1px solid #9dc009', padding:10}}>
          <div style={{fontWeight:'bold', color:'#cc1111', fontSize:13, marginBottom:6}}>The Kiwi Who Couldn't Fly</div>
          <p style={{fontSize:12, lineHeight:1.6, marginBottom:6}}>
            Once upon a time, deep in the New Zealand bush, lived a little kiwi named Koha.
            All the other birds could fly — the tūī, the fantail, even the noisy kea.
            But Koha had tiny wings and a big round body, and no matter how hard he tried, he couldn't leave the ground.
          </p>
          <p style={{fontSize:12, lineHeight:1.6}}>
            One day, a young pōhutukawa tree needed someone to plant its seeds on a steep hillside.
            Koha's strong legs were perfect for the job! He ran up and down all day planting seeds.
            Being different, Koha learned, was exactly what the bush needed. 🌿
          </p>
        </div>
      </div>
      <div className="content-box">
        <div className="content-box-title">😄 Kids' Jokes</div>
        {[
          {q:'What do you call a sleeping dinosaur?',  a:'A dino-snore!'},
          {q:'Why did the banana go to the doctor?',  a:"Because it wasn't peeling well!"},
          {q:"What do elves learn in school?",        a:'The elf-abet!'},
        ].map((j,i) => (
          <div key={i} style={{marginBottom:6, paddingBottom:6, borderBottom: i<2 ? '1px solid #c8e020' : 'none'}}>
            <div style={{fontSize:12, fontWeight:'bold'}}>{j.q}</div>
            <div style={{fontSize:12, color:'#cc1111', fontStyle:'italic', marginTop:2}}>{j.a}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

function SubpageEvents() {
  return (
    <div>
      <div className="content-box">
        <div className="content-box-title">📅 NZ Events</div>
        <p style={{fontSize:12, marginBottom:8}}>What's on around New Zealand — concerts, sport, festivals and more!</p>
      </div>
      <div className="content-box">
        <div className="content-box-title">🎵 Concerts &amp; Entertainment</div>
        {[
          {n:'Crowded House Reunion Tour',    v:'Vector Arena, Auckland',     d:'14 March 2001',  t:"NZ's biggest band is back! Tickets from $45 at Ticketek."},
          {n:'NZ International Film Festival',v:'Various venues nationwide',  d:'19–29 July 2001',t:'Over 150 films from around the world. Programme released in June.'},
          {n:'Big Day Out',                   v:'Mt Smart Stadium, Auckland', d:'19 January 2001',t:'Headlined by Rage Against the Machine. SOLD OUT.'},
        ].map((e,i) => (
          <div key={i} style={{marginBottom:10, paddingBottom:10, borderBottom: i<2 ? '1px solid #c8e020' : 'none'}}>
            <div style={{fontWeight:'bold', color:'#cc1111', fontSize:12, cursor:'pointer'}}>{e.n}</div>
            <div style={{fontSize:11, color:'#555'}}>📍 {e.v}&nbsp;|&nbsp;📅 {e.d}</div>
            <div style={{fontSize:11, lineHeight:1.4, marginTop:2}}>{e.t}</div>
          </div>
        ))}
      </div>
      <div className="content-box">
        <div className="content-box-title">⚽ Sport</div>
        {[
          {n:'All Blacks vs France — Test Match',    v:'Eden Park, Auckland',       d:'16 June 2001',  t:'First test of the mid-year series. Tickets on sale now through Ticketek.'},
          {n:'NZ vs Australia — Cricket ODI',        v:'Basin Reserve, Wellington', d:'11 March 2001', t:'One-day international. Gates open 9am.'},
          {n:'A1 Grand Prix — Hamilton Street Race', v:'Hamilton City Circuit',     d:'25 March 2001', t:'International motorsport returns to the streets of Hamilton.'},
        ].map((e,i) => (
          <div key={i} style={{marginBottom:10, paddingBottom:10, borderBottom: i<2 ? '1px solid #c8e020' : 'none'}}>
            <div style={{fontWeight:'bold', color:'#cc1111', fontSize:12, cursor:'pointer'}}>{e.n}</div>
            <div style={{fontSize:11, color:'#555'}}>📍 {e.v}&nbsp;|&nbsp;📅 {e.d}</div>
            <div style={{fontSize:11, lineHeight:1.4, marginTop:2}}>{e.t}</div>
          </div>
        ))}
      </div>
      <div className="content-box">
        <div className="content-box-title">🎪 Festivals &amp; Community</div>
        <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap:6}}>
          {[
            {n:'Auckland Lantern Festival',    d:'March 2–4, Albert Park'},
            {n:'Wildfoods Festival Hokitika',  d:'10 March, Hokitika'},
            {n:'Wellington Jazz Festival',     d:'June 1–10, Various venues'},
            {n:'Pasifika Festival',            d:'March 17–18, Western Springs'},
          ].map((f,i) => (
            <div key={i} style={{background:'#c8e020', border:'1px solid #9dc009', padding:'5px 8px'}}>
              <div style={{fontWeight:'bold', color:'#cc1111', fontSize:11, cursor:'pointer'}}>{f.n}</div>
              <div style={{fontSize:10, color:'#555'}}>{f.d}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

// Export all to window so main script can use them
Object.assign(window, {
  SubpageFun, SubpageBusiness, SubpageGames, SubpageTechNews,
  SubpageWeather, SubpageShopping, SubpageKids, SubpageEvents,
});