// CalGrillz — Contact page (also handles event booking via #book anchor)

function CGWContactPage() {
  const [topic, setTopic] = useState('general'); // 'general' | 'order' | 'event' | 'press'
  const [form, setForm] = useState({ name: '', phone: '', email: '', message: '' });
  const [event, setEvent] = useState({
    occasion: '',
    date: '',
    headcount: 20,
    style: 'pickup',  // pickup | delivery | onsite
    budget: '',
    venue: '',
    notes: '',
  });
  const [submitted, setSubmitted] = useState(false);

  // Auto-jump to event if URL hash is #book
  useEffect(() => {
    if (typeof window !== 'undefined' && window.location.hash === '#book') {
      setTopic('event');
      const el = document.getElementById('book');
      if (el) setTimeout(() => el.scrollIntoView({ behavior: 'instant' }), 100);
    }
  }, []);

  const handleSubmit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  if (submitted) {
    return (
      <CGWPage active="contact">
        <ContactSuccess topic={topic} onReset={() => setSubmitted(false)}/>
      </CGWPage>
    );
  }

  return (
    <CGWPage active="contact">
      <CGWPageHero
        eyebrow={cgC('contact.hero.eyebrow', 'Get in touch')}
        title={cgHtml(cgC('contact.hero.title', 'Holla at <span class="flame">us</span>.'))}
        sub={cgC('contact.hero.sub', 'Order question, event booking, press, or just to say hi — we read every message.')}
        breadcrumbs={[{ label: 'Home', href: CG_URL('home', 'index.html') }, { label: 'Contact' }]}
        image={cgC('contact.hero.image', 'hands-platter-2.jpg')}
      />

      {/* Quick contact strip */}
      <section style={{ padding: '40px 0 20px' }}>
        <div className="cgw__wrap" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14 }}>
          <QuickCard icon="📞" label="Call us" value={cgC('contact.phone', '0708 570 1097')} sub={cgC('contact.hours', 'Every day, 10am – 9pm')} href={'tel:' + cgC('contact.phone', '0708 570 1097').replace(/\s+/g, '')}/>
          <QuickCard icon={<CGSocialIcon name="whatsapp" size={28}/>} label="WhatsApp" value="Chat now" sub="Average reply: 6 min" href={'https://wa.me/' + cgC('contact.whatsapp', '2347085701097')} highlight/>
          <QuickCard icon="✉️" label="Email" value={cgC('contact.email', 'hello@calgrillz.ng')} sub="Reply within 24h" href={'mailto:' + cgC('contact.email', 'hello@calgrillz.ng')}/>
        </div>
      </section>

      <section style={{ padding: '40px 0 100px' }}>
        <div className="cgw__wrap" style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 56, alignItems: 'flex-start' }}>
          {/* LEFT: info */}
          <aside style={{ position: 'sticky', top: 100 }}>
            <div className="cgw-eyebrow">Visit the pit</div>
            <h2 className="cgw-h2" style={{ fontSize: 48, marginTop: 8 }}>Cocokalina,<br/>Agbor.</h2>
            <div style={{ fontSize: 14, color: 'var(--cream-dim)', lineHeight: 1.65, marginTop: 16 }}>
              No 1 Cocokalina Close<br/>
              Agbor 330221<br/>
              Delta State, Nigeria
            </div>

            <div style={{ display: 'grid', gap: 16, marginTop: 28 }}>
              <InfoBlock icon="🕒" label="Hours">
                {cgC('contact.hours', 'Every day, 10am – 9pm')}<br/>
                <span style={{ color: 'var(--success)', fontSize: 12, fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase' }}>● Open now</span>
              </InfoBlock>
              <InfoBlock icon="🚗" label="Parking">Free on Cocokalina Close · gated</InfoBlock>
              <InfoBlock icon="🛵" label="Delivery zone">All Agbor · within ~45 min</InfoBlock>
            </div>

            {/* socials */}
            <div style={{ marginTop: 32 }}>
              <div className="cgw-eyebrow" style={{ marginBottom: 10 }}>Follow</div>
              <CGSocialLinks className="cgw-contact__social-links" size={18}/>
              <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 8 }}>@calgrillz on Instagram, TikTok &amp; Facebook</div>
            </div>
          </aside>

          {/* RIGHT: form */}
          <div>
            <div className="cgw-eyebrow ember">Send us a message</div>
            <h2 className="cgw-h2" style={{ fontSize: 48, marginTop: 8, marginBottom: 24 }}>What's it about?</h2>

            {/* Topic switcher */}
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8, marginBottom: 24 }}>
              {[
                { id: 'general', label: 'General', icon: '💬' },
                { id: 'order',   label: 'Order issue', icon: '🛒' },
                { id: 'event',   label: 'Event booking', icon: '🎉' },
                { id: 'press',   label: 'Press', icon: '📰' },
              ].map(t => (
                <button key={t.id} onClick={() => setTopic(t.id)} style={{
                  background: topic === t.id ? 'var(--cream)' : 'var(--charcoal-800)',
                  color: topic === t.id ? 'var(--charcoal-900)' : 'var(--cream)',
                  border: '1px solid ' + (topic === t.id ? 'var(--cream)' : 'var(--charcoal-700)'),
                  borderRadius: 12, padding: '14px 10px',
                  cursor: 'pointer', textAlign: 'left',
                  transition: 'all 0.15s',
                }}>
                  <div style={{ fontSize: 22, marginBottom: 6 }}>{t.icon}</div>
                  <div style={{ fontSize: 13, fontWeight: 600 }}>{t.label}</div>
                </button>
              ))}
            </div>

            <form onSubmit={handleSubmit} id={topic === 'event' ? 'book' : undefined} style={{
              padding: 28,
              background: 'var(--charcoal-800)',
              border: '1px solid var(--charcoal-700)',
              borderRadius: 18,
              display: 'grid', gap: 16,
            }}>
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                <CField label="Your name" value={form.name} onChange={(v) => setForm({...form, name: v})} required/>
                <CField label="Phone" value={form.phone} onChange={(v) => setForm({...form, phone: v})} placeholder="+234..." mono required/>
              </div>
              <CField label="Email" value={form.email} onChange={(v) => setForm({...form, email: v})} type="email" required/>

              {/* event-specific fields */}
              {topic === 'event' && (
                <>
                  <div style={{
                    padding: '14px 16px',
                    background: 'rgba(216,99,44,0.08)',
                    border: '1px solid rgba(216,99,44,0.25)',
                    borderRadius: 12,
                    fontSize: 13, color: 'var(--cream-dim)', lineHeight: 1.55,
                    marginTop: 4,
                  }}>
                    <strong style={{ color: 'var(--ember-200)', fontWeight: 600 }}>Book CalGrillz for your event.</strong> Birthdays, weddings, corporate dinners, get-togethers. Pickup, delivery to your venue, or we cook on-site.
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 12 }}>
                    <CField label="Occasion" value={event.occasion} onChange={(v) => setEvent({...event, occasion: v})} placeholder="e.g. wedding reception" required/>
                    <CField label="Event date" value={event.date} onChange={(v) => setEvent({...event, date: v})} type="date" required/>
                  </div>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                    <CField label="Expected headcount" value={event.headcount} onChange={(v) => setEvent({...event, headcount: parseInt(v) || 0})} type="number" required/>
                    <CField label="Budget (₦)" value={event.budget} onChange={(v) => setEvent({...event, budget: v})} placeholder="e.g. 300,000" mono/>
                  </div>

                  <div>
                    <div className="cgw-eyebrow" style={{ marginBottom: 10 }}>How do you want it served?</div>
                    <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
                      {[
                        { id: 'pickup', label: 'Pickup', sub: 'You collect at the pit', icon: '🏃' },
                        { id: 'delivery', label: 'Delivery', sub: 'Hot to your venue', icon: '🛵' },
                        { id: 'onsite', label: 'On-site grill', sub: 'We bring the fire', icon: '🔥' },
                      ].map(s => (
                        <button key={s.id} type="button" onClick={() => setEvent({...event, style: s.id})} style={{
                          background: event.style === s.id ? 'linear-gradient(135deg, rgba(200,16,46,0.12), var(--charcoal-900))' : 'var(--charcoal-900)',
                          color: 'var(--cream)',
                          border: '1px solid ' + (event.style === s.id ? 'var(--ember-500)' : 'var(--charcoal-700)'),
                          borderRadius: 12, padding: '14px 12px',
                          cursor: 'pointer', textAlign: 'left',
                        }}>
                          <div style={{ fontSize: 20, marginBottom: 6 }}>{s.icon}</div>
                          <div style={{ fontSize: 13, fontWeight: 600 }}>{s.label}</div>
                          <div style={{ fontSize: 11, color: 'var(--muted)', marginTop: 4 }}>{s.sub}</div>
                        </button>
                      ))}
                    </div>
                  </div>

                  {event.style !== 'pickup' && (
                    <CField label={event.style === 'onsite' ? 'Where should we set up?' : 'Delivery venue / address'} value={event.venue} onChange={(v) => setEvent({...event, venue: v})} required/>
                  )}
                </>
              )}

              <CField
                label={
                  topic === 'event' ? 'Anything else we should know?' :
                  topic === 'order' ? 'Order number + what happened' :
                  topic === 'press' ? 'What are you working on?' :
                  'Your message'
                }
                value={form.message}
                onChange={(v) => setForm({...form, message: v})}
                textarea required={topic !== 'event'}
                placeholder={
                  topic === 'event' ? 'Allergies, dietary needs, dish preferences, music…' :
                  topic === 'order' ? 'e.g. CG-2401-A8K3 was missing the plantain' :
                  'Tell us more.'
                }
              />

              <button type="submit" className="cgw-btn cgw-btn--primary" style={{ marginTop: 8, justifyContent: 'center', padding: 18 }}>
                {topic === 'event' ? 'Request booking' : 'Send message'}
                <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>
              </button>

              <div style={{ fontSize: 11, color: 'var(--muted)', textAlign: 'center', lineHeight: 1.5 }}>
                {topic === 'event'
                  ? <>We'll get back within 2 hours with a quote and availability.</>
                  : <>Average reply time: under 24 hours.</>
                }
              </div>
            </form>
          </div>
        </div>
      </section>

      {/* Map band */}
      <section style={{ padding: '60px 0 100px', borderTop: '1px solid var(--charcoal-700)' }}>
        <div className="cgw__wrap">
          <div className="cgw-section__head">
            <div>
              <div className="cgw-eyebrow">The location</div>
              <h2 className="cgw-h2">Easier to find than the<br/>WhatsApp link suggests.</h2>
            </div>
          </div>
          <div style={{
            background: 'linear-gradient(135deg, #1a1612 0%, #13100d 100%)',
            border: '1px solid var(--charcoal-700)',
            borderRadius: 22,
            position: 'relative',
            overflow: 'hidden',
            minHeight: 380,
          }}>
            <iframe
              title="CalGrillz Agbor on Google Maps"
              src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3966.0392627835586!2d6.2196456749906615!3d6.258558593729985!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x10414f3027910785%3A0x59249f13d64f365d!2sCalgrillz!5e0!3m2!1sen!2sng!4v1784786216754!5m2!1sen!2sng"
              width="100%" height="420" style={{ border: 0, display: 'block' }}
              allowFullScreen loading="lazy" referrerPolicy="strict-origin-when-cross-origin"
            />
            <div style={{
              position: 'absolute',
              right: 28, bottom: 28,
              display: 'flex', gap: 10,
            }}>
              <a href={cgC('contact.maps_url', 'https://www.google.com/maps?q=CalGrillz+Agbor')} target="_blank" rel="noopener noreferrer" className="cgw-btn cgw-btn--ghost" style={{ background: 'rgba(19,16,13,0.7)', backdropFilter: 'blur(10px)', textDecoration: 'none' }}>
                Open in Google Maps
              </a>
            </div>
          </div>
        </div>
      </section>
    </CGWPage>
  );
}

