// Shared components for DNS site
const { useState, useEffect, useRef, useCallback } = React;

// -- Logo mark --
function LogoMark({ size = 28 }) {
  return (
    <div className="logo-mark" style={{ height: size }}>
      <img src="assets/dns-logo.png" alt="Digital Nepal Solution" style={{ height: size, width: 'auto', display: 'block' }} />
    </div>
  );
}

// -- Nav --
function Nav({ route, setRoute, onQuote }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const [mobileOpen, setMobileOpen] = useState(false);

  const go = (r) => { setRoute(r); setMobileOpen(false); window.scrollTo({ top: 0, behavior: 'instant' }); };

  return (
    <header className={`nav ${scrolled ? 'nav-scrolled' : ''}`}>
      <div className="nav-inner">
        <button className="nav-brand" onClick={() => go('home')} aria-label="DNS home">
          <LogoMark size={36} />
        </button>
        <nav className="nav-links" aria-label="primary">
          <button className={route === 'home' ? 'active' : ''} onClick={() => go('home')}>Home</button>
          <button className={route === 'services' ? 'active' : ''} onClick={() => go('services')}>Services</button>
          <button className={route === 'process' ? 'active' : ''} onClick={() => go('process')}>Process</button>
        </nav>
        <div className="nav-cta">
          <button className="btn btn-primary" onClick={onQuote}>Request a quote</button>
        </div>
        <button className="nav-mobile-toggle" onClick={() => setMobileOpen(v => !v)} aria-label="Menu">
          <span /><span /><span />
        </button>
      </div>
      {mobileOpen && (
        <div className="nav-mobile">
          <button onClick={() => go('home')}>Home</button>
          <button onClick={() => go('services')}>Services</button>
          <button onClick={() => go('process')}>Process</button>
          <button className="btn btn-primary" onClick={() => { setMobileOpen(false); onQuote(); }}>Request a quote</button>
        </div>
      )}
    </header>
  );
}

