// Reserve.jsx — YCR Reserve CTA + Footer
const Reserve = ({ onSubmit, onNavigate }) => {
  const { isMobile, isTablet, isCompact } = useYCRBreakpoint();
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');
  const [date, setDate] = React.useState('');
  const [submitted, setSubmitted] = React.useState(false);
  const [footerNotice, setFooterNotice] = React.useState('');
  const [confirmationId, setConfirmationId] = React.useState('');
  const benefits = [
    '10% off the creation of your family stem cell bank',
    'Free 15-minute private Zoom consult with Dr. Smith',
  ];

  const saveReservation = async (record) => {
    const existing = JSON.parse(window.localStorage.getItem('ycrReservations') || '[]');
    window.localStorage.setItem('ycrReservations', JSON.stringify([record, ...existing]));

    try {
      await fetch('/api/reserve', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(record),
      });
    } catch (err) {
      // Static local preview has no API route. Local save still confirms request.
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    if (!name || !email || !date) return;

    const id = `YCR-${Date.now().toString(36).toUpperCase()}`;
    const record = {
      id,
      name,
      email,
      preferredDate: date,
      submittedAt: new Date().toISOString(),
      source: 'reserve-page',
    };

    await saveReservation(record);
    setConfirmationId(id);
    setSubmitted(true);
    onSubmit && onSubmit(record);
  };

  const handleFooterClick = (label) => {
    if (label === 'Contact') {
      setFooterNotice('');
      window.location.href = 'reserve.html#reserve-email';
      return;
    }

    setFooterNotice(label === 'Privacy Policy'
      ? 'Privacy details are reviewed with concierge before confirmation. No payment details are collected on this page.'
      : 'Seat requests are no-commitment. Concierge confirms availability, date, and details before final registration.');
  };

  const s = {
    section: {
      background: '#050B16', padding: isMobile ? '64px 20px 0' : isTablet ? '74px 48px 0' : '80px 5vw 0',
      position: 'relative', overflow: 'hidden',
    },
    inner: { maxWidth: '1200px', margin: '0 auto' },
    bgGlow: {
      position: 'absolute', bottom: '0', right: '5%',
      width: isMobile ? '360px' : '600px', height: isMobile ? '360px' : '600px', borderRadius: '50%',
      background: 'radial-gradient(circle, rgba(74,158,219,0.07) 0%, transparent 70%)',
      pointerEvents: 'none',
    },
    topRow: { display: 'grid', gridTemplateColumns: isCompact ? '1fr' : '1fr 420px', gap: isMobile ? '28px' : '64px', alignItems: 'flex-start', marginBottom: isMobile ? '56px' : '80px', paddingTop: isMobile ? '84px' : '104px' },
    left: { flex: 1 },
    eyebrow: { fontSize: '11px', fontWeight: 600, letterSpacing: '0.20em', textTransform: 'uppercase', color: '#4A9EDB', marginBottom: '16px', display: 'block' },
    h2: { fontSize: 'clamp(36px,4vw,58px)', fontWeight: 800, color: '#FFFFFF', lineHeight: 1.05, letterSpacing: '-0.02em', marginBottom: '16px' },
    body: { fontSize: '15px', color: '#7A8FA8', lineHeight: 1.65, maxWidth: '380px' },
    benefits: { display: 'grid', gap: '10px', marginTop: '24px', maxWidth: '520px' },
    benefitIntro: { fontSize: '14px', color: '#D6E3F1', fontWeight: 700, marginBottom: '2px' },
    benefitItem: { display: 'grid', gridTemplateColumns: '22px 1fr', gap: '10px', alignItems: 'start', color: '#D6E3F1', fontSize: '14px', lineHeight: 1.45 },
    benefitIcon: { width: '22px', height: '22px', borderRadius: '50%', border: '1px solid rgba(74,158,219,0.34)', color: '#4A9EDB', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: '11px', flexShrink: 0 },
    visual: {
      marginTop: isMobile ? '24px' : '30px',
      width: '100%',
      maxWidth: '520px',
      minHeight: isMobile ? '160px' : '190px',
      borderRadius: '20px',
      border: '1px solid rgba(74,158,219,0.16)',
      overflow: 'hidden',
      position: 'relative',
      backgroundImage: 'linear-gradient(90deg, rgba(5,11,22,0.94), rgba(5,11,22,0.36)), url("../../assets/inside-room-clean.png")',
      backgroundSize: 'cover, cover',
      backgroundPosition: 'center, center',
      boxShadow: '0 24px 80px rgba(0,0,0,0.36)',
    },
    visualContent: { position: 'absolute', inset: 0, padding: isMobile ? '20px' : '24px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between' },
    visualLabel: { fontSize: '10px', fontWeight: 800, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#7EC2F0' },
    visualTitle: { fontSize: isMobile ? '22px' : '26px', lineHeight: 1.1, fontWeight: 800, color: '#FFFFFF', maxWidth: '260px', textShadow: '0 2px 18px rgba(0,0,0,0.55)' },
    visualMeta: { display: 'flex', flexWrap: 'wrap', gap: '8px' },
    visualPill: { border: '1px solid rgba(126,194,240,0.24)', background: 'rgba(74,158,219,0.10)', color: '#D6E3F1', borderRadius: '9999px', padding: '7px 10px', fontSize: '12px', fontWeight: 700 },
    right: { width: '100%', maxWidth: isCompact ? '520px' : '420px', justifySelf: isCompact ? 'stretch' : 'end' },
    form: {
      background: '#0D1B2E', border: '1px solid rgba(74,158,219,0.18)',
      borderRadius: isMobile ? '16px' : '20px', padding: isMobile ? '22px' : '32px',
      boxShadow: '0 0 60px rgba(74,158,219,0.10)',
    },
    formTitle: { fontSize: '17px', fontWeight: 700, color: '#FFFFFF', marginBottom: '6px' },
    formSub: { fontSize: '13px', color: '#7A8FA8', marginBottom: '24px' },
    field: { marginBottom: '14px' },
    label: { fontSize: '11px', fontWeight: 600, color: '#7A8FA8', letterSpacing: '0.08em', textTransform: 'uppercase', display: 'block', marginBottom: '6px' },
    input: {
      width: '100%', background: 'rgba(5,11,22,0.8)',
      border: '1px solid rgba(74,158,219,0.2)', borderRadius: '10px',
      padding: '12px 14px', fontSize: '14px', color: '#FFFFFF',
      fontFamily: 'inherit', outline: 'none',
      transition: 'border-color 0.2s',
    },
    submitBtn: {
      width: '100%', background: '#FFFFFF', color: '#050B16',
      fontSize: '15px', fontWeight: 700,
      padding: '14px', borderRadius: '9999px', border: 'none',
      cursor: 'pointer', fontFamily: 'inherit', marginTop: '8px',
      display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '8px',
    },
    disclaimer: { fontSize: '11px', color: '#4A5D75', textAlign: 'center', marginTop: '12px', lineHeight: 1.5 },
    success: { textAlign: 'center', padding: '20px 0' },
    successTitle: { fontSize: '20px', fontWeight: 700, color: '#FFFFFF', marginBottom: '8px' },
    successBody: { fontSize: '14px', color: '#7A8FA8', lineHeight: 1.6 },
    successIcon: {
      width: '54px',
      height: '54px',
      margin: '0 auto 14px',
      borderRadius: '50%',
      border: '1px solid rgba(0,196,167,0.32)',
      background: 'rgba(0,196,167,0.08)',
      color: '#00C4A7',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: '24px',
      fontWeight: 800,
    },
    successId: { marginTop: '12px', color: '#7EC2F0', fontSize: '12px', fontWeight: 700, letterSpacing: '0.06em' },
    successActions: { display: 'flex', justifyContent: 'center', gap: '10px', flexWrap: 'wrap', marginTop: '18px' },
    successLink: { color: '#D6E3F1', border: '1px solid rgba(126,194,240,0.22)', background: 'rgba(74,158,219,0.08)', borderRadius: '9999px', padding: '9px 12px', textDecoration: 'none', fontSize: '12px', fontWeight: 800 },
    footer: {
      borderTop: '1px solid rgba(74,158,219,0.1)',
      padding: isMobile ? '24px 20px 30px' : '28px 5vw',
      display: 'flex', alignItems: isMobile ? 'flex-start' : 'center', justifyContent: 'space-between',
      flexDirection: isMobile ? 'column' : 'row',
      gap: isMobile ? '16px' : '0',
      maxWidth: '100%', marginTop: '0',
    },
    footerLogo: { display: 'flex', alignItems: 'center', gap: '8px' },
    footerLogoText: { fontSize: '11px', fontWeight: 700, color: '#4A5D75', letterSpacing: '0.06em' },
    footerLinks: { display: 'flex', gap: '20px', flexWrap: 'wrap' },
    footerLink: { fontSize: '12px', color: '#4A5D75', cursor: 'pointer', background: 'none', border: 'none', fontFamily: 'inherit' },
    footerRight: { fontSize: '12px', color: '#4A5D75' },
    footerNotice: {
      maxWidth: '1200px', margin: '0 auto', padding: '0 5vw 18px',
      color: '#B8C9DE', fontSize: '12px', lineHeight: 1.5,
    },
  };

  return (
    <>
      <section style={s.section} id="reserve">
        <div style={s.bgGlow}></div>
        <div style={s.inner}>
          <div style={s.topRow}>
            <div style={s.left}>
              <span style={s.eyebrow}>Register for Webinar</span>
              <h2 style={s.h2}>Availability is limited. Sign up now.</h2>
              <p style={s.body}>Choose an upcoming webinar date and our concierge team will confirm details before your session.</p>
              <div style={s.benefits}>
                <div style={s.benefitIntro}>Participants all receive:</div>
                {benefits.map(item => (
                  <div key={item} style={s.benefitItem}>
                    <span style={s.benefitIcon}>✓</span>
                    <span>{item}</span>
                  </div>
                ))}
              </div>
              <div style={s.visual} aria-hidden="true">
                <div style={s.visualContent}>
                  <div style={s.visualLabel}>Webinar Reservation</div>
                  <div style={s.visualTitle}>Private guidance for family health.</div>
                  <div style={s.visualMeta}>
                    <span style={s.visualPill}>Online</span>
                    <span style={s.visualPill}>Limited availability</span>
                    <span style={s.visualPill}>Doctor-led</span>
                  </div>
                </div>
              </div>
            </div>
            <div style={s.right}>
              <div style={s.form}>
                {submitted ? (
                  <div style={s.success}>
                    <div style={s.successIcon}>✓</div>
                    <div style={s.successTitle}>Seat reserved.</div>
                    <div style={s.successBody}>Your request was received successfully. Our concierge team will be in touch within 24 hours to confirm details and answer any questions.</div>
                    <div style={s.successId}>Confirmation {confirmationId}</div>
                    <div style={s.successActions}>
                      <a style={s.successLink} href="index.html">Back to landing</a>
                      <a style={s.successLink} href="reservations.html">View local list</a>
                    </div>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit}>
                    <div style={s.formTitle}>Register for Webinar</div>
                    <div style={s.formSub}>Online webinar availability is limited.</div>
                    <div style={s.field}>
                      <label style={s.label}>Full Name</label>
                      <input id="reserve-name" style={s.input} type="text" placeholder="Gregory Smith" value={name} onChange={e=>setName(e.target.value)} onFocus={e=>e.target.style.borderColor='rgba(74,158,219,0.5)'} onBlur={e=>e.target.style.borderColor='rgba(74,158,219,0.2)'} required />
                    </div>
                    <div style={s.field}>
                      <label style={s.label}>Email Address</label>
                      <input id="reserve-email" style={s.input} type="email" placeholder="you@email.com" value={email} onChange={e=>setEmail(e.target.value)} onFocus={e=>e.target.style.borderColor='rgba(74,158,219,0.5)'} onBlur={e=>e.target.style.borderColor='rgba(74,158,219,0.2)'} required />
                    </div>
                    <div style={s.field}>
                      <label style={s.label}>Upcoming Webinar Date</label>
                      <select id="preferred-date" style={{...s.input, cursor:'pointer'}} value={date} onChange={e=>setDate(e.target.value)} required>
                        <option value="" disabled>Select a date</option>
                        <option value="Webinar - Saturday, May 16, 2026">Webinar - Saturday, May 16, 2026</option>
                        <option value="Webinar - Saturday, June 20, 2026">Webinar - Saturday, June 20, 2026</option>
                        <option value="Either date works">Either date works</option>
                      </select>
                    </div>
                    <button style={s.submitBtn} type="submit">Sign Up Now →</button>
                    <div style={s.disclaimer}>No payment required. Concierge will confirm.</div>
                  </form>
                )}
              </div>
            </div>
          </div>
        </div>
      </section>
      {footerNotice && <div style={s.footerNotice}>{footerNotice}</div>}
      <footer style={s.footer} className="ycr-reveal ycr-delay-2">
        <div style={s.footerLogo}>
          <img src="../../assets/ycr-logo.png" alt="YCR" style={{width:'24px',height:'24px'}} />
          <span style={s.footerLogoText}>YOUR CELL REGENERATION</span>
        </div>
        <div style={s.footerLinks}>
          {['Privacy Policy','Terms','Contact'].map(l => <button key={l} type="button" style={s.footerLink} onClick={()=>handleFooterClick(l)}>{l}</button>)}
        </div>
        <span style={s.footerRight}>© 2026 Your Cell Regeneration</span>
      </footer>
    </>
  );
};

