/* Page sections: Nav, Hero, ToolSection, Showcase, AboutSection, FinalCTA, Footer
   Copy reused verbatim from milkyway.international (meta) and the Miroverse template
   authored by the Milky Way creators. */

const Logo = ({ size = 26 }) => (
  <span className="logo">
    <svg className="logo-mark" viewBox="0 0 32 32" width={size} height={size} aria-hidden>
      <defs>
        <radialGradient id="logoGrad" cx="50%" cy="50%">
          <stop offset="0%" stopColor="#7ee787" stopOpacity="1" />
          <stop offset="100%" stopColor="#7ee787" stopOpacity="0" />
        </radialGradient>
      </defs>
      <circle cx="16" cy="16" r="15" fill="url(#logoGrad)" opacity="0.4" />
      <path d="M 4 16 C 8 8, 24 8, 28 16 C 24 24, 8 24, 4 16 Z" fill="none" stroke="#7ee787" strokeWidth="1.2" />
      <path d="M 7 13 C 12 11, 20 11, 25 13" fill="none" stroke="#7ee787" strokeWidth="0.8" strokeOpacity="0.6" />
      <circle cx="16" cy="16" r="2.2" fill="#7ee787" />
    </svg>
    <span className="logo-wordmark">MilkyWay</span>
  </span>
);

