/* eslint-disable */
/* =========================================================================
   Helix — Shared layout components (Nav, Footer, Modal)
   ========================================================================= */

const { useState: useStateL, useEffect: useEffectL, useRef: useRefL } = React;

function Nav({ current, onNavigate, onContact }) {
  const [scrolled, setScrolled] = useStateL(false);
  const [mobileOpen, setMobileOpen] = useStateL(false);

  useEffectL(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Close mobile menu on route change
  useEffectL(() => { setMobileOpen(false); }, [current]);

  // Prevent body scroll when menu is open
  useEffectL(() => {
    document.body.style.overflow = mobileOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [mobileOpen]);

  const goTo = (page) => { onNavigate(page); setMobileOpen(false); };

  return (
    <>
      <nav className={`nav ${scrolled ? "is-scrolled" : ""}`} style={{ zIndex: 51 }}>
        <div className="container nav-inner">
          <a href="#" className="nav-logo" onClick={(e) => { e.preventDefault(); goTo("home"); }}>
            <img src="assets/logo.png" alt="Helix Strategies" />
          </a>
          <div className="nav-actions">
            <a href="#" className={`nav-link ${current === "about" ? "is-active" : ""}`}
               onClick={(e) => { e.preventDefault(); goTo("about"); }}>
              About
            </a>
            <a className="btn btn-primary" href="mailto:info@helixaistrategies.com" style={{ padding: "10px 18px", fontSize: 14, textDecoration: "none" }}>
              Get in touch
              <ArrowIcon />
            </a>
          </div>
          <button className="nav-hamburger" aria-label="Toggle menu" onClick={() => setMobileOpen(o => !o)}>
            {mobileOpen ? <CloseIcon size={20} /> : <HamburgerIcon />}
          </button>
        </div>
      </nav>

      {/* Mobile menu */}
      <div className={`mobile-menu ${mobileOpen ? "is-open" : ""}`}>
        <div className="mobile-menu-inner">
          <a href="#" className={`mobile-menu-link ${current === "home" ? "is-active" : ""}`}
             onClick={(e) => { e.preventDefault(); goTo("home"); }}>Home</a>
          <a href="#" className={`mobile-menu-link ${current === "about" ? "is-active" : ""}`}
             onClick={(e) => { e.preventDefault(); goTo("about"); }}>About</a>
          <a className="btn btn-primary mobile-menu-cta" href="mailto:info@helixaistrategies.com">
            Get in touch <ArrowIcon />
          </a>
        </div>
      </div>
    </>
  );
}

function Footer({ onNavigate, onContact }) {
  return (
    <footer className="footer">
      <div className="container footer-inner">
        <p className="footer-cta reveal">Ready to build your data foundation?<br/><em>Let's talk.</em></p>
        <a className="btn btn-primary footer-contact reveal" style={{ transitionDelay: "0.14s" }} href="mailto:info@helixaistrategies.com">
          Contact us
          <ArrowIcon />
        </a>
        <div className="footer-links reveal" style={{ transitionDelay: "0.26s" }}>
          <a href="mailto:info@helixaistrategies.com">info@helixaistrategies.com</a>
          <span className="footer-sep" />
          <a href="https://www.linkedin.com/company/helixstrategies/" target="_blank" rel="noreferrer" aria-label="LinkedIn" className="footer-social">
            <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><path d="M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.062 2.062 0 01-2.063-2.065 2.064 2.064 0 112.063 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z"/></svg>
          </a>
          <a href="https://x.com/HelixStrategies" target="_blank" rel="noreferrer" aria-label="X (Twitter)" className="footer-social">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-4.714-6.231-5.401 6.231H2.744l7.73-8.835L1.254 2.25H8.08l4.259 5.63L18.244 2.25zm-1.161 17.52h1.833L7.084 4.126H5.117L17.083 19.77z"/></svg>
          </a>
          <a href="https://substack.com/@helixstrategies" target="_blank" rel="noreferrer" aria-label="Substack" className="footer-social">
            <svg width="17" height="17" viewBox="0 0 24 24" fill="currentColor"><path d="M22.539 8.242H1.46V5.406h21.08v2.836zM1.46 10.812V24L12 18.11 22.54 24V10.812H1.46zM22.54 0H1.46v2.836h21.08V0z"/></svg>
          </a>
        </div>
        <div className="footer-meta">
          <div className="footer-meta-logo"><img src="assets/logo.png" alt="Helix" /></div>
          <span>Built here in Oklahoma</span>
          <span>© 2026 Helix Strategies LLC</span>
        </div>
      </div>
    </footer>
  );
}

function ContactModal({ open, onClose }) {
  const [sent, setSent] = useStateL(false);
  const [form, setForm] = useStateL({ name: "", company: "", email: "", role: "", message: "", layer: "" });
  useEffectL(() => {
    if (!open) { setSent(false); }
    const onKey = (e) => { if (e.key === "Escape") onClose(); };
    if (open) window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);
  const submit = (e) => {
    e.preventDefault();
    setSent(true);
  };
  const update = (k) => (e) => setForm(f => ({ ...f, [k]: e.target.value }));
  return (
    <div className={`modal-overlay ${open ? "is-open" : ""}`} onClick={onClose}>
      <div className="modal" onClick={(e) => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">
          <CloseIcon />
        </button>
        {sent ? (
          <div className="form-success">
            <div className="form-success-mark"><CheckIcon /></div>
            <h2>We'll be in touch.</h2>
            <p className="modal-sub" style={{ margin: "8px auto 24px", maxWidth: 36 + "ch" }}>
              Thanks {form.name?.split(" ")[0] || "there"} — we read every note personally and respond within one business day.
            </p>
            <button className="btn btn-ghost" onClick={onClose}>Close</button>
          </div>
        ) : (
          <>
            <span className="eyebrow eyebrow-dot">Start a conversation</span>
            <h2 style={{ marginTop: 12 }}>Tell us about your data.</h2>
            <p className="modal-sub">No deck required. A few details and we'll bring the right people to the first call.</p>
            <form onSubmit={submit}>
              <div className="form-row two-col">
                <div className="form-row" style={{ marginBottom: 0 }}>
                  <label>Your name</label>
                  <input value={form.name} onChange={update("name")} required placeholder="Jane Carter" />
                </div>
                <div className="form-row" style={{ marginBottom: 0 }}>
                  <label>Company</label>
                  <input value={form.company} onChange={update("company")} required placeholder="Acme Co." />
                </div>
              </div>
              <div className="form-row two-col">
                <div className="form-row" style={{ marginBottom: 0 }}>
                  <label>Work email</label>
                  <input value={form.email} onChange={update("email")} required type="email" placeholder="jane@acme.com" />
                </div>
                <div className="form-row" style={{ marginBottom: 0 }}>
                  <label>Role</label>
                  <input value={form.role} onChange={update("role")} placeholder="CTO" />
                </div>
              </div>
              <div className="form-row">
                <label>Where are you in the framework?</label>
                <select value={form.layer} onChange={update("layer")}>
                  <option value="">Not sure yet</option>
                  {LAYERS.map(l => <option key={l.id} value={l.id}>{l.label}</option>)}
                  <option value="all">Need a full audit</option>
                </select>
              </div>
              <div className="form-row">
                <label>What's on your mind?</label>
                <textarea value={form.message} onChange={update("message")} placeholder="A few sentences on the data problem you're trying to solve…" />
              </div>
              <div className="form-actions">
                <button type="submit" className="btn btn-primary">
                  Send
                  <ArrowIcon />
                </button>
                <span style={{ fontSize: 13, color: "var(--ink-mute)" }}>
                  We respond within one business day.
                </span>
              </div>
            </form>
          </>
        )}
      </div>
    </div>
  );
}

// ===================== Icons =====================
const ArrowIcon = () => (
  <svg className="btn-arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
    <path d="M2 7h10M8 3l4 4-4 4" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);
const CloseIcon = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
  </svg>
);
const HamburgerIcon = () => (
  <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
    <path d="M3 5h14M3 10h14M3 15h14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"/>
  </svg>
);
const CheckIcon = () => (
  <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
    <path d="M5 11.5l4 4 8-9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
  </svg>
);
const MoonIcon = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
    <path d="M13.5 9.5A5.5 5.5 0 1 1 6.5 2.5a4.5 4.5 0 0 0 7 7z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
  </svg>
);
const SunIcon = () => (
  <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
    <circle cx="8" cy="8" r="3" stroke="currentColor" strokeWidth="1.4"/>
    <path d="M8 1v2M8 13v2M1 8h2M13 8h2M3 3l1.5 1.5M11.5 11.5L13 13M3 13l1.5-1.5M11.5 4.5L13 3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
  </svg>
);
const MeetIcon = () => (
  <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
    <circle cx="10" cy="11" r="3.2" stroke="currentColor" strokeWidth="1.4"/>
    <circle cx="19" cy="13" r="2.5" stroke="currentColor" strokeWidth="1.4"/>
    <path d="M4 22c.6-3 3-5 6-5s5.4 2 6 5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
    <path d="M16 22c.5-2 2-3.5 4-3.5s3.5 1.5 4 3.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
  </svg>
);
const AuditIcon = () => (
  <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
    <rect x="5" y="5" width="14" height="18" rx="1.5" stroke="currentColor" strokeWidth="1.4"/>
    <path d="M8.5 10h7M8.5 14h7M8.5 18h4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
    <circle cx="20.5" cy="19.5" r="3" stroke="currentColor" strokeWidth="1.4"/>
    <path d="M22.6 21.6L25 24" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/>
  </svg>
);
const BuildIcon = () => (
  <svg width="28" height="28" viewBox="0 0 28 28" fill="none">
    <path d="M14 3l9 5v12l-9 5-9-5V8l9-5z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
    <path d="M14 13l9-5M14 13v12M14 13L5 8" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
  </svg>
);

Object.assign(window, { Nav, Footer, ContactModal, ArrowIcon, MeetIcon, AuditIcon, BuildIcon });