// Shared Nav + Footer + Tweaks panel
const Nav = ({ current = 'home', hideCta = false }) => {
  const [open, setOpen] = React.useState(false);
  return (
    <nav className="nav">
      <div className="nav-inner">
        <a href="/" className="nav-logo">
          <img src="assets/school_connect_logo_new.png" alt="School Connect" />
        </a>
        <ul className="nav-links">
          <li><a href="/" className={current === 'home' ? 'active' : ''}>Home</a></li>
          <li><a href="features.html" className={current === 'features' ? 'active' : ''}>Features</a></li>
          <li><a href="pricing.html" className={current === 'pricing' ? 'active' : ''}>Pricing</a></li>
          <li><a href="about.html" className={current === 'about' ? 'active' : ''}>About</a></li>
          <li><a href="blog.html" className={current === 'blog' ? 'active' : ''}>Blog</a></li>
        </ul>
        {!hideCta && (
          <div className="nav-cta-group">
            <a href="contact.html" className="btn btn-primary">Free trial →</a>
          </div>
        )}
        <button className="nav-burger" onClick={() => setOpen(o => !o)} aria-label="Menu">
          <span className={open ? 'open' : ''}></span>
          <span className={open ? 'open' : ''}></span>
          <span className={open ? 'open' : ''}></span>
        </button>
      </div>
      {open && (
        <div className="nav-mobile">
          <a href="/" className={current === 'home' ? 'active' : ''} onClick={() => setOpen(false)}>Home</a>
          <a href="features.html" className={current === 'features' ? 'active' : ''} onClick={() => setOpen(false)}>Features</a>
          <a href="pricing.html" className={current === 'pricing' ? 'active' : ''} onClick={() => setOpen(false)}>Pricing</a>
          <a href="about.html" className={current === 'about' ? 'active' : ''} onClick={() => setOpen(false)}>About</a>
          <a href="blog.html" className={current === 'blog' ? 'active' : ''} onClick={() => setOpen(false)}>Blog</a>
          {!hideCta && <a href="contact.html" className="btn btn-primary" style={{ marginTop: 8 }}>Free trial →</a>}
        </div>
      )}
    </nav>
  );
};

const Footer = () => (
  <footer className="footer">
    <div className="wrap">
      <div className="footer-grid">
        <div className="footer-col footer-brand">
          <div className="footer-logo"><img src="assets/school_connect_logo_new.png" alt="School Connect" /></div>
          <p className="footer-tag">
            One warm, quiet place for classrooms, admin offices and families.
            Built in Karachi, for schools across Pakistan.
          </p>
          <div style={{ marginTop: 16, fontSize: 13, color: 'var(--ink-dim)' }}>letstalk@theschoolconnect.com · Karachi, Pakistan</div>
          <div className="footer-social">
            <a href="https://www.instagram.com/theschoolconnect26/" target="_blank" rel="noopener" aria-label="Instagram"><svg viewBox="0 0 20 20" width="16" fill="currentColor"><rect x="2" y="2" width="16" height="16" rx="4" fill="none" stroke="currentColor" strokeWidth="1.4" /><circle cx="10" cy="10" r="3.5" fill="none" stroke="currentColor" strokeWidth="1.4" /><circle cx="14.5" cy="5.5" r="0.8" /></svg></a>
            <a href="https://www.facebook.com/profile.php?id=61568020616551" target="_blank" rel="noopener" aria-label="Facebook"><svg viewBox="0 0 20 20" width="16" fill="currentColor"><rect x="2" y="2" width="16" height="16" rx="2" fill="none" stroke="currentColor" strokeWidth="1.4" /><path d="M11 10 L11 16 L9 16 L9 10 L7.5 10 L7.5 8 L9 8 L9 7 Q 9 5, 11.5 5 L13 5 L13 7 L12 7 Q 11 7, 11 8 L11 8 L13 8 L12.5 10 Z" fill="currentColor" stroke="none" /></svg></a>
            <a href="https://www.linkedin.com/company/115782001/" target="_blank" rel="noopener" aria-label="LinkedIn"><svg viewBox="0 0 20 20" width="16" fill="currentColor"><rect x="2" y="2" width="16" height="16" rx="2" fill="none" stroke="currentColor" strokeWidth="1.4" /><rect x="5" y="8" width="2" height="7" /><rect x="5" y="5" width="2" height="2" /><path d="M10 15 L10 8 L12 8 L12 9 Q 13 8, 14 8 Q 16 8, 16 11 L16 15 L14 15 L14 11 Q 14 10, 13 10 Q 12 10, 12 11 L12 15 Z" /></svg></a>
          </div>
        </div>

        <div className="footer-col">
          <h5>Product</h5>
          <ul>
            <li><a href="features.html">Features</a></li>
            <li><a href="pricing.html">Pricing</a></li>
            <li><a href="contact.html">Contact us</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Company</h5>
          <ul>
            <li><a href="about.html">About</a></li>
            <li><a href="blog.html">Blog</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Contact</h5>
          <ul>
            <li><a href="mailto:letstalk@theschoolconnect.com">letstalk@theschoolconnect.com</a></li>
            <li><a href="tel:+923710127787">+92 371 012 7787</a></li>
            <li><a href="https://www.theschoolconnect.com" target="_blank" rel="noopener">www.theschoolconnect.com</a></li>
            <li style={{ color: 'var(--ink-muted)' }}>Karachi, Pakistan</li>
          </ul>
        </div>
      </div>

      <div className="footer-bottom">
        <div>© 2026 School Connect · All rights reserved</div>
        <div style={{ display: 'flex', gap: 24 }}>
          <a href="privacy.html">Privacy</a>
          <a href="terms.html">Terms</a>
        </div>
      </div>
    </div>
  </footer>
);

