// ─── CTA + Footer + Demo Modal ────────────────────────────

function CTASection({ onDemoClick }) {
  return (
    <section className="section" style={{ background: 'var(--bg-0)', paddingTop: 100, paddingBottom: 100 }}>
      <div className="wrap">
        <div className="cta-wrapper" style={{
          padding: '72px 56px',
          background: 'var(--bg-0)',
          borderRadius: 28,
          color: 'var(--ink-0)',
          position: 'relative',
          overflow: 'hidden',
          boxShadow: '0 30px 80px rgba(13,21,48,0.1)',
          border: '1px solid var(--line)',
        }}>
          {/* Background flourish */}
          <div style={{
            position: 'absolute', top: -80, right: -80,
            width: 400, height: 400, borderRadius: '50%',
            background: 'radial-gradient(circle, rgba(26,92,151,0.1) 0%, transparent 70%)',
          }} />
          <div style={{
            position: 'absolute', inset: 0,
            backgroundImage: 'radial-gradient(rgba(13,21,48,0.04) 1px, transparent 1px)',
            backgroundSize: '32px 32px',
            maskImage: 'radial-gradient(ellipse 80% 80% at 100% 0%, black 20%, transparent 70%)',
          }} />

          <div style={{ position: 'relative', display: 'grid', gridTemplateColumns: 'minmax(0, 1.3fr) minmax(0, 1fr)', gap: 48, alignItems: 'center' }} className="cta-grid">
            <div>
              <div className="mono" style={{ fontSize: 11, color: 'var(--saffron)', letterSpacing: '0.18em', textTransform: 'uppercase', marginBottom: 16 }}>
                20 min · Zero commitment
              </div>
              <h2 className="display" style={{ fontSize: 'clamp(38px, 5vw, 60px)', lineHeight: 1.05, marginBottom: 24, color: 'var(--ink-0)' }}>
                See EduGuard live inside <em className="display-italic" style={{ color: 'var(--saffron)' }}>a school like yours.</em>
              </h2>
              <p style={{ fontSize: 17, color: 'var(--ink-1)', lineHeight: 1.55, maxWidth: 520, marginBottom: 32 }}>
                We&apos;ll walk you through a working dashboard with realistic sample data, then talk through a 10-day deployment plan for your campus. No slides, no fluff. A founder will confirm your slot within 2 working hours.
              </p>
              <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
                <button onClick={onDemoClick} className="btn" style={{
                  background: 'var(--saffron)', color: 'white', borderColor: 'var(--saffron)',
                  padding: '16px 28px', fontSize: 15, fontWeight: 600,
                  boxShadow: '0 8px 24px rgba(26,92,151,0.3)',
                }}>
                  Book my demo
                  <Icon.Arrow style={{ width: 16, height: 16 }} />
                </button>
                <a href="#how-it-works" className="btn" style={{
                  background: 'var(--bg-2)', color: 'var(--ink-0)', borderColor: 'var(--line)',
                  padding: '16px 22px', fontSize: 15,
                  boxShadow: 'none',
                }}>
                  See how it works
                </a>
              </div>
            </div>

            {/* Right — checklist */}
            <div className="cta-checklist" style={{
              background: 'var(--bg-1)',
              border: '1px solid var(--line)',
              borderRadius: 18,
              padding: 28,
              boxShadow: '0 10px 30px rgba(13,21,48,0.05)',
            }}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.15em', color: 'var(--saffron)', textTransform: 'uppercase', marginBottom: 18 }}>
                What you&apos;ll see
              </div>
              <div style={{ display: 'grid', gap: 14 }}>
                {[
                  'A working dashboard, not slides',
                  'Eva answering real academic queries',
                  'Bus ETA + parent app walkthrough',
                  'AI grading on a full answer-sheet batch',
                  'A 10-day deployment plan for your campus',
                ].map((t, i) => (
                  <div key={i} style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                    <div style={{
                      width: 22, height: 22, borderRadius: '50%',
                      background: 'var(--saffron)',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      flexShrink: 0,
                    }}>
                      <Icon.Check style={{ width: 12, height: 12, color: 'white' }} />
                    </div>
                    <div style={{ fontSize: 14, color: 'var(--ink-0)', fontWeight: 500 }}>{t}</div>
                  </div>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) { .cta-grid { grid-template-columns: 1fr !important; } }
        @media (max-width: 600px) {
          .cta-wrapper { padding: 40px 24px !important; border-radius: 20px !important; }
          .cta-checklist { padding: 20px !important; }
        }
      `}</style>
    </section>
  );
}

function Footer({ onAboutClick, onCareersClick, onDemoClick }) {
  const actions = { about: onAboutClick, careers: onCareersClick, demo: onDemoClick };
  return (
    <footer style={{ background: 'var(--bg-1)', borderTop: '1px solid var(--line)', paddingTop: 64, paddingBottom: 32 }}>
      <div className="wrap">
        <div style={{
          display: 'grid',
          gridTemplateColumns: '1.5fr 1fr 1fr 1fr 1fr',
          gap: 40,
          marginBottom: 48,
        }} className="footer-grid">
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 16 }}>
              <img src="assets/Dashboard_Logo_192.png" alt="EduGuard Logo" style={{
                width: 32, height: 32, borderRadius: 9,
              }} />
              <div style={{ fontFamily: 'var(--font-logo)', fontSize: 19, letterSpacing: '-0.02em' }}>
                <span style={{ fontWeight: 500, color: '#1a5d97' }}>Edu</span><span style={{ fontWeight: 800, color: '#1a5d97' }}>Guard</span>
              </div>
            </div>
            <p style={{ color: 'var(--ink-2)', fontSize: 14, lineHeight: 1.55, maxWidth: 280 }}>
              The operating system for Indian schools. Quiet intelligence, built for CBSE &amp; ICSE campuses.
            </p>
            <div style={{ marginTop: 18, display: 'flex', gap: 8 }}>
              <span style={{ padding: '5px 10px', background: 'var(--bg-2)', borderRadius: 100, fontSize: 10, fontFamily: 'var(--font-mono)', color: 'var(--ink-1)', letterSpacing: '0.08em' }}>Made in India 🇮🇳</span>
            </div>
          </div>

          {[
            { h: 'Platform', l: [
              { text: 'Live tracking', href: '#platform' },
              { text: 'Auto-attendance', href: '#platform' },
              { text: 'AI grading', href: '#for-principals' },
              { text: 'Eva assistant', href: '#eva' },
              { text: 'How it works', href: '#how-it-works' },
            ]},
            { h: 'Schools', l: [
              { text: 'For principals', href: '#for-principals' },
              { text: 'For teachers', href: '#features' },
              { text: 'Security', href: '#how-it-works' },
              { text: 'Book a demo', href: '#', action: 'demo' },
            ]},
            { h: 'Parents', l: [
              { text: 'Download app', href: 'https://play.google.com/store/apps/details?id=com.eduguard.parent', external: true },
              { text: 'How it works', href: '#how-it-works' },
              { text: 'Support', href: 'mailto:info@eduguard.in' },
            ]},
            { h: 'Company', l: [
              { text: 'About us', href: '#about', action: 'about' },
              { text: 'Careers', href: '#careers', action: 'careers' },
              { text: 'Privacy Policy', href: 'privacy-policy' },
              { text: 'Terms of Service', href: 'terms-and-conditions' },
              { text: 'Support', href: 'mailto:info@eduguard.in' },
            ]},
          ].map(col => (
            <div key={col.h}>
              <div className="mono" style={{ fontSize: 10, letterSpacing: '0.15em', color: 'var(--ink-2)', textTransform: 'uppercase', marginBottom: 16, fontWeight: 600 }}>{col.h}</div>
              <div style={{ display: 'grid', gap: 10 }}>
                {col.l.map(link => {
                  const handler = link.action ? actions[link.action] : undefined;
                  return (
                    <a
                      key={link.text}
                      href={link.href}
                      target={link.external ? '_blank' : undefined}
                      onClick={handler ? (e) => { e.preventDefault(); handler(); } : undefined}
                      style={{ color: 'var(--ink-1)', textDecoration: 'none', fontSize: 13.5, cursor: handler ? 'pointer' : undefined }}
                    >
                      {link.text}
                    </a>
                  );
                })}
              </div>
            </div>
          ))}
        </div>

        <div style={{ height: 1, background: 'var(--line)', marginBottom: 24 }} />

        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16 }}>
          <div style={{ color: 'var(--ink-2)', fontSize: 12 }}>
            © 2026 EduGuard Technologies · All rights reserved.
          </div>
          <div style={{ display: 'flex', gap: 24 }}>
            <a href="privacy-policy" style={{ color: 'var(--ink-2)', textDecoration: 'none', fontSize: 12 }}>Privacy</a>
            <a href="terms-and-conditions" style={{ color: 'var(--ink-2)', textDecoration: 'none', fontSize: 12 }}>Terms</a>
            <a href="mailto:info@eduguard.in" style={{ color: 'var(--ink-2)', textDecoration: 'none', fontSize: 12 }}>Security</a>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 1100px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr !important; } .footer-grid > div:last-child { grid-column: span 2; } }
        @media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr !important; } .footer-grid > div:last-child { grid-column: auto; } }
        @media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr !important; gap: 32px !important; } }
      `}</style>
    </footer>
  );
}

function DemoModal({ open, onClose }) {
  const [formData, setFormData] = React.useState({
    schoolName: '',
    contactPerson: '',
    role: '',
    email: '',
    phone: '',
    studentStrength: ''
  });
  const [status, setStatus] = React.useState('idle');

  if (!open) return null;

  const handleSubmit = async (e) => {
    e.preventDefault();
    setStatus('loading');
    
    try {
      const response = await fetch('https://dashboard.eduguard.in/ops/api/leads', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          ...formData,
          source: 'Marketing Website'
        })
      });
      // Accept network success
      if (response.ok) {
        setStatus('success');
      } else {
        setStatus('error');
      }
    } catch (error) {
      console.error(error);
      setStatus('error');
    }
  };

  const handleChange = (e) => {
    setFormData({...formData, [e.target.name]: e.target.value});
  };

  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 500,
      background: 'rgba(13,21,48,0.55)', backdropFilter: 'blur(8px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '20px 20px',
      overflowY: 'auto',
    }}>
      <div onClick={e => e.stopPropagation()} className="card card-elevated demo-modal-content" style={{
        padding: 40, maxWidth: 520, width: '100%',
        background: 'var(--bg-1)', position: 'relative',
        maxHeight: 'calc(100dvh - 40px)', overflowY: 'auto',
      }}>
        {status === 'success' ? (
          <div style={{ textAlign: 'center', padding: '40px 0' }}>
            <h3 className="display" style={{ fontSize: 28, marginBottom: 12 }}>Request Received</h3>
            <p style={{ color: 'var(--ink-1)', marginBottom: 30 }}>Our campus safety expert will contact you within 24 hours.</p>
            <button onClick={onClose} className="btn btn-primary" style={{ width: '100%', justifyContent: 'center' }}>Close Window</button>
          </div>
        ) : (
          <>
            <div className="mono" style={{ fontSize: 11, color: 'var(--saffron)', letterSpacing: '0.15em', marginBottom: 12, textTransform: 'uppercase', fontWeight: 600 }}>
              Book a demo · 20 min
            </div>
            <h3 className="display" style={{ fontSize: 36, marginBottom: 16 }}>
              See EduGuard <em className="display-italic" style={{ color: 'var(--saffron)' }}>live.</em>
            </h3>
            <p style={{ color: 'var(--ink-1)', fontSize: 14.5, marginBottom: 26, lineHeight: 1.55 }}>
              Share your school details. A success manager will confirm within 2 working hours.
            </p>
            <form onSubmit={handleSubmit} style={{ display: 'grid', gap: 16, marginBottom: 20 }}>
              <div>
                <label className="mono" style={{ fontSize: 10, color: 'var(--ink-2)', letterSpacing: '0.1em', display: 'block', marginBottom: 4, textTransform: 'uppercase', fontWeight: 600 }}>Institution Name</label>
                <input required name="schoolName" value={formData.schoolName} onChange={handleChange} placeholder="e.g. St. Xavier's High School" style={inputStyle} />
              </div>
              <div className="demo-form-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                 <div>
                    <label className="mono" style={{ fontSize: 10, color: 'var(--ink-2)', letterSpacing: '0.1em', display: 'block', marginBottom: 4, textTransform: 'uppercase', fontWeight: 600 }}>Contact Name</label>
                    <input required name="contactPerson" value={formData.contactPerson} onChange={handleChange} style={inputStyle} />
                 </div>
                 <div>
                    <label className="mono" style={{ fontSize: 10, color: 'var(--ink-2)', letterSpacing: '0.1em', display: 'block', marginBottom: 4, textTransform: 'uppercase', fontWeight: 600 }}>Role</label>
                    <select required name="role" value={formData.role} onChange={handleChange} style={inputStyle}>
                      <option value="" disabled>Select Role</option>
                      <option value="Principal">Principal / Director</option>
                      <option value="Admin">School Administrator</option>
                      <option value="Trustee">Trustee / Owner</option>
                      <option value="Other">Other</option>
                    </select>
                 </div>
              </div>
              <div className="demo-form-row" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
                 <div>
                    <label className="mono" style={{ fontSize: 10, color: 'var(--ink-2)', letterSpacing: '0.1em', display: 'block', marginBottom: 4, textTransform: 'uppercase', fontWeight: 600 }}>Official Email</label>
                    <input required type="email" name="email" value={formData.email} onChange={handleChange} style={inputStyle} />
                 </div>
                 <div>
                    <label className="mono" style={{ fontSize: 10, color: 'var(--ink-2)', letterSpacing: '0.1em', display: 'block', marginBottom: 4, textTransform: 'uppercase', fontWeight: 600 }}>Mobile</label>
                    <input required type="tel" pattern="[0-9]{10}" name="phone" value={formData.phone} onChange={handleChange} style={inputStyle} />
                 </div>
              </div>
              <div>
                <label className="mono" style={{ fontSize: 10, color: 'var(--ink-2)', letterSpacing: '0.1em', display: 'block', marginBottom: 4, textTransform: 'uppercase', fontWeight: 600 }}>Campus Strength</label>
                <select required name="studentStrength" value={formData.studentStrength} onChange={handleChange} style={inputStyle}>
                  <option value="" disabled>Select Range</option>
                  <option value="<500">Less than 500</option>
                  <option value="500-1000">500 - 1,000</option>
                  <option value="1000-2500">1,000 - 2,500</option>
                  <option value="2500+">More than 2,500</option>
                </select>
              </div>

              {status === 'error' && <div style={{ color: 'red', fontSize: 13 }}>Failed to submit. Please try again.</div>}

              <div className="demo-form-actions" style={{ display: 'flex', gap: 10, marginTop: 8 }}>
                <button disabled={status === 'loading'} type="submit" className="btn btn-primary" style={{ flex: 1, justifyContent: 'center', opacity: status === 'loading' ? 0.7 : 1 }}>
                  {status === 'loading' ? 'Submitting...' : 'Confirm Demo Slot →'}
                </button>
                <button type="button" className="btn btn-ghost" onClick={onClose}>Cancel</button>
              </div>
            </form>
          </>
        )}
      </div>
      <style>{`
        @media (max-width: 600px) {
          .demo-form-row { grid-template-columns: 1fr !important; gap: 12px !important; }
          .demo-form-actions { flex-direction: column !important; }
          .demo-form-actions button { width: 100% !important; }
          .demo-modal-content { padding: 24px 20px !important; }
        }
      `}</style>
    </div>
  );
}