function QuickCard({ icon, label, value, sub, href, highlight }) {
  return (
    <a href={href} style={{
      padding: 22,
      background: highlight ? 'linear-gradient(135deg, rgba(37,211,102,0.14), var(--charcoal-800))' : 'var(--charcoal-800)',
      border: '1px solid ' + (highlight ? 'rgba(37,211,102,0.4)' : 'var(--charcoal-700)'),
      borderRadius: 16,
      textDecoration: 'none',
      display: 'flex', alignItems: 'center', gap: 16,
      transition: 'transform 0.15s',
    }}>
      <span style={{ fontSize: 28, flexShrink: 0 }}>{icon}</span>
      <div>
        <div style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.16em', textTransform: 'uppercase', fontWeight: 600 }}>{label}</div>
        <div style={{ fontFamily: 'var(--font-display)', fontSize: 22, color: 'var(--cream)', marginTop: 2, letterSpacing: '-0.005em' }}>{value}</div>
        <div style={{ fontSize: 12, color: 'var(--muted)', marginTop: 2 }}>{sub}</div>
      </div>
    </a>
  );
}

function InfoBlock({ icon, label, children }) {
  return (
    <div style={{ display: 'flex', gap: 14, alignItems: 'flex-start' }}>
      <div style={{
        width: 38, height: 38, borderRadius: 10,
        background: 'rgba(216,99,44,0.12)',
        border: '1px solid rgba(216,99,44,0.3)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontSize: 18, flexShrink: 0,
      }}>{icon}</div>
      <div>
        <div style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600 }}>{label}</div>
        <div style={{ fontSize: 14, color: 'var(--cream-dim)', marginTop: 4, lineHeight: 1.5 }}>{children}</div>
      </div>
    </div>
  );
}

