// Shared components: Nav, Footer, Logo, BookingModal, Terminal

const Logo = ({ size = 32 }) => (
  <svg width={size * 1.15} height={size} viewBox="0 0 115 100" fill="none" xmlns="http://www.w3.org/2000/svg">
    {/* small back peak (left) */}
    <path d="M4 86 L24 50 L36 72 L32 78 L22 78 L18 86 Z" fill="#FAFAFA" />
    {/* main big peak - simpler silhouette for clarity at small sizes */}
    <path d="M18 86 L48 22 L78 86 Z" fill="#FAFAFA" />
    {/* notch in main peak */}
    <path d="M42 66 L48 54 L54 66 L50 72 L46 72 Z" fill="#0A0A0A" />
    {/* teal front peak */}
    <path d="M44 86 L60 58 L76 86 Z" fill="#00C9A7" />

    {/* circuit traces */}
    <g stroke="#00C9A7" strokeWidth="2.6" fill="none" strokeLinecap="round" strokeLinejoin="round">
      <path d="M50 38 L68 38 L74 32 L94 32" />
      <path d="M54 50 L72 50 L78 44 L100 44" />
      <path d="M62 60 L82 60 L88 66 L108 66" />
      <path d="M54 72 L82 72 L88 78 L104 78" />
    </g>
    {/* nodes */}
    <g fill="#00C9A7">
      <circle cx="50" cy="38" r="3.4" />
      <circle cx="94" cy="32" r="3.4" />
      <circle cx="100" cy="44" r="3.4" />
      <circle cx="62" cy="60" r="3.4" />
      <circle cx="108" cy="66" r="3.4" />
      <circle cx="104" cy="78" r="3.4" />
      <circle cx="54" cy="72" r="3.4" />
    </g>
  </svg>
);

const Nav = ({ currentPage, setPage, openBooking }) => {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const links = [
    { id: 'home', label: 'Home' },
    { id: 'what', label: 'What We Do' },
    { id: 'work', label: 'Work' },
    { id: 'about', label: 'About' },
    { id: 'contact', label: 'Contact' },
  ];

  React.useEffect(() => { setMenuOpen(false); }, [currentPage]);

  React.useEffect(() => {
    document.body.style.overflow = menuOpen ? 'hidden' : '';
    return () => { document.body.style.overflow = ''; };
  }, [menuOpen]);

  const go = (id) => { setPage(id); setMenuOpen(false); };
  const book = () => { openBooking(); setMenuOpen(false); };

  return (
    <nav className="nav">
      <div className="nav-inner">
        <a className="nav-logo" href="#home" onClick={(e) => { e.preventDefault(); go('home'); }}>
          <Logo size={30} />
          <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, gap: 2 }}>
            <span style={{ fontSize: 13, letterSpacing: '0.08em' }}>BASECAMP</span>
            <span style={{ fontSize: 11, letterSpacing: '0.18em', color: 'var(--teal)', fontWeight: 600 }}>DIGITAL</span>
          </span>
        </a>
        <div className="nav-links">
          {links.map(l => (
            <a
              key={l.id}
              href={`#${l.id}`}
              className={`nav-link hide-sm ${currentPage === l.id ? 'active' : ''}`}
              onClick={(e) => { e.preventDefault(); go(l.id); }}
            >
              {l.label}
            </a>
          ))}
          <button className="nav-cta hide-sm" onClick={openBooking}>Book demo</button>
          <button
            className={`nav-toggle show-sm ${menuOpen ? 'open' : ''}`}
            aria-label={menuOpen ? 'Close menu' : 'Open menu'}
            aria-expanded={menuOpen}
            onClick={() => setMenuOpen(v => !v)}
          >
            <span></span><span></span><span></span>
          </button>
        </div>
      </div>
      <div className={`nav-drawer ${menuOpen ? 'open' : ''}`} aria-hidden={!menuOpen}>
        {links.map(l => (
          <a
            key={l.id}
            href={`#${l.id}`}
            className={`nav-drawer-link ${currentPage === l.id ? 'active' : ''}`}
            onClick={(e) => { e.preventDefault(); go(l.id); }}
          >
            {l.label}
          </a>
        ))}
        <button className="nav-cta nav-drawer-cta" onClick={book}>Book demo</button>
      </div>
    </nav>
  );
};

