// CalGrillz — landing page content (uses shared shell).
//
// All editable copy/imagery is read from `window.CG_CONTENT`, which Laravel
// injects from the SiteContent CMS (admin: /mgmt/site-content). When a key
// hasn't been set, the schema default kicks in server-side so the page never
// renders with empty rectangles.
//
//   cgC('home.hero.title', '<fallback>')   → string (Blade has already
//                                            sanitized HTML content).
//   cgHtml(value)                          → React element with
//                                            dangerouslySetInnerHTML.
function cgC(key, fallback = '') {
  const v = (window.CG_CONTENT || {})[key];
  return (v === undefined || v === null || v === '') ? fallback : v;
}
function cgHtml(value) {
  return <span dangerouslySetInnerHTML={{ __html: value }}/>;
}

function CGWLandingPage() {
  return (
    <CGWPage active="home">
      <CGWHero/>
      <CGWTicker/>
      <CGWHot/>
      <CGWWhy/>
      <CGWGame/>
      <CGWEventsTeaser/>
      <CGWGallery/>
      <CGWStory/>
      <CGWFind/>
    </CGWPage>
  );
}

// ─── EVENTS TEASER ─────────────────────────────────────────
function CGWEventsTeaser() {
  return (
    <section style={{
      padding: '90px 0',
      background: 'linear-gradient(180deg, transparent, rgba(216,99,44,0.05))',
      borderTop: '1px solid var(--charcoal-700)',
    }}>
      <div className="cgw__wrap">
        <div className="cgw-section__head">
          <div>
            <div className="cgw-eyebrow ember">{cgC('home.events.eyebrow', 'Events & private bookings')}</div>
            <h2 className="cgw-h2">{cgHtml(cgC('home.events.title', 'More than dinner.<br/>Bring the <em style="font-style:italic" class="cgw-h2 flame">whole crew</em>.'))}</h2>
          </div>
          <p>{cgC('home.events.subtitle', 'Live music nights, fish-fry Sundays, weddings, corporate dinners. Walk in, RSVP, or book us for your event.')}</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr', gap: 14 }}>
          <a href={CG_URL('events', 'events.html')} style={{
            position: 'relative',
            borderRadius: 22,
            overflow: 'hidden',
            border: '1px solid var(--charcoal-700)',
            background: 'var(--charcoal-800)',
            minHeight: 320,
            textDecoration: 'none',
            display: 'block',
          }}>
            <div style={{ position: 'absolute', inset: 0, backgroundImage: `url(${cgC('home.events.bg_image', CG_ASSET('eating-table.jpg'))})`, backgroundSize: 'cover', backgroundPosition: 'center', filter: 'brightness(0.7)' }}/>
            <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(180deg, rgba(19,16,13,0.2) 30%, rgba(19,16,13,0.95) 100%)' }}/>
            <div style={{ position: 'absolute', top: 22, left: 22 }}>
              <span style={{ padding: '6px 12px', background: 'var(--flame)', color: 'var(--cream)', fontSize: 10, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', borderRadius: 999 }}>This Sunday</span>
            </div>
            <div style={{ position: 'absolute', bottom: 26, left: 28, right: 28 }}>
              <div className="cgw-eyebrow ember">Recurring · every Sunday</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 38, color: 'var(--cream)', marginTop: 6, lineHeight: 1.05, letterSpacing: '-0.01em' }}>Fish Fry Sundays</h3>
              <p style={{ fontSize: 13.5, color: 'var(--cream-dim)', marginTop: 10, lineHeight: 1.5, maxWidth: 420 }}>Point-and-kill catfish, whole tilapia, palm wine. Long tables, no menu. You eat what's on the pit.</p>
            </div>
          </a>
          <a href={CG_URL('events', 'events.html') + '#livemusic'} style={{
            padding: 26,
            background: 'var(--charcoal-800)',
            border: '1px solid var(--charcoal-700)',
            borderRadius: 18,
            textDecoration: 'none',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            minHeight: 320,
          }}>
            <div>
              <div className="cgw-eyebrow">Fri 23 May · 8 pm</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, color: 'var(--cream)', marginTop: 12, lineHeight: 1.1, letterSpacing: '-0.005em' }}>Highlife Friday</h3>
              <p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 10, lineHeight: 1.5 }}>Live highlife trio. Pepper soup specials all night.</p>
            </div>
            <div style={{
              marginTop: 18, fontSize: 11, color: 'var(--ember-200)',
              letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 600,
            }}>RSVP free →</div>
          </a>
          <a href={CG_URL('contact', 'contact.html') + '#book'} style={{
            padding: 26,
            background: 'linear-gradient(135deg, rgba(200,16,46,0.16), var(--charcoal-800))',
            border: '1px solid rgba(216,99,44,0.4)',
            borderRadius: 18,
            textDecoration: 'none',
            display: 'flex', flexDirection: 'column', justifyContent: 'space-between',
            minHeight: 320,
          }}>
            <div>
              <div className="cgw-eyebrow ember">Private bookings</div>
              <h3 style={{ fontFamily: 'var(--font-display)', fontSize: 28, color: 'var(--cream)', marginTop: 12, lineHeight: 1.1, letterSpacing: '-0.005em' }}>Host your event with us.</h3>
              <p style={{ fontSize: 13, color: 'var(--cream-dim)', marginTop: 10, lineHeight: 1.5 }}>Weddings, birthdays, corporate dinners. Pickup, delivery, or on-site pit.</p>
            </div>
            <div style={{
              marginTop: 18, fontSize: 11, color: 'var(--ember-200)',
              letterSpacing: '0.12em', textTransform: 'uppercase', fontWeight: 600,
            }}>Request a booking →</div>
          </a>
        </div>

        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 36 }}>
          <a href={CG_URL('events', 'events.html')} className="cgw-btn cgw-btn--ghost" style={{ textDecoration: 'none' }}>
            See all upcoming events
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
          </a>
        </div>
      </div>
    </section>
  );
}

