// heritage/footer.jsx — final CTA + footer with event/concierge modals

// ─── Event Enquiry Modal ─────────────────────────────────────────
function EnquiryModal({ onClose, theme }) {
  const [form, setForm] = React.useState({ name: '', email: '', type: 'Wedding', date: '', guests: '', message: '' });
  const [sent, setSent] = React.useState(false);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email) return;
    setSent(true);
  };

  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = ''; document.removeEventListener('keydown', onKey); };
  }, [onClose]);

  const inp = (extra = {}) => ({
    width: '100%', background: 'transparent', border: 'none',
    borderBottom: `1px solid ${theme.ink}25`, outline: 'none',
    fontFamily: theme.serif, fontSize: 16, color: theme.ink,
    padding: '10px 0', marginBottom: 22, boxSizing: 'border-box',
    ...extra,
  });
  const lbl = { fontFamily: theme.sans, fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: theme.ink, opacity: 0.5, display: 'block', marginBottom: 6 };

  return ReactDOM.createPortal(
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 100,
      background: 'rgba(20,16,12,0.65)', backdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '40px 20px',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background: theme.cream, width: '100%', maxWidth: 520,
        padding: '40px 36px 36px', position: 'relative',
        maxHeight: 'calc(100vh - 80px)', overflowY: 'auto',
      }}>
        <button onClick={onClose} style={{ position: 'absolute', top: 14, right: 16, background: 'transparent', border: 'none', cursor: 'pointer', fontSize: 20, color: theme.ink, lineHeight: 1 }}>×</button>

        <Caps size={10} color={theme.oxblood} ls={0.28} style={{ fontFamily: theme.sans }}>Events & Weddings</Caps>
        <h2 style={{ fontFamily: theme.serif, fontSize: 34, fontWeight: 400, color: theme.ink, margin: '12px 0 28px', letterSpacing: '-0.01em', lineHeight: 1.1 }}>
          Tell us about your event.
        </h2>

        {sent ? (
          <div style={{ fontFamily: theme.serif, fontStyle: 'italic', fontSize: 20, color: theme.ink, lineHeight: 1.6, paddingBottom: 8 }}>
            Thank you. We will be in touch within 24 hours.
          </div>
        ) : (
          <form onSubmit={submit}>
            <label style={lbl}>Name</label>
            <input value={form.name} onChange={e => set('name', e.target.value)} style={inp()} placeholder="Your name" required />

            <label style={lbl}>Email</label>
            <input type="email" value={form.email} onChange={e => set('email', e.target.value)} style={inp()} placeholder="your@email.com" required />

            <label style={lbl}>Event type</label>
            <select value={form.type} onChange={e => set('type', e.target.value)} style={inp({ cursor: 'pointer' })}>
              <option>Wedding</option>
              <option>Private Dinner</option>
              <option>Birthday & Celebrations</option>
              <option>Corporate</option>
            </select>

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
              <div>
                <label style={lbl}>Preferred date</label>
                <input value={form.date} onChange={e => set('date', e.target.value)} style={inp()} placeholder="Month / Year" />
              </div>
              <div>
                <label style={lbl}>Guest count</label>
                <input value={form.guests} onChange={e => set('guests', e.target.value)} style={inp()} placeholder="Approx. number" />
              </div>
            </div>

            <label style={lbl}>Message</label>
            <textarea value={form.message} onChange={e => set('message', e.target.value)}
              rows={3} style={{ ...inp({ resize: 'vertical', fontStyle: 'italic' }) }}
              placeholder="Tell us what you have in mind..." />

            <button type="submit" style={{
              background: theme.oxblood, color: theme.cream, border: 'none',
              padding: '16px 40px', fontFamily: theme.sans, fontSize: 11,
              letterSpacing: '0.18em', textTransform: 'uppercase', cursor: 'pointer', fontWeight: 500,
            }}>
              Send enquiry
            </button>
          </form>
        )}
      </div>
    </div>,
    document.body
  );
}

