/* global React, ReactDOM, LogoMark, HeroVisual, ArrowEast, ArrowNE,
   ServicesSection, ServicesPreview, IndustriesSection, WhySection, ProcessSection,
   TrustSection, FinalCTA, SolutionsList, AboutManifesto,
   TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor, TweakToggle,
   SITE_CONFIG */
const { useState, useEffect, useCallback } = React;
const CFG = window.SITE_CONFIG;
const mailtoHref = (subject) =>
  `mailto:${CFG.contactEmail}${subject ? `?subject=${encodeURIComponent(subject)}` : ""}`;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#D8F24A",
  "heroHeadline": "practical",
  "density": "comfy"
}/*EDITMODE-END*/;

const ACCENTS = ["#D8F24A", "#22E4FF", "#2E5BFF", "#FF5B1F"];

const PAGES = [
  { id: "home",       label: "Home",       hidden: true },
  { id: "services",   label: "Services" },
  { id: "solutions",  label: "Solutions" },
  { id: "industries", label: "Industries" },
  { id: "about",      label: "About" },
  { id: "contact",    label: "Contact" },
];

const hashToPage = () => {
  const h = (window.location.hash || "").replace("#", "");
  return PAGES.find(p => p.id === h) ? h : "home";
};

/* =============================================================
   NAV
============================================================= */
function Nav({ page, go }) {
  return (
    <header className="nav">
      <div className="nav-inner">
        <div className="nav-left">
          <a className="logo" onClick={(e) => { e.preventDefault(); go("home"); }} href="#home">
            <LogoMark size={24} />
            <span className="logo-name">Vector<span>Swift</span></span>
          </a>
          <nav className="nav-links">
            {PAGES.filter(p => !p.hidden).map(p => (
              <button
                key={p.id}
                className={"nav-link" + (page === p.id ? " active" : "")}
                onClick={() => go(p.id)}
              >
                {p.label}
              </button>
            ))}
          </nav>
        </div>
        <div className="nav-right">
          <button className="btn btn-primary" onClick={() => go("contact")}>
            Book a Meeting <span className="arr"><ArrowEast size={14} /></span>
          </button>
        </div>
      </div>
    </header>
  );
}

/* =============================================================
   FOOTER
============================================================= */
function Footer({ go }) {
  return (
    <footer>
      <div className="shell">
        <div className="foot-top">
          <div className="foot-brand">
            <a className="logo" href="#home" onClick={(e) => { e.preventDefault(); go("home"); }}>
              <LogoMark size={26} />
              <span className="logo-name">Vector<span>Swift</span></span>
            </a>
            <p>{CFG.companyDescription}</p>
            <a className="foot-email" href={mailtoHref()}>{CFG.contactEmail}</a>
          </div>
          <div className="foot-col">
            <h4>Services</h4>
            <ul>
              <li><button onClick={() => go("services")}>Training &amp; Enablement</button></li>
              <li><button onClick={() => go("services")}>Custom AI Software</button></li>
              <li><button onClick={() => go("services")}>Document Intelligence</button></li>
              <li><button onClick={() => go("services")}>Strategy &amp; Implementation</button></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Industries</h4>
            <ul>
              <li><button onClick={() => go("industries")}>Legal</button></li>
              <li><button onClick={() => go("industries")}>Retail</button></li>
              <li><button onClick={() => go("industries")}>Enterprise IT</button></li>
              <li><button onClick={() => go("industries")}>Public Sector</button></li>
            </ul>
          </div>
          <div className="foot-col">
            <h4>Company</h4>
            <ul>
              <li><button onClick={() => go("about")}>About</button></li>
              <li><button onClick={() => go("contact")}>Contact</button></li>
              <li><button onClick={() => go("about")}>Approach</button></li>
            </ul>
          </div>
        </div>
        <div className="foot-bot">
          <span>© {Math.max(CFG.copyrightStart, new Date().getFullYear())} {CFG.companyName}</span>
          <span>{CFG.footerTagline}</span>
        </div>
      </div>
    </footer>
  );
}

