// ========== LANDING PAGE ==========
// Real-world latitude/longitude lookup for parishes / cities / countries the
// app currently has providers in. Keys are lowercased; we walk the
// "Parish, Country" string and use the first match. If nothing matches we
// fall back to the country.
const MAP_COORDS = {
  // Jamaica — parishes and major cities
  'kingston':            { lat: 17.971, lng: -76.793 },
  'st. andrew':          { lat: 18.024, lng: -76.788 },
  'saint andrew':        { lat: 18.024, lng: -76.788 },
  'half way tree':       { lat: 18.012, lng: -76.795 },
  'spanish town':        { lat: 17.992, lng: -76.949 },
  'st. catherine':       { lat: 17.992, lng: -76.949 },
  'saint catherine':     { lat: 17.992, lng: -76.949 },
  'portmore':            { lat: 17.952, lng: -76.881 },
  'montego bay':         { lat: 18.471, lng: -77.919 },
  'st. james':           { lat: 18.471, lng: -77.919 },
  'saint james':         { lat: 18.471, lng: -77.919 },
  'ocho rios':           { lat: 18.408, lng: -77.103 },
  'st. ann':             { lat: 18.435, lng: -77.200 },
  'saint ann':           { lat: 18.435, lng: -77.200 },
  'mandeville':          { lat: 18.040, lng: -77.501 },
  'manchester':          { lat: 18.040, lng: -77.501 },
  'negril':              { lat: 18.270, lng: -78.345 },
  'westmoreland':        { lat: 18.300, lng: -78.150 },
  'port antonio':        { lat: 18.180, lng: -76.460 },
  'portland':            { lat: 18.180, lng: -76.460 },
  'savanna-la-mar':      { lat: 18.220, lng: -78.130 },
  // Trinidad & Tobago
  'port of spain':       { lat: 10.661, lng: -61.508 },
  'san fernando':        { lat: 10.279, lng: -61.467 },
  'tobago':              { lat: 11.180, lng: -60.740 },
  'scarborough':         { lat: 11.180, lng: -60.737 },
  // Barbados
  'bridgetown':          { lat: 13.108, lng: -59.625 },
  'st. michael':         { lat: 13.108, lng: -59.625 },
  // Bahamas
  'nassau':              { lat: 25.047, lng: -77.355 },
  'new providence':      { lat: 25.047, lng: -77.400 },
  'freeport':            { lat: 26.531, lng: -78.696 },
  'grand bahama':        { lat: 26.555, lng: -78.650 },
  'exuma':               { lat: 23.500, lng: -75.835 },
  // Lesser Antilles
  'castries':            { lat: 14.011, lng: -60.987 },
  'saint lucia':         { lat: 14.011, lng: -60.987 },
  'kingstown':           { lat: 13.156, lng: -61.225 },
  'saint vincent':       { lat: 13.156, lng: -61.225 },
  "st. george's":        { lat: 12.056, lng: -61.748 },
  'grenada':             { lat: 12.056, lng: -61.748 },
  "st. john's":          { lat: 17.108, lng: -61.846 },
  'antigua':             { lat: 17.108, lng: -61.846 },
  'roseau':              { lat: 15.301, lng: -61.388 },
  'dominica':            { lat: 15.301, lng: -61.388 },
  'fort-de-france':      { lat: 14.616, lng: -61.058 },
  'martinique':          { lat: 14.616, lng: -61.058 },
  // DR / Haiti / Puerto Rico
  'santo domingo':       { lat: 18.486, lng: -69.931 },
  'punta cana':          { lat: 18.582, lng: -68.405 },
  'port-au-prince':      { lat: 18.594, lng: -72.307 },
  'san juan':            { lat: 18.466, lng: -66.106 },
  // Cayman Islands
  'west bay':            { lat: 19.371, lng: -81.418 },
  'george town':         { lat: 19.286, lng: -81.367 },
  'cayman islands':      { lat: 19.313, lng: -81.254 },
  // Belize
  'belize district':     { lat: 17.490, lng: -88.197 },
  'belize':              { lat: 17.490, lng: -88.197 },
  // Country fallbacks — used when no parish/city matches
  'jm':                  { lat: 18.109, lng: -77.297 },
  'jamaica':             { lat: 18.109, lng: -77.297 },
  'tt':                  { lat: 10.692, lng: -61.222 },
  't&t':                 { lat: 10.692, lng: -61.222 },
  'trinidad':            { lat: 10.692, lng: -61.222 },
  'trinidad and tobago': { lat: 10.692, lng: -61.222 },
  'bb':                  { lat: 13.193, lng: -59.543 },
  'barbados':            { lat: 13.193, lng: -59.543 },
  'bs':                  { lat: 25.034, lng: -77.396 },
  'bahamas':             { lat: 25.034, lng: -77.396 },
  'do':                  { lat: 18.736, lng: -70.162 },
  'dominican republic':  { lat: 18.736, lng: -70.162 },
  'pr':                  { lat: 18.221, lng: -66.591 },
  'puerto rico':         { lat: 18.221, lng: -66.591 },
};

const _coordFor = (areaStr) => {
  if (!areaStr) return null;
  const parts = String(areaStr).split(',').map(s => s.trim().toLowerCase()).filter(Boolean);
  for (const part of parts) {
    if (MAP_COORDS[part]) return MAP_COORDS[part];
  }
  return null;
};