// -- Reveal on scroll --
function Reveal({ children, delay = 0, as: As = 'div', className = '' }) {
  const ref = useRef(null);
  const [visible, setVisible] = useState(false);
  useEffect(() => {
    const el = ref.current;
    if (!el) return;
    const io = new IntersectionObserver((entries) => {
      entries.forEach(e => {
        if (e.isIntersecting) { setVisible(true); io.unobserve(e.target); }
      });
    }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
    io.observe(el);
    return () => io.disconnect();
  }, []);
  return (
    <As ref={ref} className={`reveal ${visible ? 'reveal-in' : ''} ${className}`} style={{ transitionDelay: `${delay}ms` }}>
      {children}
    </As>
  );
}

// -- Footer --
function Footer({ setRoute, onQuote }) {
  return (
    <footer className="footer">
      <div className="footer-inner">
        <div className="footer-col footer-brand">
          <LogoMark size={32} />
          <p>A small team of builders in Kathmandu. We build software with AI in the loop — and a human judgment call on every line that ships.</p>
        </div>
        <div className="footer-col">
          <h4>Sitemap</h4>
          <button onClick={() => { setRoute('home'); window.scrollTo(0,0); }}>Home</button>
          <button onClick={() => { setRoute('services'); window.scrollTo(0,0); }}>Services</button>
          <button onClick={() => { setRoute('process'); window.scrollTo(0,0); }}>Process</button>
          <button onClick={onQuote}>Request a quote</button>
        </div>
        <div className="footer-col">
          <h4>Contact</h4>
          <a href="mailto:babish@proshore.eu">Digital Nepal Solution</a>
          <span>Kathmandu, Nepal</span>
          <span>Mon–Fri · 9am–6pm NPT</span>
        </div>
        {/* <div className="footer-col">
          <h4>Elsewhere</h4>
          <a href="#" onClick={e => e.preventDefault()}>LinkedIn</a>
          <a href="#" onClick={e => e.preventDefault()}>GitHub</a>
          <a href="#" onClick={e => e.preventDefault()}>X / Twitter</a>
        </div> */}
      </div>
      <div className="footer-bottom">
        <span>&copy; 2026 Digital Nepal Solution</span>
        <span className="mono">v2.0 · built with a little help from AI</span>
      </div>
    </footer>
  );
}

// -- Quote Modal --
function QuoteModal({ open, onClose }) {
  const [form, setForm] = useState({ name: '', email: '', company: '', brief: '' });
  const [sent, setSent] = useState(false);
  const [errs, setErrs] = useState({});

  useEffect(() => {
    if (!open) { setSent(false); setErrs({}); setForm({ name: '', email: '', company: '', brief: '' }); }
    const onKey = (e) => { if (e.key === 'Escape') onClose(); };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [open, onClose]);

  if (!open) return null;

  const submit = (e) => {
    e.preventDefault();
    const next = {};
    if (!form.name.trim()) next.name = 'Needed';
    if (!/^\S+@\S+\.\S+$/.test(form.email)) next.email = 'Valid email, please';
    if (form.brief.trim().length < 12) next.brief = 'A sentence or two helps';
    setErrs(next);
    if (Object.keys(next).length) return;

    // Compose mail to babish@proshore.eu
    const to = 'babish@proshore.eu';
    const subject = 'DNS: Request a quote';
    const body =
      `Name: ${form.name}\n` +
      `Email: ${form.email}\n` +
      `Company: ${form.company || '\u2014'}\n\n` +
      `What they're trying to build:\n${form.brief}\n`;
    const mailto = `mailto:${to}?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    const w = window.open(mailto, '_blank');
    if (!w) window.location.href = mailto;

    setSent(true);
  };

  return (
    <div className="modal-backdrop" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()} role="dialog" aria-modal="true">
        <button className="modal-close" onClick={onClose} aria-label="Close">&times;</button>
        {!sent ? (
          <>
            <p className="eyebrow">Request a quote</p>
            <h2 className="modal-title">Tell us what you're trying to build.</h2>
            <p className="modal-sub">We'll come back within a working day — with a plan, a question, or an honest "this isn't a fit."</p>
            <form onSubmit={submit} className="quote-form">
              <label>
                <span>Your name</span>
                <input value={form.name} onChange={e => setForm({...form, name: e.target.value})} placeholder="Jane Doe" />
                {errs.name && <em className="err">{errs.name}</em>}
              </label>
              <div className="row-2">
                <label>
                  <span>Email</span>
                  <input type="email" value={form.email} onChange={e => setForm({...form, email: e.target.value})} placeholder="you@company.com" />
                  {errs.email && <em className="err">{errs.email}</em>}
                </label>
                <label>
                  <span>Company <em className="opt">optional</em></span>
                  <input value={form.company} onChange={e => setForm({...form, company: e.target.value})} placeholder="Acme Inc." />
                </label>
              </div>
              <label>
                <span>What are you trying to build?</span>
                <textarea rows="5" value={form.brief} onChange={e => setForm({...form, brief: e.target.value})} placeholder="A short paragraph is fine. Problem, rough shape, any deadline." />
                {errs.brief && <em className="err">{errs.brief}</em>}
              </label>
              <div className="form-foot">
                <span className="mono small">We read every message personally.</span>
                <button type="submit" className="btn btn-primary">Send it over &rarr;</button>
              </div>
            </form>
          </>
        ) : (
          <div className="sent">
            <div className="sent-mark">&check;</div>
            <h2 className="modal-title">Got it. Thanks.</h2>
            <p className="modal-sub">We'll read this today and reply within one working day — usually sooner. Keep an eye on <span className="mono">{form.email || 'your inbox'}</span>.</p>
            <button className="btn btn-ghost" onClick={onClose}>Close</button>
          </div>
        )}
      </div>
    </div>
  );
}

Object.assign(window, { LogoMark, Nav, Reveal, Footer, QuoteModal });