// ─── Concierge / Custom Packages Modal ──────────────────────────
function ConciergeModal({ onClose, theme }) {
  const [form, setForm] = React.useState({ name: '', email: '', tea: false, south: false, north: false, dates: '', size: '', message: '' });
  const [sent, setSent] = React.useState(false);

  const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email) return;
    setSent(true);
  };

  React.useEffect(() => {
    document.body.style.overflow = 'hidden';
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    document.addEventListener('keydown', onKey);
    return () => { document.body.style.overflow = ''; document.removeEventListener('keydown', onKey); };
  }, [onClose]);

  const inp = (extra = {}) => ({
    width: '100%', background: 'transparent', border: 'none',
    borderBottom: `1px solid ${theme.ink}25`, outline: 'none',
    fontFamily: theme.serif, fontSize: 16, color: theme.ink,
    padding: '10px 0', marginBottom: 22, boxSizing: 'border-box',
    ...extra,
  });
  const lbl = { fontFamily: theme.sans, fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase', color: theme.ink, opacity: 0.5, display: 'block', marginBottom: 6 };

  const interests = [
    { k: 'tea',   label: 'Tea Country — Nuwara Eliya & the hill estates' },
    { k: 'south', label: 'Mirissa & the South Coast' },
    { k: 'north', label: 'Jaffna & the North' },
  ];

  return ReactDOM.createPortal(
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 100,
      background: 'rgba(20,16,12,0.65)', backdropFilter: 'blur(6px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '40px 20px',
    }}>
      <div onClick={e => e.stopPropagation()} style={{
        background: theme.cream, width: '100%', maxWidth: 520,
        padding: '40px 36px 36px', position: 'relative',
        maxHeight: 'calc(100vh - 80px)', overflowY: 'auto',
      }}>
        <button onClick={onClose} style={{ position: 'absolute', top: 14, right: 16, background: 'transparent', border: 'none', cursor: 'pointer', fontSize: 20, color: theme.ink, lineHeight: 1 }}>×</button>

        <Caps size={10} color={theme.oxblood} ls={0.28} style={{ fontFamily: theme.sans }}>Concierge & Custom Packages</Caps>
        <h2 style={{ fontFamily: theme.serif, fontSize: 34, fontWeight: 400, color: theme.ink, margin: '12px 0 28px', letterSpacing: '-0.01em', lineHeight: 1.1 }}>
          Let us plan your Sri Lanka.
        </h2>

        {sent ? (
          <div style={{ fontFamily: theme.serif, fontStyle: 'italic', fontSize: 20, color: theme.ink, lineHeight: 1.6, paddingBottom: 8 }}>
            Thank you. We will be in touch within 24 hours.
          </div>
        ) : (
          <form onSubmit={submit}>
            <label style={lbl}>Name</label>
            <input value={form.name} onChange={e => set('name', e.target.value)} style={inp()} placeholder="Your name" required />

            <label style={lbl}>Email</label>
            <input type="email" value={form.email} onChange={e => set('email', e.target.value)} style={inp()} placeholder="your@email.com" required />

            <label style={{ ...lbl, marginBottom: 14 }}>Where would you like to go?</label>
            {interests.map(({ k, label }) => (
              <label key={k} onClick={() => set(k, !form[k])} style={{ display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer', marginBottom: 14 }}>
                <span style={{
                  width: 18, height: 18, border: `1px solid ${theme.ink}44`, flexShrink: 0,
                  background: form[k] ? theme.oxblood : 'transparent',
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  transition: 'background .15s',
                }}>
                  {form[k] && <span style={{ color: theme.cream, fontSize: 11, lineHeight: 1 }}>✓</span>}
                </span>
                <span style={{ fontFamily: theme.serif, fontSize: 15, color: theme.ink }}>{label}</span>
              </label>
            ))}

            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20, marginTop: 8 }}>
              <div>
                <label style={lbl}>Travel dates</label>
                <input value={form.dates} onChange={e => set('dates', e.target.value)} style={inp()} placeholder="e.g. March 2026" />
              </div>
              <div>
                <label style={lbl}>Party size</label>
                <input value={form.size} onChange={e => set('size', e.target.value)} style={inp()} placeholder="No. of people" />
              </div>
            </div>

            <label style={lbl}>Anything else</label>
            <textarea value={form.message} onChange={e => set('message', e.target.value)}
              rows={3} style={{ ...inp({ resize: 'vertical', fontStyle: 'italic' }) }}
              placeholder="Special requirements, questions, or requests..." />

            <button type="submit" style={{
              background: theme.oxblood, color: theme.cream, border: 'none',
              padding: '16px 40px', fontFamily: theme.sans, fontSize: 11,
              letterSpacing: '0.18em', textTransform: 'uppercase', cursor: 'pointer', fontWeight: 500,
            }}>
              Send enquiry
            </button>
          </form>
        )}
      </div>
    </div>,
    document.body
  );
}