// ─── HERO ───────────────────────────────────────────────────
function CGWHero() {
  const bg = cgC('home.hero.bg_image', CG_ASSET('hero-fish-platter.jpg'));
  return (
    <section className="cgw-hero">
      <div className="cgw-hero__bg" style={{ backgroundImage: `url(${bg})` }}/>
      <div className="cgw-hero__overlay"/>
      <div style={{ position: 'absolute', inset: 0, zIndex: 1, overflow: 'hidden', pointerEvents: 'none' }}>
        {Array.from({ length: 24 }).map((_, i) => {
          const left = (i * 53) % 100;
          const bottom = (i * 31) % 60;
          const dur = 3 + (i % 5);
          const delay = (i % 7) * 0.5;
          return (
            <span key={i} className="cg-ember" style={{
              left: left + '%',
              bottom: bottom + '%',
              width: 4 + (i % 3),
              height: 4 + (i % 3),
              animation: `ember-rise ${dur}s ease-out ${delay}s infinite`,
            }}/>
          );
        })}
      </div>

      <div className="cgw__wrap cgw-hero__inner">
        <div className="cgw-hero__copy">
          <span className="cgw-eyebrow" style={{ color: 'var(--ember-200)' }}>
            {cgC('home.hero.eyebrow', 'Agbor · Delta state · est. 2023')}
          </span>
          <h1>{cgHtml(cgC('home.hero.title', 'Fired-up.<br/><span class="flame">Nigerian grill.</span>'))}</h1>
          <p className="cgw-hero__sub">
            {cgC('home.hero.subtitle', 'Point-and-kill catfish, whole tilapia, shawarma off the coal pit.')}
          </p>
          <div className="cgw-hero__ctas">
            <a href={CG_URL('menu', 'menu.html')} className="cgw-btn cgw-btn--primary" style={{ textDecoration: 'none' }}>
              {cgC('home.hero.cta_order', 'Order online')}
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg>
            </a>
            <a href={CG_URL('rewards', 'me.html')} className="cgw-btn cgw-btn--ghost" style={{ textDecoration: 'none' }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2c1 3 3 4 3 7a3 3 0 0 1-3 3 3 3 0 0 1-3-3c0-1 1-2 1-3-2 1-4 4-4 7a6 6 0 0 0 12 0c0-5-4-8-6-11z"/></svg>
              {cgC('home.hero.cta_rewards', 'Open my rewards')}
            </a>
          </div>
          <div className="cgw-meta-row">
            <div>
              <div className="v"><span className="flame">{cgC('home.hero.hours_value', '10am–9pm')}</span></div>
              <div className="l">{cgC('home.hero.hours_label', 'Every day')}</div>
            </div>
            <div>
              <div className="v">{cgC('home.hero.pickup_value', '25 min')}</div>
              <div className="l">{cgC('home.hero.pickup_label', 'Avg pickup')}</div>
            </div>
            <div>
              <div className="v">{cgC('home.hero.rating_value', '4.9 ★')}</div>
              <div className="l">{cgC('home.hero.rating_label', '680+ orders')}</div>
            </div>
          </div>
        </div>

        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
          <div style={{
            position: 'absolute',
            width: 460, height: 460,
            borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(249,115,22,0.32) 0%, rgba(249,115,22,0) 60%)',
            filter: 'blur(20px)',
          }}/>
          <img src={CG_ASSET("calgrillz-logo.png")} alt="CalGrillz" style={{
            width: 480,
            height: 'auto',
            position: 'relative',
            filter: 'drop-shadow(0 20px 60px rgba(249,115,22,0.45)) drop-shadow(0 4px 12px rgba(0,0,0,0.6))',
          }}/>
        </div>
      </div>
    </section>
  );
}