/* =============================================================
   HERO (homepage only)
============================================================= */
function Hero({ variant, go }) {
  let headline;
  if (variant === "movement") {
    headline = (
      <h1>
        From AI confusion<br />
        to <em>systems your team</em><br />
        actually uses.
      </h1>
    );
  } else if (variant === "adopt") {
    headline = (
      <h1>
        We help organizations<br />
        <em>adopt, build,</em><br />
        and ship AI.
      </h1>
    );
  } else {
    headline = (
      <h1>
        Practical AI for teams<br />
        ready to <em>move faster</em>.
      </h1>
    );
  }

  return (
    <section className="sec-dark hero">
      <div className="hero-tagline" aria-label="Tagline">{CFG.companyTagline}</div>
      <div className="shell">
        <div className="hero-grid">
          <div className="hero-copy">
            {headline}
            <p className="hero-sub">
              VectorSwift helps teams actually use AI — training your people on Copilot, Claude, and ChatGPT;
              building custom tools when off-the-shelf isn’t enough; and turning scattered pilots into systems that ship.
              We meet you wherever you are.
            </p>
            <div className="hero-ctas">
              <button className="btn btn-primary btn-lg" onClick={() => go("contact")}>
                Book a Meeting <span className="arr"><ArrowEast size={14} /></span>
              </button>
              <button className="btn btn-ghost-dark btn-lg" onClick={() => go("services")}>
                Explore Services
              </button>
            </div>
          </div>

          <div className="hero-visual">
            <HeroVisual />
          </div>
        </div>

        <div className="hero-trust">
          <span className="item">Teams new to AI</span>
          <span className="item">Custom AI builds</span>
          <span className="item">Regulated industries</span>
          <span className="item">Production deployment</span>
        </div>
      </div>
    </section>
  );
}

/* =============================================================
   PAGE HEADER (shared chrome for non-home pages)
============================================================= */
function PageHead({ title, lede }) {
  return (
    <div className="shell">
      <div className="page-head">
        <h1>{title}</h1>
        {lede && <p className="lede">{lede}</p>}
      </div>
    </div>
  );
}

/* =============================================================
   PAGES
============================================================= */
function HomePage({ variant, go }) {
  return (
    <>
      <Hero variant={variant} go={go} />
      <section className="sec-dark">
        <ServicesPreview onMore={() => go("services")} />
      </section>
      <section className="sec-dark">
        <IndustriesSection compact onMore={() => go("industries")} />
      </section>
      <FinalCTA onContact={() => go("contact")} />
    </>
  );
}

function ServicesPage({ go }) {
  return (
    <>
      <section className="sec-dark">
        <PageHead
          title={<>Four practices.<br /><em>One</em> operating model.</>}
          lede="From training your team to deploying production-grade AI systems, every engagement ends with a tangible artifact and the people inside your org who own it."
        />
        <ServicesSection hideHead />
      </section>
      <section className="sec-dark">
        <ProcessSection />
      </section>
      <FinalCTA
        onContact={() => go("contact")}
        title={<>Ready to <em>scope</em> a practice?</>}
        body="Tell us which one fits, and we’ll come back with a concrete shape for the engagement — timeline, team, and what you’d own at the end."
        primaryLabel="Book a Meeting"
        mailSubject="Services scoping"
      />
    </>
  );
}

function SolutionsPage({ go }) {
  return (
    <>
      <section className="sec-dark">
        <PageHead
          title={<>What we actually <em>deliver</em>.</>}
          lede="A short list of the use cases we’re asked to solve most often. Most engagements combine two or three — your stack and your team decide which."
        />
        <SolutionsList />
      </section>
      <FinalCTA
        onContact={() => go("contact")}
        title={<>Which of these maps to <em>your stack</em>?</>}
        body="Most engagements combine two or three. Tell us where you’re trying to move, and we’ll outline how it could land inside your environment."
        primaryLabel="Book a Meeting"
        mailSubject="Use case fit"
      />
    </>
  );
}

function IndustriesPage({ go }) {
  return (
    <>
      <section className="sec-dark">
        <PageHead
          title={<>Built for environments where the wrong AI <em>hurts</em>.</>}
          lede="We work where confidentiality, brand trust, and operational risk are real constraints — not marketing lines. The result is AI that legal, security, and operations teams can actually green-light."
        />
        <IndustriesSection hideHead />
        <div style={{ height: 120 }} />
      </section>
      <FinalCTA
        onContact={() => go("contact")}
        title={<>Working where the wrong AI <em>hurts</em>?</>}
        body="Confidentiality, audit, and security review are first-class concerns from day one. Let’s talk through what AI looks like with your constraints — not in spite of them."
        primaryLabel="Book a Meeting"
        mailSubject="Regulated-industry engagement"
      />
    </>
  );
}

function AboutPage({ go }) {
  return (
    <>
      <section className="sec-dark">
        <PageHead
          title={<>Less hype.<br />More <em>production</em>.</>}
          lede="VectorSwift is an AI consulting practice founded by senior IT and technology operators. We’ve been on the hook for uptime, security, and outcomes — and we build for the people who still are."
        />
        <AboutManifesto />
        <WhySection hideHead />
        <TrustSection />
      </section>
      <FinalCTA
        onContact={() => go("contact")}
        title={<>Want to <em>meet</em> the people who’d lead it?</>}
        body="A 30-minute call with someone who would actually own the engagement. No deck, no pitch — just a working conversation about what you’re trying to land."
        primaryLabel="Book a Meeting"
        mailSubject="Intro call"
      />
    </>
  );
}