const ReserveFooter = () => {
  const { isMobile } = useYCRBreakpoint();
  const [footerNotice, setFooterNotice] = React.useState('');

  const handleFooterClick = (label) => {
    if (label === 'Contact') {
      setFooterNotice('');
      window.location.href = 'reserve.html#reserve-email';
      return;
    }

    setFooterNotice(label === 'Privacy Policy'
      ? 'Privacy details are reviewed with concierge before confirmation. No payment details are collected on this page.'
      : 'Seat requests are no-commitment. Concierge confirms availability, date, and details before final registration.');
  };

  const s = {
    footer: {
      background: '#050B16',
      borderTop: '1px solid rgba(74,158,219,0.1)',
      padding: isMobile ? '24px 20px 30px' : '28px 5vw',
      display: 'flex',
      alignItems: isMobile ? 'flex-start' : 'center',
      justifyContent: 'space-between',
      flexDirection: isMobile ? 'column' : 'row',
      gap: isMobile ? '16px' : '0',
      maxWidth: '100%',
    },
    footerLogo: { display: 'flex', alignItems: 'center', gap: '8px' },
    footerLogoText: { fontSize: '11px', fontWeight: 700, color: '#4A5D75', letterSpacing: '0.06em' },
    footerLinks: { display: 'flex', gap: '20px', flexWrap: 'wrap' },
    footerLink: { fontSize: '12px', color: '#4A5D75', cursor: 'pointer', background: 'none', border: 'none', fontFamily: 'inherit' },
    footerRight: { fontSize: '12px', color: '#4A5D75' },
    footerNotice: {
      background: '#050B16',
      maxWidth: '1200px',
      margin: '0 auto',
      padding: '0 5vw 18px',
      color: '#B8C9DE',
      fontSize: '12px',
      lineHeight: 1.5,
    },
  };

  return (
    <React.Fragment>
      {footerNotice && <div style={s.footerNotice}>{footerNotice}</div>}
      <footer style={s.footer}>
        <div style={s.footerLogo}>
          <img src="../../assets/ycr-logo.png" alt="YCR" style={{width:'24px',height:'24px'}} />
          <span style={s.footerLogoText}>YOUR CELL REGENERATION</span>
        </div>
        <div style={s.footerLinks}>
          {['Privacy Policy','Terms','Contact'].map(l => <button key={l} type="button" style={s.footerLink} onClick={()=>handleFooterClick(l)}>{l}</button>)}
        </div>
        <span style={s.footerRight}>© 2026 Your Cell Regeneration</span>
      </footer>
    </React.Fragment>
  );
};

Object.assign(window, { Reserve, ReserveFooter });