/* SparkSchool AI — Shared React Components
   Load with: <script type="text/babel" src="react-components.jsx"></script> */

const { useState, useEffect, useRef } = React;

/* ─── NAV ─────────────────────────────────────────────────── */
function Nav({ active = '', darkHero = false }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const h = () => setScrolled(window.scrollY > 20);
    window.addEventListener('scroll', h, { passive: true });
    h();
    return () => window.removeEventListener('scroll', h);
  }, []);
  const RES = ['Blog.html', 'Learn.html', 'Webinars.html', 'FAQs.html',
  'CPD.html', 'Certification.html', 'Resources.html'];
  return (
    <nav className={`nav${scrolled ? ' scrolled' : ''}${darkHero && !scrolled ? ' dark-hero' : ''}`}>
      <a href="/" className="nav-logo">
        <img src="../assets/spark-school-navbar-final.png" alt="SparkSchool AI" />
      </a>
      <ul className={`nav-links${open ? ' open' : ''}`}>
        <li><a href="/website/Features.html" className={['Features.html', 'Product.html'].includes(active) ? 'active' : ''}>Product</a></li>
        <li className="has-dropdown">
          <a href="/website/Solutions.html" className={active === 'Solutions.html' ? 'active' : ''}>
            AI Solutions <span className="drop-arrow">▾</span>
          </a>
          <div className="nav-dropdown">
            <a href="/website/Solutions.html#teachers">AI for Teachers</a>
            <a href="/website/Solutions.html#schools">AI for Schools</a>
          </div>
        </li>
        <li className="has-dropdown">
          <a href="/website/Resources.html" className={RES.includes(active) ? 'active' : ''}>
            Resources <span className="drop-arrow">▾</span>
          </a>
          <div className="nav-dropdown res-drop">
            <a href="/website/Blog.html">Blog</a>
            <a href="/website/Learn.html">Learning Hub</a>
            <a href="/website/Webinars.html">Webinars</a>
            <a href="/website/FAQs.html">FAQs</a>
            <a href="/website/CPD.html">Professional Dev.</a>
          </div>
        </li>
        <li><a href="/website/Pricing.html" className={active === 'Pricing.html' ? 'active' : ''}>Pricing</a></li>
      </ul>
      <div className="nav-actions">
        <div className="nav-divider"></div>
        <a href="https://app.sparkschool.ai/login"><button className="btn-ghost">Sign In</button></a>
        <a href="/website/Contact.html"><button className="btn-prim" style={{ padding: '8px 14px', fontSize: '13px', whiteSpace: 'nowrap' }}>Book a Demo</button></a>
        <button className={`nav-hamburger${open ? ' open' : ''}`} onClick={() => setOpen((o) => !o)} aria-label="Menu">
          <span /><span /><span />
        </button>
      </div>
    </nav>);

}