function ContactPage() {
  const hasScheduling = !!(CFG.schedulingEmbedUrl || CFG.schedulingUrl);
  return (
    <section className="sec-dark">
      <div className="shell">
        <div className="page-head" style={{ paddingBottom: 32 }}>
          <h1>Get in touch.</h1>
          <p className="lede">
            Two ways to reach us. Send a question and we’ll reply <em>swiftly</em>, or grab a time directly from our calendar — whichever fits.
          </p>
        </div>

        <div className="contact-grid">
          <div className="contact-card contact-card--email">
            <h2>Have a <em>question?</em></h2>
            <a className="btn btn-primary btn-lg" href={mailtoHref("Question for VectorSwift")}>
              Email us <span className="arr"><ArrowEast size={14} /></span>
            </a>
            <div className="contact-blocks">
              <div className="contact-block"><span className="k">Email</span><a className="v" href={mailtoHref("Question for VectorSwift")}>{CFG.contactEmail}</a></div>
              <div className="contact-block"><span className="k">Response</span><span className="v">{CFG.responseSla}</span></div>
              <div className="contact-block"><span className="k">Confidentiality</span><span className="v">NDA on request</span></div>
            </div>
          </div>

          <div className="contact-card contact-card--meeting">
            <h2>Book a <em>meeting.</em></h2>
            <p className="body">
              Pick a time that works for you. Our calendar shows live availability — no email ping-pong.
            </p>

            {hasScheduling ? (
              <>
                <div className="calendar-embed">
                  <iframe
                    src={CFG.schedulingEmbedUrl || CFG.schedulingUrl}
                    title="Book a meeting with VectorSwift"
                    style={{ border: 0 }}
                    width="100%"
                    height="600"
                    frameBorder="0"
                    loading="lazy"
                  />
                </div>
                <a className="btn btn-ghost-dark" href={CFG.schedulingUrl} target="_blank" rel="noreferrer">
                  Open in Google Calendar <span className="arr"><ArrowEast size={14} /></span>
                </a>
                <p className="booking-note">
                  Book directly above, or open Google Calendar in a new tab.
                </p>
              </>
            ) : (
              <div className="calendar-placeholder">
                <p>
                  Calendar booking is being set up. In the meantime, email{" "}
                  <a href={mailtoHref("Booking request")}>{CFG.contactEmail}</a> and we’ll send time options.
                </p>
                <p className="hint">
                  <strong>To enable:</strong> create a Google Calendar Appointment Schedule and paste its URL into <code>schedulingUrl</code> in <code>config.js</code>.
                </p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

/* =============================================================
   APP
============================================================= */
function App() {
  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = useState(hashToPage());

  useEffect(() => {
    document.documentElement.style.setProperty("--accent", tweaks.accent);
    document.body.setAttribute("data-density", tweaks.density);
  }, [tweaks.accent, tweaks.density]);

  useEffect(() => {
    const onHash = () => setPage(hashToPage());
    window.addEventListener("hashchange", onHash);
    return () => window.removeEventListener("hashchange", onHash);
  }, []);

  const go = useCallback((id) => {
    if (id === page) return;
    window.location.hash = id;
    window.scrollTo({ top: 0, behavior: "instant" });
    setPage(id);
  }, [page]);

  useEffect(() => { window.scrollTo({ top: 0 }); }, [page]);

  let body;
  switch (page) {
    case "services":   body = <ServicesPage   go={go} />; break;
    case "solutions":  body = <SolutionsPage  go={go} />; break;
    case "industries": body = <IndustriesPage go={go} />; break;
    case "about":      body = <AboutPage      go={go} />; break;
    case "contact":    body = <ContactPage    />;          break;
    default:           body = <HomePage variant={tweaks.heroHeadline} go={go} />;
  }

  return (
    <>
      <Nav page={page} go={go} />
      <div className="page-wrap" key={page}>{body}</div>
      <Footer go={go} />

      <TweaksPanel title="Tweaks">
        <TweakSection title="Accent color">
          <TweakColor
            label="Accent"
            value={tweaks.accent}
            options={ACCENTS}
            onChange={(v) => setTweak("accent", v)}
          />
        </TweakSection>
        <TweakSection title="Hero headline">
          <TweakRadio
            label="Direction"
            value={tweaks.heroHeadline}
            options={[
              { value: "practical", label: "Practical" },
              { value: "movement",  label: "Movement" },
              { value: "adopt",     label: "Adopt" },
            ]}
            onChange={(v) => setTweak("heroHeadline", v)}
          />
        </TweakSection>
        <TweakSection title="Layout density">
          <TweakRadio
            label="Padding"
            value={tweaks.density}
            options={[
              { value: "tight", label: "Tight" },
              { value: "comfy", label: "Comfy" },
              { value: "airy",  label: "Airy" },
            ]}
            onChange={(v) => setTweak("density", v)}
          />
        </TweakSection>
      </TweaksPanel>
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);