const ArrowRight = () => (
  <svg className="arrow" width="14" height="14" viewBox="0 0 14 14" fill="none">
    <path d="M3 7h8m0 0L7.5 3.5M11 7l-3.5 3.5" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

function Nav() {
  return (
    <div className="nav-wrap">
      <div className="container">
        <nav className="nav">
          <Logo />
          <div className="nav-links">
            <a href="#tool">The Tool</a>
            <a href="#book">Book</a>
            <a href="#about">About</a>
          </div>
          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
            <a href="#signup" className="btn primary sm">Sign up <ArrowRight /></a>
          </div>
        </nav>
      </div>
    </div>
  );
}

function Hero({ layout = "split" }) {
  return (
    <section className={`hero layout-${layout}`}>
      <div className="container">
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="eyebrow reveal d1"><span className="dot"></span>MILKY WAY INTERNATIONAL</div>
            <h1 className="reveal d2">
              Power your business with a <span className="serif accent">shared&nbsp;map</span> of your enterprise.
            </h1>
            <p className="hero-sub reveal d3">
              Map your enterprise, create a common understanding, navigate different aspects
              and accelerate change. Create one true anchor map for different perspectives
              in your operations, tactics and strategic prioritizations.
            </p>
            <div className="hero-actions reveal d3">
              <a href="#signup" className="btn primary">Sign up <ArrowRight /></a>
              <a href="#about" className="btn ghost">About us →</a>
            </div>
          </div>

          <div className="hero-visual reveal d4">
            <div className="frame-bar">
              <div className="dots"><span></span><span></span><span></span></div>
              <div className="frame-title"><b>milkyway.international</b> &nbsp;/&nbsp; enterprise-map</div>
              <div style={{ width: 60 }}></div>
            </div>
            <div style={{ position: "relative" }}>
              <HeroMap />
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* The Tool — copy lifted from the Miroverse description authored by the
   Milky Way creators (same source, same wording). */
function ToolSection() {
  return (
    <section className="section" id="tool">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"></span>THE MILKY WAY TOOL</div>
          <h2 style={{ marginTop: 14 }}>
            The Milky Way is an <span className="serif accent">enterprise&nbsp;map.</span>
          </h2>
          <p>
            A map showing what you do in which order, what applications you use while doing this,
            what information needs to be communicated between different parts of the enterprise
            as well as how you interact with your customers and partners.
          </p>
        </div>

        <div className="what-grid">
          <div className="feature-list">
            <div className="feature">
              <div className="icon">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 5h12M3 9h8M3 13h12" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /></svg>
              </div>
              <div>
                <h3>What you do, in which order</h3>
                <p>Lay out the value flow of your enterprise — capability by capability, step by step.</p>
              </div>
            </div>
            <div className="feature">
              <div className="icon">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="3" y="3" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.5" /><rect x="10" y="3" width="5" height="5" rx="1" stroke="currentColor" strokeWidth="1.5" /><rect x="3" y="10" width="12" height="5" rx="1" stroke="currentColor" strokeWidth="1.5" /></svg>
              </div>
              <div>
                <h3>The applications you use</h3>
                <p>Surface the IT systems supporting each capability — own and partner — exactly where they live in the work.</p>
              </div>
            </div>
            <div className="feature">
              <div className="icon">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 2v14M2 9h14" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" /><circle cx="9" cy="9" r="3" stroke="currentColor" strokeWidth="1.5" /></svg>
              </div>
              <div>
                <h3>Information that flows between</h3>
                <p>Make the hand-offs visible: what gets communicated between different parts of the enterprise.</p>
              </div>
            </div>
            <div className="feature">
              <div className="icon">
                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="6" stroke="currentColor" strokeWidth="1.5" /><path d="M3 9h12M9 3a9 9 0 010 12" stroke="currentColor" strokeWidth="1.2" /></svg>
              </div>
              <div>
                <h3>How you meet customers &amp; partners</h3>
                <p>The customer journey winds through the map — every touchpoint, every interaction, in context.</p>
              </div>
            </div>
          </div>
          <div className="map-visual">
            <CompactMap />
          </div>
        </div>
      </div>
    </section>
  );
}

function Showcase() {
  return (
    <section className="section" id="example">
      <div className="container">
        <div className="showcase">
          <div className="showcase-image">
            <img src="assets/og-hero.jpg" alt="A Milky Way enterprise map" loading="lazy" />
            <div className="caption">A REAL MILKY WAY MAP</div>
          </div>
          <div className="showcase-copy">
            <div className="eyebrow"><span className="dot"></span>HOW IT LOOKS</div>
            <h2 style={{ marginTop: 14 }}>
              One <span className="serif accent">true&nbsp;anchor&nbsp;map</span> for every perspective.
            </h2>
            <p style={{ marginTop: 18, fontSize: 17 }}>
              Regardless if you are a co-worker, management team member or consultant helping an
              organization, the Milky Way helps you map out, navigate and analyze an enterprise —
              from small businesses with just 20 people to large complex organizations or global companies.
            </p>
            <ul className="points">
              <li><b>Operations</b> — what you do today, made visible.</li>
              <li><b>Tactics</b> — different aspects of change, navigated in context.</li>
              <li><b>Strategy</b> — one anchor for prioritising what's next.</li>
            </ul>
          </div>
        </div>
      </div>
    </section>
  );
}

/* The Book — "The Milky Way: Map, navigate and accelerate change" by Cecilia Nordén.
   Copy from the public product description; outgoing links to Amazon, Goodreads, Google Books. */

const ExternalIcon = () => (
  <svg width="11" height="11" viewBox="0 0 11 11" fill="none" aria-hidden>
    <path d="M3 3h5v5M8 3L3 8" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);

function BookSection() {
  return (
    <section className="section" id="book">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"></span>THE MILKY WAY BOOK</div>
          <h2 style={{ marginTop: 14 }}>
            Map, navigate and <span className="serif accent">accelerate&nbsp;change.</span>
          </h2>
          <p>
            "The Milky Way is a true anchor model and navigational tool for your enterprise —
            a rapid, visual method for better decision making." A book by Cecilia Nordén,
            co-founder of Milky Way International.
          </p>
        </div>

        <div className="book-grid">
          <div className="book-cover-wrap">
            <a
              className="book-cover"
              href="https://www.amazon.com/Milky-Way-navigate-accelerate-change-ebook/dp/B09H61612Y"
              target="_blank" rel="noopener noreferrer"
              aria-label="The Milky Way book on Amazon"
            >
              <img src="assets/book-cover.png" alt="The Milky Way — Map, navigate and accelerate change, by Cecilia Nordén" />
            </a>
            <div className="book-meta-strip">
              <span>2021</span>
              <span className="dot-sep">·</span>
              <span>English &amp; Swedish</span>
              <span className="dot-sep">·</span>
              <span>Kindle &amp; print</span>
            </div>
          </div>

          <div className="book-copy">
            <h3 className="book-q-title">If you are struggling with questions like:</h3>
            <ul className="book-questions">
              <li>How can business and IT use a common map and language to communicate?</li>
              <li>How do we effectively combine different types of information and analyses?</li>
              <li>How can we accelerate change?</li>
              <li>How can we make the right decision to achieve the desired result?</li>
            </ul>
            <p className="book-blurb">
              Then The Milky Way is what you need. The book gives you a solid foundation on which
              to build a better understanding of how all parts of your enterprise collaborate to
              embrace innovation, generate customer value, run more efficient value streams, and
              identify what needs to be improved throughout your organisation — and why.
            </p>

            <div className="book-links">
              <a
                className="btn primary"
                href="https://www.amazon.com/Milky-Way-navigate-accelerate-change-ebook/dp/B09H61612Y"
                target="_blank" rel="noopener noreferrer"
              >
                Buy on Amazon <ExternalIcon />
              </a>
              <a
                className="btn ghost"
                href="https://www.goodreads.com/book/show/59411056-the-milky-way"
                target="_blank" rel="noopener noreferrer"
              >
                Goodreads <ExternalIcon />
              </a>
              <a
                className="btn ghost"
                href="https://books.google.com/books/about/The_milky_way_map_navigate_and_accelerat.html?id=NFJgzQEACAAJ"
                target="_blank" rel="noopener noreferrer"
              >
                Google Books <ExternalIcon />
              </a>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

/* About — drawn from the Miroverse creator bios for Milky Way International */
function AboutSection() {
  return (
    <section className="section" id="about">
      <div className="container">
        <div className="section-head">
          <div className="eyebrow"><span className="dot"></span>ABOUT</div>
          <h2 style={{ marginTop: 14 }}>
            Why we started <span className="serif accent">Milky&nbsp;Way&nbsp;International.</span>
          </h2>
          <p>
            The business world is changing in an ever faster way. The modern organizational world —
            with new innovations, short product cycles, new competitors, new partnerships, new value
            propositions, digitalization demands — is a navigational challenge. More text-based information
            in silos is not working.
          </p>
          <p style={{ marginTop: 14 }}>
            We need a fast and comprehensive way to organize different stakeholder perspectives, to
            create a shared understanding about where we are today, what we are doing, and how we
            navigate together. Happy mapping, navigating and analyzing.
          </p>
        </div>

        <div className="about-grid">
          <div className="about-card">
            <div className="about-avatar" style={{ background: "linear-gradient(135deg, #7ee787, #2d7a3a)" }}>
              <span>CN</span>
            </div>
            <div className="about-meta">
              <h3>Cecilia Nordén</h3>
              <div className="role">Co-founder · Co-creator of the Milky Way</div>
            </div>
            <p>
              Cecilia co-created the Milky Way mapping canvas and has spent the last two decades
              helping organizations — from small businesses to global enterprises — establish a
              shared understanding of what they do and where they are going.
            </p>
          </div>

          <div className="about-card">
            <div className="about-avatar" style={{ background: "linear-gradient(135deg, #a78bfa, #6d28d9)" }}>
              <span>TL</span>
            </div>
            <div className="about-meta">
              <h3>Thomas Larsson</h3>
              <div className="role">Co-founder · Information Architect</div>
            </div>
            <p>
              Thomas co-created the Milky Way and works at the intersection of business
              architecture, IT and change. He helps leadership teams turn scattered context
              into one navigable map of the enterprise.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function FinalCTA() {
  const [firstName, setFirstName] = React.useState("");
  const [lastName, setLastName] = React.useState("");
  const [email, setEmail] = React.useState("");
  const [company, setCompany] = React.useState("");
  const [submitted, setSubmitted] = React.useState(false);
  const [firstNameError, setFirstNameError] = React.useState("");
  const [emailError, setEmailError] = React.useState("");
  const [submitError, setSubmitError] = React.useState("");
  const [submitting, setSubmitting] = React.useState(false);

  function validate() {
    let ok = true;
    if (!firstName.trim()) { setFirstNameError("First name is required"); ok = false; }
    else setFirstNameError("");
    if (!email.trim()) { setEmailError("Email is required"); ok = false; }
    else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) { setEmailError("Please enter a valid email"); ok = false; }
    else setEmailError("");
    return ok;
  }

  async function onSubmit(e) {
    e.preventDefault();
    if (!validate()) return;
    setSubmitting(true);
    setSubmitError("");
    try {
      const resp = await fetch("/api/signup", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          first_name: firstName.trim(),
          last_name: lastName.trim(),
          email: email.trim(),
          company: company.trim(),
        }),
      });
      if (!resp.ok) {
        setSubmitError("Something went wrong. Please try again.");
        return;
      }
      setSubmitted(true);
    } catch (_err) {
      setSubmitError("Network error. Please try again.");
    } finally {
      setSubmitting(false);
    }
  }

  return (
    <section className="section" id="signup">
      <div className="container">
        <div className="final-cta signup-cta">
          <div className="eyebrow"><span className="dot"></span>SIGN UP</div>
          <h2 style={{ marginTop: 18 }}>
            Map your enterprise. <span className="serif accent">Accelerate&nbsp;change.</span>
          </h2>
          <p>
            Create your first Milky Way map and bring your team into a shared understanding.
          </p>

          {submitted ? (
            <div className="signup-success" role="status">
              <div className="signup-success-mark">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none">
                  <path d="M5 11l4 4 8-9" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
                </svg>
              </div>
              <div>
                <h3>You're in.</h3>
                <p>Thanks {firstName}. We'll send the next steps to <b>{email}</b>.</p>
              </div>
            </div>
          ) : (
            <form className="signup-form" onSubmit={onSubmit} noValidate>
              <div className="field">
                <label htmlFor="su-first">First name <span className="req">*</span></label>
                <input
                  id="su-first" type="text" autoComplete="given-name"
                  value={firstName}
                  onChange={(e) => { setFirstName(e.target.value); if (firstNameError) setFirstNameError(""); }}
                  placeholder="First name"
                  aria-invalid={!!firstNameError}
                  className={firstNameError ? "has-error" : ""}
                />
                {firstNameError && <div className="field-error">{firstNameError}</div>}
              </div>
              <div className="field">
                <label htmlFor="su-last">Last name</label>
                <input
                  id="su-last" type="text" autoComplete="family-name"
                  value={lastName} onChange={(e) => setLastName(e.target.value)}
                  placeholder="Last name"
                />
              </div>
              <div className="field">
                <label htmlFor="su-email">Email <span className="req">*</span></label>
                <input
                  id="su-email" type="email" required autoComplete="email"
                  value={email}
                  onChange={(e) => { setEmail(e.target.value); if (emailError) setEmailError(""); }}
                  onBlur={validate}
                  placeholder="you@company.com"
                  aria-invalid={!!emailError}
                  className={emailError ? "has-error" : ""}
                />
                {emailError && <div className="field-error">{emailError}</div>}
              </div>
              <div className="field">
                <label htmlFor="su-company">Company</label>
                <input
                  id="su-company" type="text" autoComplete="organization"
                  value={company} onChange={(e) => setCompany(e.target.value)}
                  placeholder="Your organization"
                />
              </div>
              {submitError && <div className="field-error" role="alert">{submitError}</div>}
              <button type="submit" className="btn primary signup-submit" disabled={submitting}>
                {submitting ? "Sending…" : <>Sign up <ArrowRight /></>}
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer>
      <div className="container">
        <div className="footer-grid-slim">
          <div className="footer-col">
            <Logo />
            <p style={{ marginTop: 16, fontSize: 14, maxWidth: 320 }}>
              Power your business with a shared map of your enterprise.
            </p>
          </div>
          <div className="footer-col">
            <h4>Site</h4>
            <a href="#tool">The Tool</a>
            <a href="#book">Book</a>
            <a href="#about">About</a>
            <a href="#signup">Sign up</a>
          </div>
        </div>
        <div className="footer-bottom">
          <div className="made">© 2026 MILKY WAY INTERNATIONAL</div>
          <div className="made">milkyway.international</div>
        </div>
      </div>
    </footer>
  );
}

Object.assign(window, { Nav, Hero, ToolSection, Showcase, BookSection, AboutSection, FinalCTA, Footer });