/* ─── FOOTER ────────────────────────────────────────────────── */
function Footer() {
  return (
    <>
      {/* ── CTA Band ── */}
      <div className="footer-cta-band">
        <div className="footer-cta-inner">
          <h2 className="footer-cta-h">AI that helps you<br />teach better.</h2>
          <div className="footer-cta-right">
            <p>SparkSchool AI is a complete classroom solution — from lesson planning and assessments to differentiated instruction and real-time student insights. Leverage AI to teach more effectively, engage every learner, and reclaim the time that matters.</p>
            <div className="footer-cta-btns">
              <a href="/website/Contact.html" className="btn-f-prim" style={{ width: "168px" }}>Book a Demo</a>
              <a href="https://app.sparkschool.ai/login" className="btn-f-out">Free for Teachers</a>
            </div>
          </div>
        </div>
      </div>
      {/* ── Main Footer ── */}
      <footer className="footer">
        <div className="footer-inner">
          <div className="footer-top">

            {/* Brand col */}
            <div className="footer-brand">
              <img src="../assets/spark-school-navbar-final.png" alt="SparkSchool AI" />
              <p>AI-powered teaching tools for every teacher, every school, every curriculum board.</p>
              <div className="footer-brand-btns">
                <a href="/website/Contact.html" className="f-btn-prim" style={{ fontSize: "14px", width: "200px" }}>Book a Demo</a>
                <a href="https://app.sparkschool.ai/login" className="f-btn-out" style={{ width: "200px" }}>Free for Teachers</a>
              </div>
              {/* Contact info */}
              <div style={{ marginTop: '20px', display: 'flex', flexDirection: 'column', gap: '7px' }}>
                <div style={{ fontSize: '12px', color: 'rgba(255,255,255,.5)', lineHeight: '1.5' }}>
                  2nd Floor, iHub Gujarat<br />Ahmedabad, Gujarat
                </div>
                <a href="tel:+918866767153" style={{ fontSize: '12px', color: 'rgba(255,255,255,.6)', textDecoration: 'none', transition: 'color .15s' }}
                onMouseEnter={(e) => e.target.style.color = '#52ccec'} onMouseLeave={(e) => e.target.style.color = 'rgba(255,255,255,.6)'}>
                  +91 88667 67153
                </a>
              </div>
              <div className="footer-social">
                <a className="f-soc" href="#" title="Twitter">𝕏</a>
                <a className="f-soc" href="#" title="LinkedIn">in</a>
                <a className="f-soc" href="#" title="Instagram">ig</a>
                <a className="f-soc" href="#" title="YouTube">▶</a>
              </div>
            </div>

            {/* AI Solutions col */}
            <div className="f-col">
              <div className="f-col-title">AI Solutions</div>
              <div className="f-sub-label">AI for Teachers</div>
              <ul>
                <li><a href="/website/Solutions.html#teachers">Lesson Plan Generator</a></li>
                <li><a href="/website/Solutions.html#teachers">Quiz Generator</a></li>
                <li><a href="/website/Solutions.html#teachers">Science Lab Generator</a></li>
                <li><a href="/website/Solutions.html#teachers">Worksheet Generator</a></li>
                <li><a href="/website/Solutions.html#teachers">Presentation Generator</a></li>
              </ul>
              <div className="f-sub-label">AI for Schools</div>
              <ul>
                <li><a href="/website/Solutions.html#schools">For Principals</a></li>
                <li><a href="/website/Solutions.html#schools">School Dashboard</a></li>
                <li><a href="/website/Solutions.html#schools">Analytics &amp; Reporting</a></li>
              </ul>
            </div>

            {/* Resources col */}
            <div className="f-col">
              <div className="f-col-title">Resources</div>
              <ul>
                <li><a href="/website/CPD.html">Professional Development</a></li>
                <li><a href="/website/Blog.html">Blog</a></li>
                <li><a href="/website/Webinars.html">Webinars</a></li>
                <li><a href="/website/FAQs.html">FAQs</a></li>
              </ul>
            </div>

            {/* Company col */}
            <div className="f-col">
              <div className="f-col-title">Company</div>
              <ul>
                <li><a href="/website/About.html">About Us</a></li>
                <li><a href="/website/Pricing.html">Pricing</a></li>
                <li><a href="#">Careers</a></li>
                <li><a href="#">Press</a></li>
                <li><a href="/website/Contact.html">Contact</a></li>
              </ul>
            </div>

          </div>
          <div className="footer-bot">
            <span>© 2026 SparkSchool AI. All rights reserved.</span>
            <div className="footer-bot-links">
              <a href="#">Privacy Policy</a>
              <a href="#">Terms</a>
              <a href="#">Accessibility</a>
            </div>
          </div>
        </div>
      </footer>
    </>);

}

/* ─── UTILITY COMPONENTS ────────────────────────────────────── */
function SecTag({ children, style = {} }) {
  return <div className="sec-tag" style={style}>{children}</div>;
}

function PageHero({ tag, title, subtitle, dark = false, gradient, children }) {
  const bg = gradient ?
  { background: gradient } :
  dark ?
  { background: 'linear-gradient(160deg,#0d2744 0%,#1a3f6a 100%)' } :
  {};
  return (
    <div className="page-hero" style={bg}>
      <div className="page-hero-inner">
        {tag &&
        <SecTag style={dark ? { background: 'rgba(255,255,255,.15)', color: '#fff', border: '1px solid rgba(255,255,255,.25)' } : {}}>
            {tag}
          </SecTag>
        }
        <h1 style={dark ? { color: '#fff' } : {}}>{title}</h1>
        {subtitle && <p style={dark ? { color: 'rgba(255,255,255,.75)', maxWidth: 560 } : {}}>{subtitle}</p>}
        {children}
      </div>
    </div>);

}

function Reveal({ children, delay = 0, className = '', style = {} }) {
  const ref = useRef(null);
  const [vis, setVis] = useState(false);
  useEffect(() => {
    const el = ref.current;if (!el) return;
    const io = new IntersectionObserver(
      ([e]) => {if (e.isIntersecting) {setVis(true);io.unobserve(el);}},
      { threshold: 0.07 }
    );
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <div ref={ref} className={`reveal${vis ? ' visible' : ''} ${className}`}
    style={{ transitionDelay: `${delay}s`, ...style }}>
      {children}
    </div>);

}

function TestiCard({ quote, name, role, avInit, avBg, stars = 5 }) {
  return (
    <div className="tcard">
      <div className="t-stars">{'★'.repeat(stars)}</div>
      <p className="t-quote">"{quote}"</p>
      <div className="t-auth">
        <div className="t-av" style={{ background: avBg }}>{avInit}</div>
        <div>
          <div className="t-name">{name}</div>
          <div className="t-role">{role}</div>
        </div>
      </div>
    </div>);

}

Object.assign(window, { Nav, Footer, SecTag, PageHero, Reveal, TestiCard });