const inputStyle = {
  width: '100%', padding: '10px 14px',
  background: 'var(--bg-2)', color: 'var(--ink-0)',
  border: '1px solid var(--line)', borderRadius: 10,
  fontFamily: 'inherit', fontSize: 13.5,
};

function InfoModal({ open, onClose, eyebrow, title, italicTail, children }) {
  if (!open) return null;
  return (
    <div onClick={onClose} style={{
      position: 'fixed', inset: 0, zIndex: 500,
      background: 'rgba(13,21,48,0.55)', backdropFilter: 'blur(8px)',
      display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '24px 16px',
      overflowY: 'auto',
    }}>
      <div onClick={e => e.stopPropagation()} className="card card-elevated info-modal-content" style={{
        padding: 44, maxWidth: 620, width: '100%',
        background: 'var(--bg-1)', position: 'relative',
        maxHeight: 'calc(100dvh - 48px)', overflowY: 'auto',
      }}>
        <button onClick={onClose} aria-label="Close" style={{
          position: 'absolute', top: 18, right: 18,
          width: 32, height: 32, borderRadius: '50%',
          border: '1px solid var(--line)', background: 'var(--bg-2)',
          cursor: 'pointer', color: 'var(--ink-1)', fontSize: 16, lineHeight: 1,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
        }}>×</button>

        <div className="mono" style={{ fontSize: 11, color: 'var(--brand)', letterSpacing: '0.15em', marginBottom: 12, textTransform: 'uppercase', fontWeight: 600 }}>
          {eyebrow}
        </div>
        <h3 className="display info-modal-title" style={{ fontSize: 36, marginBottom: 20, lineHeight: 1.1 }}>
          {title} {italicTail && <em className="display-italic" style={{ color: 'var(--brand)' }}>{italicTail}</em>}
        </h3>
        <div style={{ color: 'var(--ink-1)', fontSize: 15.5, lineHeight: 1.65 }}>
          {children}
        </div>
      </div>
      <style>{`
        @media (max-width: 600px) {
          .info-modal-content { padding: 32px 20px 24px !important; }
          .info-modal-title { font-size: 28px !important; }
        }
      `}</style>
    </div>
  );
}