const LandingPage = ({ nav }) => {
  const heroRef = React.useRef(null);
  const [cursor, setCursor] = React.useState({x: -9999, y: -9999, active: false});

  // Real platform stats: derived from loaded providers/products + the public
  // search endpoints. We fall back to '—' instead of inventing numbers.
  const realProviders = (typeof window !== 'undefined' && Array.isArray(window.PROVIDERS)) ? window.PROVIDERS : [];
  const realProducts  = (typeof window !== 'undefined' && Array.isArray(window.PRODUCTS))  ? window.PRODUCTS  : [];
  const ratingsArr = realProviders.map(p => Number(p.rating) || 0).filter(n => n > 0);
  const avgRating = ratingsArr.length ? (ratingsArr.reduce((a, b) => a + b, 0) / ratingsArr.length) : 0;
  const totalReviewsAcrossProviders = realProviders.reduce((sum, p) => sum + (Number(p.reviews) || 0), 0);
  const islandsServed = new Set(
    realProviders.map(p => {
      const a = (p.area || '').split(',').slice(-1)[0].trim();
      return a || null;
    }).filter(Boolean)
  ).size;

  // Group real providers by city so each map pin shows a real location +
  // a real provider count. Pins are clickable and select that city's first
  // provider for the side card.
  const cityGroups = React.useMemo(() => {
    const groups = new Map();
    for (const p of realProviders) {
      const coord = _coordFor(p.area);
      if (!coord) continue;
      const cityName = (p.area || '').split(',')[0].trim() || 'Caribbean';
      const key = cityName.toLowerCase();
      if (!groups.has(key)) {
        groups.set(key, { city: cityName, lat: coord.lat, lng: coord.lng, providers: [] });
      }
      groups.get(key).providers.push(p);
    }
    return [...groups.values()];
  }, [realProviders.length]);

  const mapPins = cityGroups.map(g => ({
    id: g.providers[0].id,
    lat: g.lat,
    lng: g.lng,
    label: g.city + ' · ' + g.providers.length,
    providerIds: g.providers.map(p => p.id),
  }));

  const [mapPin, setMapPin] = React.useState(null);
  React.useEffect(() => {
    if (!mapPin && mapPins.length > 0) setMapPin(mapPins[0].id);
  }, [mapPins.length]);
  const activePin = realProviders.find(p => p.id === mapPin) || realProviders[0] || null;

  const onHeroMove = (e) => {
    const r = heroRef.current?.getBoundingClientRect();
    if (!r) return;
    setCursor({ x: e.clientX - r.left, y: e.clientY - r.top, active: true });
  };
  const onHeroLeave = () => setCursor(c => ({...c, active: false}));

  return (
    <div className="fade-in">
      {/* HERO */}
      <section className="hero" ref={heroRef} onMouseMove={onHeroMove} onMouseLeave={onHeroLeave}>
        <div className="hero-cursor-glow" style={{
          left: cursor.x, top: cursor.y,
          opacity: cursor.active ? 1 : 0,
        }}/>
        <div className="container">
          <div className="hero-grid">
            <div>
              <div className="badge badge-indigo" style={{marginBottom: 20}}>
                <Icon name="sparkles" size={12}/> The Journal · Issue 04 is out
              </div>
              <h1>
                Real hands.<br/>
                Real <span className="accent">tings.</span><br/>
                Real results.
              </h1>
              <p className="hero-sub">
                From yard to studio. The Caribbean's home for vetted stylists, nail techs, makeup artists, barbers and estheticians. Book, pay, message, shop. All in one place.
              </p>
              <div className="hero-ctas">
                <button className="btn btn-brand btn-lg" onClick={() => nav('explore')}>
                  Book a service <Icon name="arrowRight" size={16}/>
                </button>
                <button className="btn btn-outline btn-lg" onClick={() => nav('provider-setup')}>
                  Join as a provider
                </button>
              </div>
              <div className="hero-live-ticker-wrap">
                <span className="hero-live-label">Live on CaribGlow</span>
                <LiveTicker/>
              </div>
            </div>
            <div className="hero-visual">
              <div className="hero-blob"/>
              <div className="hero-logo-center">
                <img src={(window.__resources && window.__resources.logo) || "assets/caribglow-logo.png"} alt="CaribGlow"/>
              </div>
              {(() => {
                const featured = realProviders[0];
                if (!featured) return null;
                const cat = featured.category ? featured.category[0].toUpperCase() + featured.category.slice(1) : 'Beauty';
                return (
                  <div className="hero-card-float hero-card-1">
                    <PremPortrait seed={featured.username} name={featured.name} size={36} photoUrl={featured.photo}/>
                    <div style={{flex: 1, minWidth: 0}}>
                      <div style={{fontSize: 12.5, fontWeight: 600, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{featured.name} · {cat}</div>
                      <div style={{fontSize: 11, color: 'var(--muted)', marginTop: 2}}>★ {Number(featured.rating || 0).toFixed(2)} · {featured.area}</div>
                    </div>
                    <div className="badge badge-ok">✓</div>
                  </div>
                );
              })()}
              <div className="hero-card-float hero-card-2">
                <PremPortrait seed="payout" name="$$" size={36}/>
                <div style={{flex: 1, minWidth: 0}}>
                  <div style={{fontSize: 12.5, fontWeight: 600}}>Payout received</div>
                  <div style={{fontSize: 11, color: 'var(--muted)', marginTop: 2}}>JMD $24,800 · Apr 20</div>
                </div>
              </div>
              <div className="hero-card-float hero-card-3">
                <PremPortrait seed="review" name="★★" size={36}/>
                <div style={{flex: 1, minWidth: 0}}>
                  <div style={{fontSize: 12.5, fontWeight: 600}}>"Absolutely perfect"</div>
                  <Stars n={5} size={10}/>
                </div>
              </div>
            </div>
          </div>

          {/* Stats row — pulled from live data, falls back gracefully if data hasn't loaded */}
          <div className="hero-meta" style={{marginTop: 54, paddingTop: 30, borderTop: '1px solid var(--line)'}}>
            <div className="stat">
              <div className="n">{realProviders.length || '—'}</div>
              <div className="l">{realProviders.length === 1 ? 'Provider' : 'Providers'} on CaribGlow</div>
            </div>
            <div className="stat">
              <div className="n">{realProducts.length || '—'}</div>
              <div className="l">Marketplace products</div>
            </div>
            <div className="stat">
              <div className="n">{avgRating ? avgRating.toFixed(2) + '★' : '—'}</div>
              <div className="l">Average rating</div>
            </div>
            <div className="stat">
              <div className="n">{islandsServed || '—'}</div>
              <div className="l">{islandsServed === 1 ? 'Country served' : 'Countries served'}</div>
            </div>
          </div>
        </div>
      </section>

      {/* TRUST STRIP — hidden until we have real press placements to point to.
          Replaced with a simple value statement so the layout stays anchored. */}
      <section style={{background:'#fff'}}>
        <div className="container">
          <div className="press-strip">
            <span className="ps-label">Caribbean owned</span>
            <span className="ps-item sans">Verified providers</span>
            <span className="ps-item">Secure bookings</span>
            <span className="ps-item sans">Direct messaging</span>
            <span className="ps-item">In-app payouts</span>
          </div>
        </div>
      </section>

      {/* SERVICES TICKER */}
      <section className="services-strip">
        <div className="ticker">
          <span>Hair</span><span>Nails</span><span>Makeup</span><span>Lashes</span>
          <span>Skincare</span><span>Barbering</span><span>Braids</span>
          <span>Hair</span><span>Nails</span><span>Makeup</span><span>Lashes</span>
          <span>Skincare</span><span>Barbering</span><span>Braids</span>
        </div>
      </section>

      {/* CARIBBEAN MAP SECTION */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Every island. Every chair.</div>
              <h2>Find your <span className="i">person</span>,<br/>wherever you are.</h2>
            </div>
            <button className="btn btn-outline" onClick={() => nav('explore')}>
              Open full map <Icon name="arrowRight" size={14}/>
            </button>
          </div>

          <div style={{display:'grid', gridTemplateColumns: '1.6fr 1fr', gap: 28, alignItems:'stretch'}}>
            <div style={{background:'#fff', border:'1px solid var(--line)', borderRadius: 'var(--r-xl)', overflow:'hidden', aspectRatio:'8/5', position:'relative'}}>
              <CaribbeanMap pins={mapPins} onPinClick={setMapPin} activeId={mapPin}/>
              <div style={{position:'absolute', top: 16, left: 16, background:'rgba(255,255,255,0.92)', backdropFilter:'blur(8px)', padding:'8px 12px', borderRadius: 10, fontSize: 11, fontFamily:'JetBrains Mono, monospace', letterSpacing:'0.08em', textTransform:'uppercase', color:'var(--muted)'}}>
                {mapPins.length === 0 ? 'Loading providers…' : mapPins.length === 1 ? '1 location' : mapPins.length + ' locations'}
              </div>
            </div>
            <div style={{background:'var(--ink)', color:'#fff', borderRadius: 'var(--r-xl)', padding: 32, display:'flex', flexDirection:'column'}}>
              {!activePin ? (
                <>
                  <div className="eyebrow" style={{color:'var(--coral-2)'}}>Loading</div>
                  <div style={{flex: 1, color:'rgba(255,255,255,0.6)', fontSize: 13, marginTop: 16}}>
                    Pulling Caribbean providers from our backend…
                  </div>
                </>
              ) : (
                <>
                  <div className="eyebrow" style={{color:'var(--coral-2)'}}>Currently showing</div>
                  <div style={{fontFamily:'Fraunces, serif', fontSize: 44, fontWeight: 500, letterSpacing:'-0.03em', lineHeight:1, margin:'10px 0 6px'}}>
                    {(activePin.area || 'Caribbean').split(',')[0]}
                  </div>
                  <div style={{color:'rgba(255,255,255,0.6)', fontSize: 13, marginBottom: 24}}>
                    {activePin.area}
                  </div>
                  <div style={{display:'flex', gap: 12, alignItems:'center', marginBottom: 20}}>
                    <PremPortrait seed={activePin.username} name={activePin.name} size={52} photoUrl={activePin.photo}/>
                    <div style={{minWidth: 0}}>
                      <div style={{fontWeight: 600, fontSize: 15, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>{activePin.name}</div>
                      <div style={{fontSize: 12, color:'rgba(255,255,255,0.65)'}}>{activePin.tagline}</div>
                    </div>
                  </div>
                  <div style={{display:'flex', gap: 18, fontSize: 12, color:'rgba(255,255,255,0.65)', marginBottom: 24, paddingBottom: 24, borderBottom:'1px solid rgba(255,255,255,0.15)'}}>
                    <span>★ {Number(activePin.rating || 0).toFixed(2)}</span>
                    <span>{activePin.reviews || 0} review{activePin.reviews === 1 ? '' : 's'}</span>
                    {activePin.priceMin > 0 && <span>From ${activePin.priceMin}</span>}
                  </div>
                  <div style={{flex: 1, fontSize: 13, color:'rgba(255,255,255,0.75)', lineHeight: 1.6, marginBottom: 20}}>
                    {activePin.tagline ? activePin.tagline + '. ' : ''}Based in {activePin.area}.
                  </div>
                  <button className="btn btn-coral" onClick={() => nav('provider-profile')}>
                    View {(activePin.name || 'profile').split(' ')[0]}'s profile <Icon name="arrowRight" size={14}/>
                  </button>
                </>
              )}
            </div>
          </div>
        </div>
      </section>

      {/* 3-UP FEATURES */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Three products. One platform.</div>
              <h2>Whether you book, <span className="i">provide</span>,<br/>or sell, we've got you.</h2>
            </div>
            <button className="btn btn-outline" onClick={() => nav('explore')}>
              See how it works <Icon name="arrowRight" size={14}/>
            </button>
          </div>

          {(() => {
            // Pick the first two real providers with usable photos for the
            // "For clients" preview, and the first three products with images
            // for the "For sellers" preview. Falls back to whatever is
            // available — never empty.
            const featProviders = realProviders.filter(p => p.photo || (p.portfolio && p.portfolio[0])).slice(0, 2);
            const fillProviders = featProviders.length < 2 ? realProviders.slice(0, 2) : featProviders;
            const featProducts = realProducts.filter(p => p.image).slice(0, 3);
            const fillProducts = featProducts.length < 3 ? realProducts.slice(0, 3) : featProducts;
            return (
              <div className="feature-grid">
                <div className="feature-card">
                  <div className="num">01 · For clients</div>
                  <h3>Find your <em style={{fontStyle:'italic'}}>person</em>.</h3>
                  <p>Browse vetted providers filtered by service, price, availability, and proximity. Read real reviews. Book in under a minute.</p>
                  <div className="viz" style={{background: 'linear-gradient(135deg, #ffd7cf, #f5d3dc)', padding: 16, display:'flex', flexDirection:'column', gap: 8}}>
                    <div style={{background:'#fff', borderRadius: 10, padding: '8px 12px', fontSize: 11.5, fontWeight: 600, display:'flex', alignItems:'center', gap: 8}}>
                      <Icon name="search" size={12}/> {fillProviders[0] ? `${(fillProviders[0].category || 'Hair')[0].toUpperCase() + (fillProviders[0].category || 'Hair').slice(1)} · ${(fillProviders[0].area || '').split(',')[0] || 'Caribbean'}` : 'Hair · Kingston · Under $200'}
                    </div>
                    <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 6}}>
                      {fillProviders.map((p) => (
                        <div key={p.id} style={{background:'#fff', borderRadius: 10, padding: 8, fontSize: 10.5}}>
                          <PremPortrait seed={p.username} name={p.name} size="100%" radius="6px" style={{aspectRatio: 1, marginBottom: 4}} photoUrl={(p.portfolio && p.portfolio[0]) || p.photo}/>
                          {p.name.split(' ').slice(0,2).join(' ')} · {Number(p.rating || 0).toFixed(p.rating >= 5 ? 1 : 2)}★
                        </div>
                      ))}
                      {fillProviders.length === 0 && (
                        <>
                          <div style={{background:'#fff', borderRadius: 10, padding: 8, fontSize: 10.5}}>
                            <div className="ph coral" style={{aspectRatio: 1, borderRadius: 6, marginBottom: 4}}/>
                            Loading…
                          </div>
                          <div style={{background:'#fff', borderRadius: 10, padding: 8, fontSize: 10.5}}>
                            <div className="ph lav" style={{aspectRatio: 1, borderRadius: 6, marginBottom: 4}}/>
                            Loading…
                          </div>
                        </>
                      )}
                    </div>
                  </div>
                </div>
                <div className="feature-card">
                  <div className="num">02 · For providers</div>
                  <h3>Run your <em style={{fontStyle:'italic'}}>whole</em> book.</h3>
                  <p>Calendar, client list, messages, payouts, and a subscription tier that grows with you. Less admin, more time behind the chair.</p>
                  <div className="viz" style={{background: 'linear-gradient(135deg, #d4d5f5, #e2d8f4)', padding: 16, position:'relative', overflow:'hidden'}}>
                    {(fillProviders[0] && ((fillProviders[0].portfolio && fillProviders[0].portfolio[0]) || fillProviders[0].photo)) && (
                      <img src={(fillProviders[0].portfolio && fillProviders[0].portfolio[0]) || fillProviders[0].photo} alt=""
                        style={{position:'absolute', inset: 0, width:'100%', height:'100%', objectFit:'cover', opacity: 0.42}}/>
                    )}
                    <div style={{position:'relative', background:'#fff', borderRadius: 10, padding: 10, boxShadow:'0 6px 18px rgba(60,40,120,0.18)'}}>
                      <div style={{fontSize: 10, color:'var(--muted)', fontWeight: 600}}>WEEKLY EARNINGS</div>
                      <div style={{fontFamily:'Fraunces, serif', fontSize: 26, fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1}}>Track every $</div>
                      <svg viewBox="0 0 100 30" style={{width:'100%', marginTop: 8}}>
                        <polyline points="0,22 12,18 24,20 36,12 48,14 60,8 72,10 84,4 100,6"
                          fill="none" stroke="#6366F1" strokeWidth="2" strokeLinecap="round"/>
                        <polyline points="0,22 12,18 24,20 36,12 48,14 60,8 72,10 84,4 100,6 100,30 0,30"
                          fill="#6366F1" opacity="0.12"/>
                      </svg>
                    </div>
                  </div>
                </div>
                <div className="feature-card">
                  <div className="num">03 · For sellers</div>
                  <h3>Sell your <em style={{fontStyle:'italic'}}>goods</em>.</h3>
                  <p>List products in the marketplace alongside your services. Oils, lashes, press-ons, robes. Ship regionally with integrated payments.</p>
                  <div className="viz" style={{background: 'linear-gradient(135deg, #cfeae0, #c2e5e0)', padding: 16, display:'grid', gridTemplateColumns:'1fr 1fr 1fr', gap: 6, alignContent:'center'}}>
                    {fillProducts.length > 0 ? fillProducts.map((pr) => (
                      <div key={pr.id} style={{background:'#fff', borderRadius: 8, padding: 6}}>
                        <div style={{aspectRatio: 1, borderRadius: 4, overflow:'hidden', background:'linear-gradient(135deg,#ffd7cf,#f5d3dc)', position:'relative'}}>
                          {pr.image && (
                            <img src={pr.image} alt={pr.name || ''}
                              onError={(e) => { e.currentTarget.style.display = 'none'; }}
                              style={{position:'absolute', inset: 0, width:'100%', height:'100%', objectFit:'cover'}}/>
                          )}
                        </div>
                        <div style={{fontSize: 9.5, fontWeight: 600, marginTop: 4, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap'}}>${Math.round(pr.price || 0)}</div>
                      </div>
                    )) : ['coral', 'teal', 'rose'].map((t, i) => (
                      <div key={i} style={{background:'#fff', borderRadius: 8, padding: 6}}>
                        <div className={`ph ${t}`} style={{aspectRatio: 1, borderRadius: 4, fontSize: 8}}>loading</div>
                        <div style={{fontSize: 9.5, fontWeight: 600, marginTop: 4}}>$—</div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            );
          })()}
        </div>
      </section>

      {/* JOURNAL PREVIEW */}
      <section className="section" style={{paddingTop: 20}}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">The Journal</div>
              <h2>Stories from <span className="i">the studios.</span></h2>
            </div>
            <button className="btn btn-outline" onClick={() => nav('journal')}>
              Read the journal <Icon name="arrowRight" size={14}/>
            </button>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 22}}>
            {JOURNAL.slice(0, 3).map((a, i) => {
              // Pair each journal card with a real provider's first portfolio
              // photo so the covers reflect actual Caribbean studios on the
              // platform instead of empty gradients. Falls through to the
              // gradient placeholder if no real photo is loaded yet.
              const cover = realProviders
                .filter(p => (p.portfolio && p.portfolio[0]) || p.photo)
                .map(p => (p.portfolio && p.portfolio[0]) || p.photo)[i] || null;
              return (
                <article key={a.id} className="journal-card" style={{gridColumn:'span 1'}} onClick={() => nav('journal')}>
                  <div className="journal-cover" style={{position:'relative', overflow:'hidden'}}>
                    {cover ? (
                      <>
                        <img src={cover} alt={a.cat} style={{position:'absolute', inset: 0, width:'100%', height:'100%', objectFit:'cover'}}/>
                        <div className="journal-overlay"/>
                        <div className="journal-cat">{a.cat}</div>
                      </>
                    ) : (
                      <PremPortrait seed={a.id} name={a.cat} size="100%" radius="0">
                        <div className="journal-overlay"/>
                        <div className="journal-cat">{a.cat}</div>
                      </PremPortrait>
                    )}
                  </div>
                  <div className="journal-body">
                    <h3>{a.title}</h3>
                    <p className="dek">{a.dek}</p>
                    <div className="journal-meta">
                      <span>{a.author}</span><span>·</span><span>{a.readTime}</span>
                    </div>
                  </div>
                </article>
              );
            })}
          </div>
        </div>
      </section>

      {/* SERVICES */}
      <section className="section" style={{paddingTop: 40}}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Every service</div>
              <h2>From fades to <span className="i">facials</span>.</h2>
            </div>
          </div>
          <div className="svc-grid">
            {['Hair','Nails','Makeup','Lashes','Skincare','Barbering','Braids'].map(s => {
              const k = s.toLowerCase();
              const info = SERVICE_ICONS[k] || SERVICE_ICONS.hair;
              return (
                <div key={s} className="svc-tile" onClick={() => nav('explore')}>
                  <div className="g" style={{background: info.color}}>{info.glyph}</div>
                  {s}
                </div>
              );
            })}
          </div>
        </div>
      </section>

      {/* Marketplace callout */}
      <section className="section">
        <div className="container">
          <div style={{background: 'var(--ink)', borderRadius: 'var(--r-xl)', padding: '60px', color: '#fff', display:'grid', gridTemplateColumns: '1.2fr 1fr', gap: 40, alignItems:'center', position:'relative', overflow:'hidden'}}>
            <div style={{position:'absolute', top:-100, right:-100, width: 400, height: 400, background:'var(--grad-hero)', borderRadius: '50%', opacity: 0.4, filter:'blur(40px)'}}/>
            <div style={{position:'relative'}}>
              <div className="eyebrow" style={{color: 'var(--coral-2)'}}>The Marketplace</div>
              <h2 style={{fontFamily:'Fraunces, serif', fontSize: 52, letterSpacing:'-0.03em', lineHeight: 1, margin: '10px 0 16px', fontWeight: 500}}>
                Shop Caribbean beauty,<br/><em style={{fontStyle:'italic'}}>direct from the maker.</em>
              </h2>
              <p style={{color:'#d5d0e8', fontSize: 16, marginBottom: 28, maxWidth: 480}}>
                Handmade hair oils, lash serums, clay masks, and more, sold by the same artists you book with. Ship regionally, pay securely.
              </p>
              <button className="btn btn-coral btn-lg" onClick={() => nav('marketplace')}>
                Shop now <Icon name="arrowRight" size={16}/>
              </button>
            </div>
            <div style={{display:'grid', gridTemplateColumns:'1fr 1fr', gap: 12, position:'relative'}}>
              {/* Prefer products that actually have a photo so the marketplace
                  preview never shows a blank lavender placeholder. Fall back to
                  the first 4 products if fewer than 4 have images. */}
              {(() => {
                const withImg = realProducts.filter(p => p.image).slice(0, 4);
                const fillProducts = withImg.length === 4 ? withImg : (realProducts.length ? realProducts.slice(0, 4) : PRODUCTS.slice(0, 4));
                return fillProducts.map(p => (
                  <div key={p.id} style={{background:'#fff', borderRadius: 16, padding: 10, color: 'var(--ink)'}}>
                    <div style={{aspectRatio: 1, borderRadius: 10, overflow:'hidden', position:'relative', background:'linear-gradient(135deg,#efe7ff,#e6f3ff)'}}>
                      {p.image && (
                        <img src={p.image} alt={p.name || ''}
                          loading="lazy"
                          onError={(e) => { e.currentTarget.style.display = 'none'; const fb = e.currentTarget.nextElementSibling; if (fb) fb.style.display = 'flex'; }}
                          style={{position:'absolute', inset: 0, width:'100%', height:'100%', objectFit:'cover', display:'block'}}/>
                      )}
                      <div style={{display: p.image ? 'none' : 'flex', position:'absolute', inset: 0}}>
                        <Ph tone={p.tone} style={{aspectRatio: 1, borderRadius: 10, fontSize: 10, width:'100%', height:'100%'}}>{(p.name || '').split(' ').slice(0,2).join(' ')}</Ph>
                      </div>
                    </div>
                    <div style={{fontSize: 11, marginTop: 8, fontWeight: 500}}>{(p.name || '').split(' —')[0]}</div>
                    <div style={{fontFamily:'Fraunces, serif', fontSize: 16, fontWeight: 500, marginTop: 2}}>${p.price}</div>
                  </div>
                ));
              })()}
            </div>
          </div>
        </div>
      </section>

      {/* TRUST */}
      <section className="section" style={{paddingTop: 20}}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Real talk, real clients</div>
              <h2><span className="i">Loved</span> by the people<br/>who use it.</h2>
            </div>
          </div>
          <div style={{display:'grid', gridTemplateColumns:'repeat(3, 1fr)', gap: 16}}>
            {[
              {n:'Chloé A.', seed:'chloe', role:'Client · Kingston', q:"Rebooked within two hours. Found my stylist on the first try. This never happens."},
              {n:'Marcus R.', seed:'marcus', role:'Barber · Half Way Tree', q:"Dropped three other apps. My calendar, chats, and payouts finally live in one place."},
              {n:'Alana K.', seed:'alana', role:'Bridal MUA · Port of Spain', q:"Bookings doubled in the first quarter. The marketplace side-hustle is real income now."},
            ].map((t, i) => (
              <div key={i} className="feature-card" style={{padding: 28}}>
                <Stars n={5} size={14}/>
                <p style={{fontFamily:'Fraunces, serif', fontSize: 22, lineHeight: 1.3, letterSpacing:'-0.01em', margin: '14px 0 20px', fontWeight: 400}}>
                  "{t.q}"
                </p>
                <div style={{display:'flex', gap: 10, alignItems:'center'}}>
                  <PremPortrait seed={t.seed} name={t.n} size={36}/>
                  <div>
                    <div style={{fontWeight: 600, fontSize: 13}}>{t.n}</div>
                    <div style={{color:'var(--muted)', fontSize: 11.5}}>{t.role}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* GET THE APP */}
      <section className="section" style={{paddingTop: 40, paddingBottom: 40}}>
        <div className="container">
          <div style={{
            background:'linear-gradient(135deg, var(--primary-deep) 0%, #4338ca 55%, var(--coral) 130%)',
            borderRadius:'var(--r-xl)', padding:'56px 60px', color:'#fff',
            display:'grid', gridTemplateColumns:'1.3fr 1fr', gap: 40, alignItems:'center',
            position:'relative', overflow:'hidden'
          }}>
            {/* decorative glow */}
            <div aria-hidden style={{position:'absolute', top:-120, right:-100, width: 420, height: 420, borderRadius:'50%', background:'radial-gradient(circle, rgba(255,154,107,0.45), transparent 65%)', pointerEvents:'none'}}/>
            <div aria-hidden style={{position:'absolute', bottom:-140, left:-80, width: 360, height: 360, borderRadius:'50%', background:'radial-gradient(circle, rgba(255,255,255,0.12), transparent 60%)', pointerEvents:'none'}}/>

            <div style={{position:'relative', zIndex: 1}}>
              <div className="eyebrow" style={{color:'rgba(255,255,255,0.85)', marginBottom: 10}}>Now on mobile</div>
              <h2 style={{fontFamily:'Fraunces, serif', fontSize: 44, fontWeight: 500, letterSpacing:'-0.02em', lineHeight: 1.05, marginBottom: 14}}>
                Your glow,<br/><em>in your pocket.</em>
              </h2>
              <p style={{fontSize: 16, lineHeight: 1.55, opacity: 0.92, marginBottom: 28, maxWidth: 460}}>
                Book last-minute slots, message your pro, and track orders. Push notifications for dropped appointments and flash deals.
              </p>

              <div style={{display:'flex', gap: 12, flexWrap:'wrap'}}>
                {/* Google Play */}
                <a href="https://play.google.com/store" target="_blank" rel="noopener"
                  style={{display:'flex', alignItems:'center', gap: 12, background:'#000', color:'#fff', padding:'10px 20px 10px 16px', borderRadius: 12, textDecoration:'none', border:'1px solid rgba(255,255,255,0.15)', transition:'transform 0.2s'}}
                  onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
                  onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}>
                  <svg width="28" height="30" viewBox="0 0 28 30" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M1.2 1.1C0.8 1.5 0.6 2.1 0.6 2.9V27.1C0.6 27.9 0.8 28.5 1.2 28.9L1.3 29L14.9 15.4V15.1L1.3 1L1.2 1.1Z" fill="#00C3FF"/>
                    <path d="M19.3 19.8L14.9 15.4V15.1L19.3 10.7L19.4 10.8L24.6 13.7C26.1 14.5 26.1 15.9 24.6 16.8L19.4 19.7L19.3 19.8Z" fill="#FFC700"/>
                    <path d="M19.4 19.7L14.9 15.25L1.2 28.9C1.7 29.4 2.5 29.5 3.5 29L19.4 19.7Z" fill="#FF3A44"/>
                    <path d="M19.4 10.8L3.5 1.5C2.5 1 1.7 1.1 1.2 1.6L14.9 15.25L19.4 10.8Z" fill="#00D26A"/>
                  </svg>
                  <div style={{textAlign:'left', lineHeight: 1.1}}>
                    <div style={{fontSize: 10, opacity: 0.85, letterSpacing:'0.04em'}}>GET IT ON</div>
                    <div style={{fontSize: 18, fontWeight: 600, fontFamily:'Inter, sans-serif', marginTop: 2}}>Google Play</div>
                  </div>
                </a>

                {/* App Store */}
                <a href="https://apps.apple.com" target="_blank" rel="noopener"
                  style={{display:'flex', alignItems:'center', gap: 12, background:'#000', color:'#fff', padding:'10px 20px 10px 16px', borderRadius: 12, textDecoration:'none', border:'1px solid rgba(255,255,255,0.15)', transition:'transform 0.2s'}}
                  onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
                  onMouseLeave={e => e.currentTarget.style.transform = 'translateY(0)'}>
                  <svg width="26" height="30" viewBox="0 0 26 30" fill="#fff" xmlns="http://www.w3.org/2000/svg">
                    <path d="M21.3 15.7c0-3.5 2.9-5.2 3-5.3-1.6-2.4-4.2-2.7-5.1-2.7-2.2-0.2-4.2 1.3-5.3 1.3-1.1 0-2.8-1.3-4.6-1.2-2.4 0-4.6 1.4-5.8 3.5-2.5 4.3-0.6 10.7 1.8 14.2 1.2 1.7 2.6 3.6 4.4 3.6 1.8-0.1 2.5-1.2 4.6-1.2 2.1 0 2.8 1.2 4.7 1.1 1.9 0 3.2-1.7 4.3-3.5 1.4-2 2-3.9 2-4-0.1 0-3.9-1.5-4-5.8zM17.8 5.5c1-1.2 1.7-2.9 1.5-4.5-1.4 0.1-3.2 1-4.2 2.1-0.9 1-1.8 2.7-1.6 4.3 1.6 0.1 3.2-0.8 4.3-1.9z"/>
                  </svg>
                  <div style={{textAlign:'left', lineHeight: 1.1}}>
                    <div style={{fontSize: 10, opacity: 0.85, letterSpacing:'0.04em'}}>Download on the</div>
                    <div style={{fontSize: 18, fontWeight: 600, fontFamily:'Inter, sans-serif', marginTop: 2}}>App Store</div>
                  </div>
                </a>
              </div>

              <div style={{display:'flex', gap: 24, marginTop: 26, fontSize: 13, opacity: 0.85}}>
                <div>★ 4.9 · 12k reviews</div>
                <div>Free · iOS 15+ / Android 9+</div>
              </div>
            </div>

            {/* Phone mockup */}
            <div style={{position:'relative', display:'grid', placeItems:'center', zIndex: 1}}>
              <div style={{
                width: 240, height: 480, background:'#1a1a2e',
                borderRadius: 38, padding: 10,
                boxShadow:'0 40px 80px rgba(0,0,0,0.35), 0 0 0 3px rgba(255,255,255,0.08)',
                transform:'rotate(-6deg)',
                border:'1px solid rgba(255,255,255,0.15)'
              }}>
                <div style={{width:'100%', height:'100%', background:'linear-gradient(180deg, #FFF9F4 0%, #fff 100%)', borderRadius: 28, overflow:'hidden', position:'relative'}}>
                  {/* Notch */}
                  <div style={{position:'absolute', top: 6, left:'50%', transform:'translateX(-50%)', width: 80, height: 18, background:'#000', borderRadius: 12, zIndex: 2}}/>
                  <div style={{padding:'36px 16px 16px'}}>
                    <div style={{fontSize: 10, color:'var(--muted)', letterSpacing:'0.08em', marginBottom: 4}}>TUESDAY · 2:14 PM</div>
                    <div style={{fontFamily:'Fraunces, serif', fontSize: 20, fontWeight: 500, color:'var(--ink)', letterSpacing:'-0.01em', lineHeight: 1.15}}>
                      Good afternoon,<br/><em>Chloé</em>
                    </div>
                    <div style={{marginTop: 14, background:'#fff', borderRadius: 14, padding: 12, boxShadow:'0 4px 16px rgba(0,0,0,0.06)'}}>
                      <div style={{fontSize: 9, color:'var(--primary-deep)', fontWeight: 600, letterSpacing:'0.06em'}}>UPCOMING</div>
                      <div style={{fontSize: 12, color:'var(--ink)', fontWeight: 600, marginTop: 4}}>Silk press · Aya Bridal</div>
                      <div style={{fontSize: 10, color:'var(--muted)', marginTop: 2}}>Tomorrow · 10:00 AM</div>
                      <div style={{display:'flex', gap: 6, marginTop: 10}}>
                        <div style={{flex: 1, background:'var(--primary)', color:'#fff', fontSize: 10, fontWeight: 600, padding:'6px 0', borderRadius: 8, textAlign:'center'}}>Details</div>
                        <div style={{flex: 1, background:'var(--bg-soft)', color:'var(--ink)', fontSize: 10, fontWeight: 600, padding:'6px 0', borderRadius: 8, textAlign:'center'}}>Reschedule</div>
                      </div>
                    </div>
                    <div style={{marginTop: 10, display:'grid', gridTemplateColumns:'1fr 1fr', gap: 8}}>
                      {[{t:'Hair', c:'#6366F1'},{t:'Nails', c:'#FF6B8A'},{t:'Lashes', c:'#F5B800'},{t:'Makeup', c:'#14B8A6'}].map(s => (
                        <div key={s.t} style={{background:'#fff', borderRadius: 10, padding:'10px 8px', fontSize: 10, fontWeight: 600, color:'var(--ink)', borderLeft:`3px solid ${s.c}`, boxShadow:'0 2px 8px rgba(0,0,0,0.04)'}}>
                          {s.t}
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>

              {/* Floating QR hint */}
              <div style={{position:'absolute', bottom: -10, right: -10, background:'#fff', color:'var(--ink)', padding:'10px 14px', borderRadius: 12, fontSize: 11, fontWeight: 600, boxShadow:'0 12px 32px rgba(0,0,0,0.18)', transform:'rotate(4deg)'}}>
                <div style={{fontSize: 9, color:'var(--muted)', letterSpacing:'0.06em', marginBottom: 2}}>SCAN TO DOWNLOAD</div>
                <div style={{display:'flex', gap: 8, alignItems:'center'}}>
                  <div style={{width: 36, height: 36, background:'conic-gradient(from 0deg, #000 0 25%, #fff 0 50%, #000 0 75%, #fff 0)', backgroundSize:'8px 8px', borderRadius: 4, border:'1px solid var(--line)'}}/>
                  <div style={{fontSize: 13, fontFamily:'Fraunces, serif'}}>caribglow.app</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* FOOTER */}
      <footer className="footer">
        <div className="container">
          <div className="footer-tagline">Bloom where you're booked.</div>
          <div className="footer-grid">
            <div>
              <div className="brand" style={{color: '#fff', marginBottom: 14}}>
                <img src={(window.__resources && window.__resources.logo) || "assets/caribglow-logo.png"} alt=""/>
                <span><span style={{color:'#fff'}}>Carib</span><span className="b2">Glow</span></span>
              </div>
              <div style={{fontSize: 13, lineHeight: 1.6, maxWidth: 280}}>
                The Caribbean's beauty booking platform. Built in Kingston, serving the region.
              </div>
            </div>
            <div>
              <h4>Clients</h4>
              <ul>
                <li onClick={() => nav('explore')}>Explore</li>
                <li onClick={() => nav('journal')}>Journal</li>
                <li onClick={() => nav('gift-cards')}>Gift cards</li>
                <li onClick={() => nav('saved')}>Saved</li>
              </ul>
            </div>
            <div>
              <h4>Providers</h4>
              <ul>
                <li onClick={() => nav('provider-setup')}>Join as a pro</li>
                <li onClick={() => nav('pricing')}>Pricing</li>
                <li onClick={() => nav('provider-analytics')}>Analytics</li>
                <li onClick={() => nav('seller-dashboard')}>Dashboard</li>
              </ul>
            </div>
            <div>
              <h4>Marketplace</h4>
              <ul>
                <li onClick={() => nav('marketplace')}>Shop</li>
                <li onClick={() => nav('product-create')}>Become a seller</li>
                <li onClick={() => nav('seller-dashboard')}>Seller hub</li>
                <li onClick={() => nav('gift-cards')}>Gift cards</li>
              </ul>
            </div>
            <div>
              <h4>Company</h4>
              <ul>
                <li onClick={() => nav('journal')}>Journal</li>
                <li onClick={() => nav('city-seo')}>Cities</li>
                <li onClick={() => nav('embed-widget')}>Embed</li>
                <li onClick={() => nav('admin')}>Admin</li>
              </ul>
            </div>
          </div>
          <div className="footer-bottom">
            <div>© 2026 CaribGlow · glowcarib.com</div>
            <div>Kingston · Port of Spain · Bridgetown · Nassau</div>
          </div>
        </div>
      </footer>
    </div>
  );
};

Object.assign(window, { LandingPage });