function CField({ label, value, onChange, placeholder, type = 'text', mono, textarea, required }) {
  const Input = textarea ? 'textarea' : 'input';
  return (
    <label style={{ display: 'block' }}>
      <div style={{ fontSize: 11, color: 'var(--muted)', letterSpacing: '0.14em', textTransform: 'uppercase', fontWeight: 600, marginBottom: 8 }}>
        {label}{required && <span style={{ color: 'var(--ember-300)', marginLeft: 4 }}>·</span>}
      </div>
      <Input
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        type={textarea ? undefined : type}
        rows={textarea ? 4 : undefined}
        required={required}
        style={{
          width: '100%',
          background: 'var(--charcoal-900)',
          border: '1px solid var(--charcoal-700)',
          borderRadius: 12, padding: '13px 16px',
          color: 'var(--cream)',
          fontFamily: mono ? 'var(--font-mono)' : 'inherit',
          fontSize: 14, outline: 'none', resize: 'none',
          letterSpacing: mono ? '0.04em' : 0,
        }}
      />
    </label>
  );
}

function ContactSuccess({ topic, onReset }) {
  const titles = {
    general: 'Message sent.',
    order:   'We\'re on it.',
    event:   'Request received.',
    press:   'Thanks for reaching out.',
  };
  const subs = {
    general: 'We\'ll reply within 24 hours.',
    order:   'A team member will WhatsApp you within an hour.',
    event:   'We\'ll review and reply with a quote within 2 hours.',
    press:   'A coordinator will get back within 24 hours.',
  };
  return (
    <>
      <section style={{ padding: '120px 0 80px', position: 'relative', overflow: 'hidden', textAlign: 'center', background: 'linear-gradient(180deg, var(--charcoal-850), var(--charcoal-900))', borderBottom: '1px solid var(--charcoal-700)' }}>
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
          {Array.from({ length: 14 }).map((_, i) => (
            <span key={i} className="cg-ember" style={{
              left: `${(i * 17) % 100}%`, bottom: `${(i * 11) % 50}%`,
              width: 3 + (i % 3), height: 3 + (i % 3),
              animation: `ember-rise ${3 + (i % 4)}s ease-out ${(i % 6) * 0.4}s infinite`,
            }}/>
          ))}
        </div>
        <div className="cgw__wrap" style={{ position: 'relative' }}>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '8px 18px', borderRadius: 999,
            background: 'rgba(95,163,119,0.15)',
            border: '1px solid rgba(95,163,119,0.35)',
            color: 'var(--success)',
            fontSize: 12, fontWeight: 600, letterSpacing: '0.14em', textTransform: 'uppercase',
          }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
            Sent
          </div>
          <h1 className="cgw-h2" style={{ fontSize: 72, marginTop: 20 }}>
            {titles[topic]}
          </h1>
          <p style={{ fontSize: 17, color: 'var(--cream-dim)', maxWidth: 560, margin: '14px auto 0', lineHeight: 1.55 }}>
            {subs[topic]} Keep an eye on your phone — we like to follow up on WhatsApp first.
          </p>

          <div style={{ display: 'flex', gap: 12, justifyContent: 'center', marginTop: 36 }}>
            <a href={CG_URL('home', 'index.html')} className="cgw-btn cgw-btn--primary" style={{ textDecoration: 'none' }}>
              Back to home
            </a>
            <button onClick={onReset} className="cgw-btn cgw-btn--ghost">
              Send another →
            </button>
          </div>
        </div>
      </section>
    </>
  );
}

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