function AboutModal({ open, onClose }) {
  return (
    <InfoModal open={open} onClose={onClose} eyebrow="About EduGuard" title="Built by people who run" italicTail="schools themselves.">
      <p style={{ marginBottom: 16 }}>
        We are based in Central India, building EduGuard from the ground up for Indian schools.
      </p>
      <p style={{ marginBottom: 16 }}>
        Every member of our founding team grew up inside a school their family owns and operates. We have sat through the 6 AM staffroom calls, the "is my child on the bus" phone calls, the attendance disputes, and the dropping grades that nobody caught in time. Having experienced firsthand the friction and limitations of legacy edtech applications, we understand exactly why they fail schools. We built EduGuard to fundamentally change the system, replacing clunky interfaces with quiet, intelligent automation for the modern AI era.
      </p>

      <div style={{
        marginTop: 24, marginBottom: 20,
        padding: '18px 20px',
        background: 'var(--bg-2)',
        border: '1px solid var(--line)',
        borderLeft: '3px solid var(--brand)',
        borderRadius: 10,
      }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.15em', color: 'var(--brand)', textTransform: 'uppercase', fontWeight: 700, marginBottom: 6 }}>
          Our mission
        </div>
        <div style={{ fontSize: 15.5, color: 'var(--ink-0)' }}>
          Give every Indian school the quiet, reliable intelligence it needs — to keep children safe, parents calm, and teachers free to teach.
        </div>
      </div>

      <div style={{
        padding: '18px 20px',
        background: 'var(--bg-2)',
        border: '1px solid var(--line)',
        borderLeft: '3px solid var(--brand)',
        borderRadius: 10,
      }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.15em', color: 'var(--brand)', textTransform: 'uppercase', fontWeight: 700, marginBottom: 6 }}>
          Our goal
        </div>
        <div style={{ fontSize: 15.5, color: 'var(--ink-0)' }}>
          Make EduGuard the operating system every Indian campus runs on. Starting with the schools we know best — our own.
        </div>
      </div>
    </InfoModal>
  );
}

function CareersModal({ open, onClose }) {
  return (
    <InfoModal open={open} onClose={onClose} eyebrow="Careers at EduGuard" title="Build the future" italicTail="of Indian schools.">
      <p style={{ marginBottom: 16 }}>
        We are a small team, hiring carefully. If you want to build a product that changes how Indian schools run — and you believe software should be honest, calm, and genuinely useful — we would love to hear from you.
      </p>
      <p style={{ marginBottom: 24 }}>
        We are not posting generic job descriptions. We want to know what you are good at, what you care about, and why you think EduGuard is worth your next few years.
      </p>

      <div style={{
        padding: '20px 22px',
        background: 'var(--bg-2)',
        border: '1px solid var(--line)',
        borderRadius: 12,
        marginBottom: 24,
      }}>
        <div className="mono" style={{ fontSize: 10, letterSpacing: '0.15em', color: 'var(--brand)', textTransform: 'uppercase', fontWeight: 700, marginBottom: 10 }}>
          How to reach us
        </div>
        <div style={{ fontSize: 15, color: 'var(--ink-1)', lineHeight: 1.6, marginBottom: 14 }}>
          Write to <a href="mailto:info@eduguard.in" style={{ color: 'var(--brand)', fontWeight: 600, textDecoration: 'none' }}>info@eduguard.in</a> with a short note about yourself and your work. Link to something you are proud of — code, design, writing, anything.
        </div>
        <div style={{ fontSize: 13.5, color: 'var(--ink-2)', fontStyle: 'italic' }}>
          No forms. No generic templates. Just a real message.
        </div>
      </div>

      <a href="mailto:info@eduguard.in" className="btn btn-primary" style={{ padding: '14px 22px', fontSize: 14, textDecoration: 'none' }}>
        Write to us
        <Icon.Arrow style={{ width: 15, height: 15 }} />
      </a>
    </InfoModal>
  );
}

Object.assign(window, { CTASection, Footer, DemoModal, AboutModal, CareersModal });