const Footer = ({ setPage, openBooking }) => (
  <footer className="footer">
    <div className="footer-inner">
      <div>
        <div className="nav-logo" style={{ marginBottom: 16 }}>
          <Logo size={26} />
          <span style={{ display: 'flex', flexDirection: 'column', lineHeight: 1, gap: 2 }}>
            <span style={{ fontSize: 12, letterSpacing: '0.08em' }}>BASECAMP</span>
            <span style={{ fontSize: 10, letterSpacing: '0.18em', color: 'var(--teal)', fontWeight: 600 }}>DIGITAL</span>
          </span>
        </div>
        <div className="footer-tag"><span className="t">Ship.</span> <span className="t">Run.</span> <span className="t">Own.</span><br/>Agent-native operations. Remote-first.</div>
      </div>
      <div className="footer-col">
        <span className="h">SITE</span>
        <a href="#home" onClick={(e) => { e.preventDefault(); setPage('home'); }}>Home</a>
        <a href="#what" onClick={(e) => { e.preventDefault(); setPage('what'); }}>What we do</a>
        <a href="#work" onClick={(e) => { e.preventDefault(); setPage('work'); }}>Work</a>
        <a href="#about" onClick={(e) => { e.preventDefault(); setPage('about'); }}>About</a>
      </div>
      <div className="footer-col">
        <span className="h">CONTACT</span>
        <a href="mailto:hello@basecampdigital.ai">hello@basecampdigital.ai</a>
        <a href="#contact" onClick={(e) => { e.preventDefault(); setPage('contact'); }}>Contact form</a>
        <a href="#" onClick={(e) => { e.preventDefault(); openBooking(); }}>Book a demo</a>
      </div>
    </div>
    <div className="footer-bottom">
      <span>© 2026 BASECAMP DIGITAL</span>
      <span>BASECAMPDIGITAL.AI</span>
    </div>
  </footer>
);

const BookingModal = ({ open, onClose }) => {
  const [selected, setSelected] = React.useState(null);
  const [step, setStep] = React.useState('pick'); // pick | confirm | done
  const [name, setName] = React.useState('');
  const [email, setEmail] = React.useState('');

  React.useEffect(() => {
    if (!open) {
      setTimeout(() => { setStep('pick'); setSelected(null); setName(''); setEmail(''); }, 300);
    }
  }, [open]);

  if (!open) return null;

  // Rolling demo slots: next 3 business days, two windows each
  const DAY_NAMES = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
  const MONTH_NAMES = ['JAN', 'FEB', 'MAR', 'APR', 'MAY', 'JUN', 'JUL', 'AUG', 'SEP', 'OCT', 'NOV', 'DEC'];
  const bizDays = (() => {
    const out = [];
    const d = new Date();
    d.setHours(0, 0, 0, 0);
    d.setDate(d.getDate() + 1); // start tomorrow
    while (out.length < 3) {
      const dow = d.getDay();
      if (dow !== 0 && dow !== 6) {
        out.push({ day: DAY_NAMES[dow], date: `${MONTH_NAMES[d.getMonth()]} ${d.getDate()}` });
      }
      d.setDate(d.getDate() + 1);
    }
    return out;
  })();
  const slots = [
    { ...bizDays[0], time: '9:00 AM' },
    { ...bizDays[0], time: '2:00 PM' },
    { ...bizDays[1], time: '11:00 AM' },
    { ...bizDays[1], time: '3:30 PM' },
    { ...bizDays[2], time: '10:00 AM' },
    { ...bizDays[2], time: '4:00 PM' },
  ];

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">✕</button>

        {step === 'pick' && (
          <>
            <div className="run-badge" style={{ marginBottom: 16 }}>
              <span className="g"></span> 30 MIN · WITH RECEIPTS
            </div>
            <h2>See a live demo.</h2>
            <p className="sub">Pick a slot. We'll build something on your data in the first 15 minutes and let you drive the second 15.</p>

            <div className="time-slots">
              {slots.map((s, i) => (
                <button
                  key={i}
                  className={`time-slot ${selected === i ? 'selected' : ''}`}
                  onClick={() => setSelected(i)}
                >
                  <span className="date">{s.day} · {s.date}</span>
                  {s.time}
                </button>
              ))}
            </div>

            <button
              className="btn btn-primary"
              style={{ width: '100%', justifyContent: 'center' }}
              disabled={selected === null}
              onClick={() => setStep('confirm')}
            >
              {selected === null ? 'Pick a time' : `Confirm ${slots[selected].day} ${slots[selected].time}`}
            </button>

            <div className="modal-footer">
              <span>PACIFIC TIME · 30 MIN</span>
              <span className="rcpts">NO DECK. NO PITCH.</span>
            </div>
          </>
        )}

        {step === 'confirm' && (
          <>
            <div className="run-badge" style={{ marginBottom: 16 }}>
              <span className="g"></span> {slots[selected].day} {slots[selected].date} · {slots[selected].time}
            </div>
            <h2>Where should we send it?</h2>
            <p className="sub">Calendar invite, dial-in, and a prep note of what to bring.</p>

            <div className="field">
              <label>Name</label>
              <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Jane Doe" />
            </div>
            <div className="field">
              <label>Work email</label>
              <input type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="jane@company.com" />
            </div>

            <button
              className="btn btn-primary"
              style={{ width: '100%', justifyContent: 'center', marginTop: 8 }}
              disabled={!name || !email}
              onClick={() => setStep('done')}
            >
              Book it →
            </button>
            <button
              onClick={() => setStep('pick')}
              style={{ width: '100%', textAlign: 'center', marginTop: 12, fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-dim)', letterSpacing: '0.08em' }}
            >
              ← PICK A DIFFERENT TIME
            </button>
          </>
        )}

        {step === 'done' && (
          <div className="form-success">
            <div className="check">✓</div>
            <h3>Booked.</h3>
            <p>Invite on its way to <strong style={{ color: 'var(--teal)' }}>{email}</strong>.<br/>We'll bring the receipts.</p>
          </div>
        )}
      </div>
    </div>
  );
};

Object.assign(window, { Logo, Nav, Footer, BookingModal });