// ─── WHAT'S HOT ─────────────────────────────────────────────
function CGWHot() {
  return (
    <section id="hot" className="cgw-section">
      <div className="cgw__wrap">
        <div className="cgw-section__head">
          <div>
            <span className="cgw-eyebrow ember">{cgC('home.hot.eyebrow', "Tonight's grill")}</span>
            <h2 className="cgw-h2">{cgHtml(cgC('home.hot.title', 'Hot off the<br/><span class="flame">charcoal</span>'))}</h2>
          </div>
          <p>{cgC('home.hot.note', "Real catch. Real fire. Five dishes our regulars don't stop ordering.")}</p>
        </div>

        {/* Featured items pulled from the REAL menu (was hardcoded to old demo
            slugs like "whole-tilapia" that no longer exist — every card returned
            null, leaving this whole section as a big empty gap). First item is
            the featured hero; the next four fill the grid. */}
        <div className="cgw-hot-grid">
          {CGW_MENU.slice(0, 5).map((m, i) => (
            i === 0
              ? <HotCardW key={m.slug} featured slug={m.slug} tagline="The signature" note={m.desc || undefined}/>
              : <HotCardW key={m.slug} slug={m.slug}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function HotCardW({ slug, tagline, note, featured }) {
  const item = CGW_MENU.find(m => m.slug === slug);
  if (!item) return null;
  return (
    <a href={(window.CG_URLS && window.CG_URLS.menu ? window.CG_URLS.menu + "/" : "/menu/") + item.slug} className={'cgw-hot-card' + (featured ? '' : ' cgw-hot-card--small')} style={{ textDecoration: 'none' }}>
      {item.img ? (
        <>
          <div className="cgw-hot-card__img" style={{ backgroundImage: `url(${CG_ASSET(item.img)})` }}/>
          <div className="cgw-hot-card__shade"/>
        </>
      ) : (
        // No photo uploaded yet — show a warm branded placeholder instead of a
        // near-black tile, so the section never looks like empty space.
        <div className="cgw-hot-card__img" style={{
          background: 'radial-gradient(130% 130% at 30% 20%, rgba(216,99,44,0.38), rgba(200,16,46,0.16) 45%, var(--charcoal-900) 82%)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>
          <span style={{ fontSize: 72, opacity: 0.55, filter: 'grayscale(0.1)' }}>🔥</span>
        </div>
      )}
      <div className="cgw-hot-card__badges">
        {item.tags.map(t => <CGWTag key={t} kind={t}/>)}
      </div>
      <div className="cgw-hot-card__body" style={!item.img ? { background: 'linear-gradient(180deg, transparent, rgba(10,10,10,0.95))' } : undefined}>
        {tagline && featured && <div className="cgw-eyebrow ember" style={{ fontSize: 11, marginBottom: 10 }}>{tagline}</div>}
        <div className="name">{item.name}</div>
        {note && featured && <div style={{ fontSize: 13, color: 'var(--cream-dim)', marginTop: 8, maxWidth: 360, lineHeight: 1.4 }}>{note}</div>}
        <div className="price">from {nairaW(item.priceFrom)}</div>
      </div>
    </a>
  );
}

function CGWWhy() {
  const items = [
    { n: '01', t: cgC('home.why.item1.title', 'Slow-grilled. Charcoal only.'), b: cgC('home.why.item1.body', 'Real wood charcoal, 6-hour burn, hand-rubbed marinade.') },
    { n: '02', t: cgC('home.why.item2.title', 'Earn while you eat.'), b: cgC('home.why.item2.body', 'Points on every plate. Tier up to gold for 1.25× points + birthday week perks.') },
    { n: '03', t: cgC('home.why.item3.title', 'Order from anywhere.'), b: cgC('home.why.item3.body', 'WhatsApp, web, or walk-in — same kitchen, same speed.') },
  ];
  return (
    <section className="cgw-section cgw-section--tight" style={{ background: 'linear-gradient(180deg, transparent, rgba(0,0,0,0.4))' }}>
      <div className="cgw__wrap">
        <div className="cgw-section__head">
          <div>
            <span className="cgw-eyebrow">{cgC('home.why.eyebrow', 'Why CalGrillz')}</span>
            <h2 className="cgw-h2">{cgHtml(cgC('home.why.title', 'Three things we do<br/>better than anyone.'))}</h2>
          </div>
        </div>
        <div className="cgw-why">
          {items.map(w => (
            <div key={w.n} className="cgw-why__card">
              <div className="cgw-why__num">{w.n}</div>
              <h3 className="cgw-why__title">{w.t}</h3>
              <p className="cgw-why__body">{w.b}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function CGWGame() {
  return (
    <section id="rewards" className="cgw-section">
      <div className="cgw__wrap">
        <div className="cgw-section__head">
          <div>
            <span className="cgw-eyebrow ember">{cgC('home.rewards.eyebrow', 'Earn while you eat')}</span>
            <h2 className="cgw-h2">{cgHtml(cgC('home.rewards.title', 'The grill rewards<br/>you back.'))}</h2>
          </div>
          <p>{cgC('home.rewards.subtitle', 'Four ways your visits add up. Stack them all if you can.')}</p>
        </div>
        <div className="cgw-game">
          <div className="cgw-game__card feature">
            <div className="cgw-game__icon"><svg width="32" height="32" viewBox="0 0 24 24"><defs><linearGradient id="cgwf1" x1="0" x2="0" y1="1" y2="0"><stop offset="0" stopColor="#c8102e"/><stop offset="0.5" stopColor="#f97316"/><stop offset="1" stopColor="#fbbf24"/></linearGradient></defs><path d="M12 2c1 3 3 4 3 7a3 3 0 0 1-3 3 3 3 0 0 1-3-3c0-1 1-2 1-3-2 1-4 4-4 7a6 6 0 0 0 12 0c0-5-4-8-6-11z" fill="url(#cgwf1)"/></svg></div>
            <h3 className="cgw-game__title">Visit streaks</h3>
            <p className="cgw-game__body">Eat once a week. Watch it grow. Hit 3 weeks for a free side. 10 weeks for ₦2,000 off.</p>
            <span className="cgw-game__badge">🔥 Hit 3 weeks for a free side</span>
          </div>
          <a href={CG_URL('spin', 'spin.html')} className="cgw-game__card" style={{ textDecoration: 'none', color: 'inherit' }}>
            <div className="cgw-game__icon"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" strokeWidth="2"><circle cx="12" cy="12" r="9"/><path d="M12 3v9l6 4" strokeLinecap="round"/></svg></div>
            <h3 className="cgw-game__title">Spin the wheel</h3>
            <p className="cgw-game__body">Every qualifying order earns one spin. Win a voucher, free side, double points or extra spin.</p>
            <span className="cgw-game__badge">🎰 ₦5,000 jackpot</span>
          </a>
          <a href={CG_URL('voucher', 'voucher.html')} className="cgw-game__card" style={{ textDecoration: 'none', color: 'inherit' }}>
            <div className="cgw-game__icon"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#f97316" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 12 20 22 4 22 4 12"/><rect x="2" y="7" width="20" height="5"/><line x1="12" y1="22" x2="12" y2="7"/><path d="M12 7H7.5a2.5 2.5 0 1 1 0-5C11 2 12 7 12 7zM12 7h4.5a2.5 2.5 0 1 0 0-5C13 2 12 7 12 7z"/></svg></div>
            <h3 className="cgw-game__title">Gift vouchers</h3>
            <p className="cgw-game__body">Send the gift of grill via WhatsApp. Pick an amount, write a note, hit send. From ₦500.</p>
            <span className="cgw-game__badge">🎁 New for 2026</span>
          </a>
          <div className="cgw-game__card">
            <div className="cgw-game__icon"><svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#fbbf24" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 11l3-8 3 5 3-7 3 7 3-5 3 8M3 11v8h18v-8M3 11h18"/></svg></div>
            <h3 className="cgw-game__title">VIP tiers</h3>
            <p className="cgw-game__body">Bronze → Silver → Gold → VIP. Earn up to 1.5× points per ₦100 plus first-look access to new dishes.</p>
            <span className="cgw-game__badge">👑 Up to 1.5×</span>
          </div>
        </div>
      </div>
    </section>
  );
}

function CGWGallery() {
  // Each gallery slot is admin-editable as home.gallery.image{1..6}; defaults
  // fall back to the original photo set.
  const tiles = [
    cgC('home.gallery.image1', CG_ASSET('grill-closeup.jpg')),
    cgC('home.gallery.image2', CG_ASSET('hands-platter.jpg')),
    cgC('home.gallery.image3', CG_ASSET('chef-prep.jpg')),
    cgC('home.gallery.image4', CG_ASSET('grill-station.jpg')),
    cgC('home.gallery.image5', CG_ASSET('security.jpg')),
    cgC('home.gallery.image6', CG_ASSET('grill-topdown.jpg')),
  ];
  return (
    <section className="cgw-section cgw-section--tight">
      <div className="cgw__wrap">
        <div className="cgw-section__head">
          <div>
            <span className="cgw-eyebrow">{cgC('home.gallery.eyebrow', 'From the pit')}</span>
            <h2 className="cgw-h2">{cgHtml(cgC('home.gallery.title', 'Last weekend at the grill.'))}</h2>
          </div>
        </div>
        <div className="cgw-gallery">
          {tiles.map((img, i) => (
            <div key={i} className="cgw-gallery__tile" style={{ backgroundImage: `url(${img})`, backgroundPosition: 'center' }}/>
          ))}
        </div>
      </div>
    </section>
  );
}

function CGWStory() {
  const storyMedia = cgC('home.story.media_image', CG_ASSET('server-platter.jpg'));
  // Reviews are admin-managed (window.CG_DATA.testimonials from /mgmt Testimonials) —
  // nothing hardcoded. Rotate through them; if there are none, the quote block hides.
  const reviews = (typeof window !== 'undefined' && window.CG_DATA && Array.isArray(window.CG_DATA.testimonials)) ? window.CG_DATA.testimonials : [];
  const [rIdx, setRIdx] = React.useState(0);
  React.useEffect(() => {
    if (reviews.length < 2) return;
    const id = setInterval(() => setRIdx(i => (i + 1) % reviews.length), 6000);
    return () => clearInterval(id);
  }, [reviews.length]);
  const rv = reviews[rIdx] || null;
  const stars = rv && rv.rating ? '★'.repeat(Math.max(1, Math.min(5, rv.rating))) : '';
  const meta = rv ? [rv.title, stars].filter(Boolean).join(' · ') : '';
  const avatar = (rv && rv.photo && !String(rv.photo).includes('/template/')) ? rv.photo : CG_ASSET('customer-eating.jpg');
  return (
    <section id="story" className="cgw-section">
      <div className="cgw__wrap">
        <div className="cgw-story">
          <div>
            {rv && (<>
            <span className="cgw-eyebrow ember">{cgC('home.story.eyebrow', 'What people say')}</span>
            <p className="cgw-story__quote">{rv.quote}</p>
            <div className="cgw-story__by">
              <div className="avatar" style={{ backgroundImage: `url(${avatar})` }}/>
              <div>
                <div className="name">{rv.name}</div>
                {meta && <div className="meta">{meta}</div>}
              </div>
            </div>
            </>)}
            <div style={{
              marginTop: 40,
              padding: '28px 32px',
              background: 'var(--charcoal-800)',
              border: '1px solid var(--charcoal-700)',
              borderRadius: 18,
              display: 'flex',
              gap: 32,
              alignItems: 'center',
              flexWrap: 'wrap',
            }}>
              <div>
                <div className="cgw-eyebrow">Story in three numbers</div>
                <h3 className="cgw-h2" style={{ fontSize: 38, marginTop: 8 }}>Since 2023.</h3>
              </div>
              <div style={{ display: 'flex', gap: 36 }}>
                {[['14k+','Plates served'],['3','Pit masters'],['1','Charcoal pit']].map(([v, l]) => (
                  <div key={l}>
                    <div style={{ fontFamily: 'var(--font-display)', fontSize: 38, color: 'var(--ember-200)', lineHeight: 1 }}>{v}</div>
                    <div style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 4 }}>{l}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
          <div className="cgw-story__media" style={{ backgroundImage: `url(${storyMedia})` }}>
            <div className="stamp">CalGrillz Agbor &nbsp;·&nbsp; Pit no.1 &nbsp;·&nbsp; Live now</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CGWFind() {
  return (
    <section id="find" className="cgw-section cgw-section--tight">
      <div className="cgw__wrap">
        <div className="cgw-section__head">
          <div>
            <span className="cgw-eyebrow">{cgC('home.find.eyebrow', 'Find us')}</span>
            <h2 className="cgw-h2">{cgHtml(cgC("home.find.title", "Hot from 10am.<br/><span class=\"flame\">Open every day.</span>"))}</h2>
          </div>
        </div>
        <div className="cgw-find">
          <div className="cgw-find__map">
            <svg width="100%" height="100%" viewBox="0 0 800 460" style={{ position: 'absolute', inset: 0 }}>
              <defs><pattern id="webgrid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="rgba(255,255,255,0.045)" strokeWidth="1"/></pattern></defs>
              <rect width="800" height="460" fill="url(#webgrid)"/>
              <path d="M 0 200 Q 200 180, 400 260 T 800 200" stroke="rgba(249,115,22,0.4)" strokeWidth="4" fill="none"/>
              <path d="M 100 0 L 200 460" stroke="rgba(255,255,255,0.1)" strokeWidth="3" fill="none"/>
              <path d="M 500 0 L 580 460" stroke="rgba(255,255,255,0.1)" strokeWidth="3" fill="none"/>
              <g transform="translate(420,220)">
                <circle r="38" fill="rgba(249,115,22,0.18)"/>
                <circle r="22" fill="rgba(200,16,46,0.4)"/>
                <circle r="12" fill="#c8102e"/>
                <circle r="4" fill="#fff"/>
              </g>
              <text x="420" y="190" textAnchor="middle" fill="var(--cream)" fontFamily="Anton" fontSize="22" letterSpacing="2">CALGRILLZ</text>
            </svg>
          </div>
          <div className="cgw-find__panel">
            <div className="cgw-find__row">
              <div className="icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#f97316" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z"/><circle cx="12" cy="10" r="3"/></svg></div>
              <div><div className="label">Address</div><div className="val">{cgC('home.find.address', 'No 1 Cocokalina Close, Agbor 330221, Delta State')}</div></div>
            </div>
            <div className="cgw-find__row">
              <div className="icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#f97316" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg></div>
              <div><div className="label">Hours</div><div className="val">{cgC('home.find.hours', 'Every day · 10:00 am – 9:00 pm')}<br/><span style={{ color: 'var(--success)', fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase' }}>● Open now</span></div></div>
            </div>
            <div className="cgw-find__row">
              <div className="icon"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="#f97316" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg></div>
              <div><div className="label">Phone</div><div className="val">{cgC('home.find.phone', '0708 570 1097')}</div></div>
            </div>
            <a href={cgC('home.find.cta_url', 'https://wa.me/2347085701097')} target="_blank" rel="noopener noreferrer" className="cgw-btn cgw-btn--primary" style={{ marginTop: 6, justifyContent: 'center', width: '100%', textDecoration: 'none' }}>
              <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M20.5 3.5a11 11 0 0 0-17.4 13L1 23l6.7-2a11 11 0 0 0 16.3-9.5 11 11 0 0 0-3.5-8z"/></svg>
              {cgC('home.find.cta', 'Order on WhatsApp')}
            </a>
          </div>
        </div>
      </div>
    </section>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<CGWLandingPage/>);