// ─── Footer ──────────────────────────────────────────────────────
function HeritageFooter({ theme, mobile }) {
  const [email, setEmail] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const [showEvents, setShowEvents] = React.useState(false);
  const [showConcierge, setShowConcierge] = React.useState(false);

  // Expose globally so tours section and other components can trigger modals
  React.useEffect(() => {
    window._openEnquiry = () => setShowEvents(true);
    window._openConcierge = () => setShowConcierge(true);
    return () => { delete window._openEnquiry; delete window._openConcierge; };
  }, []);

  const submit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) return;
    setSubmitted(true);
    setTimeout(() => { setSubmitted(false); setEmail(''); }, 3000);
  };

  const px = mobile ? 24 : 56;
  const btnBase = {
    fontFamily: theme.sans, fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase',
    cursor: 'pointer', fontWeight: 500, padding: '22px 40px', minWidth: 260,
    transition: 'background .2s, color .2s, border-color .2s',
  };

  return (
    <>
      {/* Final CTA */}
      <section id="journal" style={{ background: theme.ink, color: theme.cream, padding: `${theme.sp(120)}px ${px}px ${theme.sp(80)}px` }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
          <div data-reveal>
            <Caps size={10} color={theme.gilt} ls={0.3} style={{ fontFamily: theme.sans }}>Plan your visit</Caps>
          </div>
          <h2 data-reveal data-reveal-delay="1" style={{
            fontFamily: theme.serif, fontSize: 'clamp(48px, 8vw, 120px)',
            lineHeight: 0.95, fontWeight: 400, margin: '24px 0 32px', letterSpacing: '-0.02em',
          }}>
            Book a room, or <em style={{ fontStyle: 'italic', color: theme.gilt }}>the whole journey</em>.
          </h2>
          <div data-reveal data-reveal-delay="2" style={{
            fontFamily: theme.serif, fontStyle: 'italic', fontSize: 20,
            opacity: 0.75, marginBottom: 44, maxWidth: 580, marginInline: 'auto', lineHeight: 1.4,
          }}>
            We arrange everything from Colombo — airport transfer, private driver, tea estate tour, and the room waiting at the end of it.
          </div>
          <div data-reveal data-reveal-delay="3" style={{ display: 'flex', justifyContent: 'center', gap: 16, flexWrap: 'wrap' }}>
            <button
              onClick={() => document.querySelector('#top')?.scrollIntoView({ behavior: 'smooth' })}
              style={{ ...btnBase, background: theme.cream, color: theme.ink, border: 'none' }}
              onMouseEnter={(e) => { e.currentTarget.style.background = theme.oxblood; e.currentTarget.style.color = theme.cream; }}
              onMouseLeave={(e) => { e.currentTarget.style.background = theme.cream; e.currentTarget.style.color = theme.ink; }}>
              Reserve a room
            </button>
            <button
              onClick={() => setShowConcierge(true)}
              style={{ ...btnBase, background: 'transparent', color: theme.cream, border: `1px solid ${theme.cream}66` }}
              onMouseEnter={(e) => e.currentTarget.style.borderColor = theme.cream}
              onMouseLeave={(e) => e.currentTarget.style.borderColor = `${theme.cream}66`}>
              Enquire about packages
            </button>
          </div>
        </div>

        {/* Newsletter */}
        <div data-reveal style={{ maxWidth: 720, margin: `${theme.sp(96)}px auto 0`, textAlign: 'center', borderTop: `1px solid ${theme.cream}22`, paddingTop: 56 }}>
          <Caps size={10} color={theme.gilt} ls={0.28} style={{ fontFamily: theme.sans }}>Subscribe to the Journal</Caps>
          <div style={{ fontFamily: theme.serif, fontStyle: 'italic', fontSize: 18, color: theme.cream, opacity: 0.75, marginTop: 12, marginBottom: 24 }}>
            Quarterly letters from the house and occasional seasonal offers.
          </div>
          <form onSubmit={submit} style={{ display: 'flex', justifyContent: 'center', maxWidth: 480, margin: '0 auto', borderBottom: `1px solid ${theme.cream}55` }}>
            <input type="email" value={email} onChange={(e) => setEmail(e.target.value)}
              placeholder="your.name@somewhere.com"
              style={{
                flex: 1, background: 'transparent', border: 'none', outline: 'none',
                color: theme.cream, fontFamily: theme.serif, fontStyle: 'italic', fontSize: 16,
                padding: '12px 0', textAlign: 'center',
              }} />
            <button type="submit" style={{
              background: 'transparent', color: submitted ? theme.gilt : theme.cream, border: 'none',
              padding: '12px 20px', fontFamily: theme.sans, fontSize: 11, letterSpacing: '0.18em',
              textTransform: 'uppercase', cursor: 'pointer', transition: 'color .25s',
            }}>
              {submitted ? '✓ Thank you' : 'Subscribe →'}
            </button>
          </form>
        </div>
      </section>

      {/* Footer */}
      <footer style={{ background: theme.ink, color: theme.cream, padding: `${mobile ? 40 : 56}px ${px}px ${mobile ? 32 : 40}px`, borderTop: `1px solid ${theme.cream}15` }}>
        <div style={{ maxWidth: 1280, margin: '0 auto' }}>
          <div style={{ display: 'grid', gridTemplateColumns: mobile ? '1fr 1fr' : '1.6fr 1fr 1fr 1fr', gap: mobile ? 32 : 40 }}>

            <div style={ mobile ? { gridColumn: 'span 2' } : {} }>
              <Wordmark size={26} color={theme.cream} accentColor={theme.gilt} />
              <a href="https://maps.app.goo.gl/APqfKdJ5MjuGXPfv5" target="_blank" rel="noopener noreferrer"
                style={{ display: 'block', fontFamily: theme.serif, fontSize: 14, opacity: 0.6, marginTop: 22, lineHeight: 1.6, color: 'inherit', textDecoration: 'none', transition: 'opacity .2s' }}
                onMouseEnter={(e) => e.currentTarget.style.opacity = 1}
                onMouseLeave={(e) => e.currentTarget.style.opacity = 0.6}>
                48 Vajira Mawatha<br />
                Nuwara Eliya 22200, Sri Lanka<br />
                +94 52 222 2881
              </a>
            </div>

            <div>
              <Caps size={10} color={theme.cream} ls={0.22} style={{ fontFamily: theme.sans, opacity: 0.55 }}>The House</Caps>
              <div style={{ marginTop: 16, fontFamily: theme.serif, fontSize: 15, lineHeight: 2, opacity: 0.85 }}>
                {[['Rooms & Suites', '#rooms'], ['Dining', '#dining'], ['High Tea', '#dining'], ['The Estate', '#estate']].map(([label, href]) => (
                  <a key={label} href={href} style={{ display: 'block', color: 'inherit', textDecoration: 'none' }} className="footer-link">{label}</a>
                ))}
              </div>
            </div>

            <div>
              <Caps size={10} color={theme.cream} ls={0.22} style={{ fontFamily: theme.sans, opacity: 0.55 }}>Visit</Caps>
              <div style={{ marginTop: 16, fontFamily: theme.serif, fontSize: 15, lineHeight: 2, opacity: 0.85 }}>
                <a href="#top" style={{ display: 'block', color: 'inherit', textDecoration: 'none' }} className="footer-link">Reservations</a>
                <a href="https://maps.app.goo.gl/APqfKdJ5MjuGXPfv5" target="_blank" rel="noopener noreferrer" style={{ display: 'block', color: 'inherit', textDecoration: 'none' }} className="footer-link">How to arrive</a>
                <div onClick={() => setShowConcierge(true)} style={{ cursor: 'pointer' }} className="footer-link">Concierge</div>
                <div onClick={() => setShowEvents(true)} style={{ cursor: 'pointer' }} className="footer-link">Weddings</div>
                <a href="#tours" style={{ display: 'block', color: 'inherit', textDecoration: 'none' }} className="footer-link">Tours</a>
              </div>
            </div>

            <div>
              <Caps size={10} color={theme.cream} ls={0.22} style={{ fontFamily: theme.sans, opacity: 0.55 }}>Info</Caps>
              <div style={{ marginTop: 16, fontFamily: theme.serif, fontSize: 15, lineHeight: 2, opacity: 0.85 }}>
                <a href="mailto:letters@littleengland.lk" style={{ display: 'block', color: 'inherit', textDecoration: 'none' }} className="footer-link">Contact</a>
                <a href="/privacy.html" style={{ display: 'block', color: 'inherit', textDecoration: 'none' }} className="footer-link">Privacy</a>
              </div>
            </div>

          </div>

          <div style={{ marginTop: 56, paddingTop: 32, borderTop: `1px solid ${theme.cream}22`, display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24, flexWrap: 'wrap' }}>
            <Caps size={9} color={theme.cream} ls={0.18} style={{ fontFamily: theme.sans, opacity: 0.4 }}>
              © MMXXVI · Little England Grand Hotel
            </Caps>
            <Caps size={9} color={theme.cream} ls={0.18} style={{ fontFamily: theme.sans, opacity: 0.4 }}>
              letters@littleengland.lk
            </Caps>
          </div>
        </div>
      </footer>

      <style>{`
        .footer-link { transition: color .2s, padding-left .2s; }
        .footer-link:hover { color: ${theme.gilt}; padding-left: 6px; }
      `}</style>

      {showEvents && <EnquiryModal onClose={() => setShowEvents(false)} theme={theme} />}
      {showConcierge && <ConciergeModal onClose={() => setShowConcierge(false)} theme={theme} />}
    </>
  );
}

window.HeritageFooter = HeritageFooter;