// Tweaks panel
const TweaksPanel = ({ tweaks, setTweak }) => {
  const [visible, setVisible] = React.useState(false);
  React.useEffect(() => {
    const onMsg = (e) => {
      if (e.data?.type === '__activate_edit_mode') setVisible(true);
      if (e.data?.type === '__deactivate_edit_mode') setVisible(false);
    };
    window.addEventListener('message', onMsg);
    window.parent.postMessage({ type: '__edit_mode_available' }, '*');
    return () => window.removeEventListener('message', onMsg);
  }, []);

  if (!visible) return null;

  const bgs = [
    { key: 'warm', label: 'Warm', bg: '#1a1410', bg1: '#221a15', bg2: '#2d241d' },
    { key: 'black', label: 'Near-black', bg: '#0c0a08', bg1: '#141210', bg2: '#1e1b17' },
    { key: 'navy', label: 'Deep navy', bg: '#101522', bg1: '#161d2e', bg2: '#1f2940' },
    { key: 'teal', label: 'Teal-ink', bg: '#0f2028', bg1: '#152a34', bg2: '#1d3743' },
  ];
  const accents = [
    { key: 'mustard', label: 'Mustard lead' },
    { key: 'coral', label: 'Coral lead' },
    { key: 'teal', label: 'Teal lead' },
    { key: 'balanced', label: 'Balanced mix' },
  ];

  return (
    <div className="tweaks-panel">
      <div className="tweaks-head">
        <strong>Tweaks</strong>
        <span>Live edits</span>
      </div>

      <div className="tweaks-group">
        <label>Dark background</label>
        <div className="tw-swatches">
          {bgs.map(b => (
            <button
              key={b.key}
              className={`tw-sw ${tweaks.bg === b.key ? 'on' : ''}`}
              onClick={() => setTweak('bg', b.key)}
              title={b.label}
            >
              <span style={{ background: b.bg }}></span>
              {b.label}
            </button>
          ))}
        </div>
      </div>

      <div className="tweaks-group">
        <label>Accent emphasis</label>
        <div className="tw-chips">
          {accents.map(a => (
            <button
              key={a.key}
              className={`tw-chip ${tweaks.accent === a.key ? 'on' : ''}`}
              onClick={() => setTweak('accent', a.key)}
            >{a.label}</button>
          ))}
        </div>
      </div>

      <div className="tweaks-group">
        <label>Decorative shapes</label>
        <div className="tw-chips">
          <button className={`tw-chip ${tweaks.decor === 'bold' ? 'on' : ''}`} onClick={() => setTweak('decor', 'bold')}>Bold</button>
          <button className={`tw-chip ${tweaks.decor === 'subtle' ? 'on' : ''}`} onClick={() => setTweak('decor', 'subtle')}>Subtle</button>
          <button className={`tw-chip ${tweaks.decor === 'off' ? 'on' : ''}`} onClick={() => setTweak('decor', 'off')}>Off</button>
        </div>
      </div>

      <div className="tweaks-group">
        <label>Hero headline</label>
        <div className="tw-chips vert">
          {['Every parent, every teacher, one place.', 'The quiet line between home and school.', 'Your school, in everyone\u2019s pocket.'].map((h, i) => (
            <button key={i} className={`tw-chip ${tweaks.headline === i ? 'on' : ''}`} onClick={() => setTweak('headline', i)}>{h}</button>
          ))}
        </div>
      </div>
    </div>
  );
};

window.Nav = Nav;
window.Footer = Footer;
window.TweaksPanel = TweaksPanel;