/* LinkFX marketplace UI kit — Service detail & Blog listing */
const { Button, Heading, Eyebrow, Pill } = window.LinkFXDesignSystem_0271c1;
const Container2 = window.LfxContainer;
const WING2 = window.LFX_WING;

function Breadcrumb({ items }) {
  return (
    <nav style={{ display: "flex", marginBottom: "3rem" }} aria-label="Breadcrumb">
      <ol style={{ display: "inline-flex", alignItems: "center", gap: ".4rem", listStyle: "none", margin: 0, padding: 0 }}>
        {items.map((it, i) => (
          <li key={it} style={{ display: "inline-flex", alignItems: "center", gap: ".4rem" }}>
            {i > 0 && <svg width="12" height="12" viewBox="0 0 20 20" fill="none"><path d="M7 4l6 6-6 6" stroke="var(--primary)" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" /></svg>}
            <span style={{ fontSize: ".75rem", fontWeight: 500, color: "var(--primary)" }}>{it}</span>
          </li>
        ))}
      </ol>
    </nav>
  );
}

function ServiceDetailPage({ onRegister }) {
  const features = [
    { h: "Live interbank pricing", p: "See the same mid-market rate the banks trade on — with our fee shown up-front, every time." },
    { h: "Same-day settlement", p: "Book before cut-off and funds land the same business day across major corridors." },
    { h: "Dedicated dealing desk", p: "Talk to a real dealer for large or complex trades. No call-centre scripts." },
  ];
  return (
    <div>
      <section style={{ position: "relative", overflow: "hidden", background: "var(--base-inverted-100)" }}>
        <svg viewBox="0 0 500 351.04" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style={{ position: "absolute", height: "160%", top: "-30%", right: "-6%", opacity: .5 }}><path fill="var(--base-inverted-200)" d={WING2} /></svg>
        <Container2 style={{ position: "relative" }}>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "3rem", alignItems: "center" }} className="lfx-hero-grid">
            <div style={{ padding: "clamp(2.5rem,5vw,5rem) 0" }}>
              <Breadcrumb items={["Home", "Services", "Spot FX"]} />
              <Heading as="h1" size="h1" color="base-inverted">Spot FX</Heading>
              <p style={{ marginTop: "1.5rem", color: "var(--slate-200)", fontSize: "1.125rem", lineHeight: 1.6, maxWidth: "44ch" }}>
                Exchange 40+ currencies at live interbank rates, settled same day. No spread padding, no surprises — just the mid-market rate and a transparent fee.
              </p>
              <div style={{ marginTop: "2rem" }}>
                <Button variant="accent" size="lg" onClick={onRegister}>Open an account</Button>
              </div>
            </div>
            <div style={{ alignSelf: "stretch", minHeight: 320, display: "flex", alignItems: "flex-end" }}>
              <div style={{ width: "100%", borderRadius: "var(--radius-box) var(--radius-box) 0 0", overflow: "hidden", background: "linear-gradient(160deg,var(--primary-light),var(--primary))", display: "flex", alignItems: "flex-end", justifyContent: "center", minHeight: 360 }}>
                <img src="../../assets/figure-contact-call-to-action.png" alt="A LinkFX customer" style={{ height: "94%", objectFit: "contain" }} />
              </div>
            </div>
          </div>
        </Container2>
      </section>

      <section style={{ marginTop: "var(--section-spacer-lg)" }}>
        <Container2>
          <header style={{ maxWidth: "44rem", marginBottom: "clamp(2rem,4vw,3rem)" }}>
            <Eyebrow>Why Spot FX</Eyebrow>
            <Heading as="h2" size="h2" style={{ marginTop: ".75rem" }}>Pricing you can actually see.</Heading>
          </header>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(240px,1fr))", gap: "1.25rem" }}>
            {features.map((f) => (
              <div key={f.h} style={{ background: "var(--base-100)", borderRadius: "var(--radius-box)", padding: "2rem", boxShadow: "var(--shadow-xs)" }}>
                <div style={{ width: 48, height: 48, borderRadius: "var(--radius-full)", background: "var(--primary)", color: "var(--primary-content)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, marginBottom: "1rem" }}>✓</div>
                <h3 style={{ margin: 0, fontSize: "1.25rem", fontWeight: 500, color: "var(--base-content)" }}>{f.h}</h3>
                <p style={{ margin: ".5rem 0 0", color: "var(--slate-600)", lineHeight: 1.6 }}>{f.p}</p>
              </div>
            ))}
          </div>
        </Container2>
      </section>
    </div>
  );
}

function BlogIndexPage() {
  const cats = ["All", "FX markets", "Product", "Company news", "Guides"];
  const [active, setActive] = React.useState("All");
  const posts = [
    { d: "12 Jun 2026", t: "What a stronger dollar means for importers in H2", e: "The greenback has firmed against most majors this quarter. Here's how to think about hedging your payables before the next Fed meeting." },
    { d: "28 May 2026", t: "Introducing rate alerts on every currency pair", e: "Set a target, get a ping. Our new alerts let you watch any of 40+ pairs and act the moment your level trades." },
    { d: "9 May 2026", t: "A plain-English guide to forward contracts", e: "Forwards sound complicated. They aren't. We break down how locking a rate today protects your margin tomorrow." },
    { d: "21 Apr 2026", t: "LinkFX adds same-day settlement to 12 new corridors", e: "Payments to Southeast Asia and Latin America now settle same business day when booked before cut-off." },
  ];
  return (
    <div>
      <header style={{ position: "relative", overflow: "hidden", background: "var(--base-inverted-100)", padding: "clamp(3rem,6vw,6rem) 0 clamp(2rem,4vw,3rem)" }}>
        <svg viewBox="0 0 500 351.04" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style={{ position: "absolute", height: "160%", top: "-30%", left: "-8%", opacity: .45, transform: "scaleX(-1)" }}><path fill="var(--base-inverted-200)" d={WING2} /></svg>
        <Container2 style={{ position: "relative", textAlign: "center" }}>
          <Eyebrow color="primary">Blog</Eyebrow>
          <Heading as="h1" size="h1" color="base-inverted" style={{ marginTop: ".75rem", maxWidth: "22ch", marginInline: "auto" }}>Latest company &amp; industry news from the team at Link FX.</Heading>
        </Container2>
        <div style={{ position: "relative", display: "flex", flexWrap: "wrap", justifyContent: "center", gap: ".6rem", marginTop: "2.5rem", padding: "0 1.25rem" }}>
          {cats.map((c) => (
            <Pill key={c} onDark active={active === c} onClick={() => setActive(c)}>{c}</Pill>
          ))}
        </div>
      </header>

      <section style={{ paddingTop: "clamp(3rem,6vw,5rem)" }}>
        <Container2>
          <ol style={{ listStyle: "none", margin: 0, padding: 0 }}>
            {posts.map((post, i) => (
              <li key={post.t} style={{ display: "grid", gridTemplateColumns: "120px 60px 1fr", gap: "0" }} className="lfx-blog-row">
                <time style={{ marginTop: ".7rem", fontSize: ".875rem", color: "var(--base-content)", textAlign: "right", paddingRight: "1rem" }}>{post.d}</time>
                <div style={{ position: "relative", display: "flex", justifyContent: "center" }} aria-hidden="true">
                  <div style={{ position: "absolute", width: 1, background: "var(--primary)", left: "50%", transform: "translateX(-50%)", top: i === 0 ? ".5rem" : 0, height: i === 0 ? "calc(100% - .5rem)" : "100%" }}></div>
                  <div style={{ position: "relative", width: 22, height: 22, borderRadius: "50%", background: "var(--base-content)", border: "4px solid var(--base-200)", top: ".5rem" }}></div>
                </div>
                <div style={{ paddingBottom: i === posts.length - 1 ? 0 : "clamp(2.5rem,5vw,4rem)" }}>
                  <a href="#" onClick={(e) => e.preventDefault()}><h3 style={{ margin: "0 0 .75rem", fontSize: "1.5rem", fontWeight: 500, color: "var(--primary-content)", maxWidth: "50ch" }}>{post.t}</h3></a>
                  <p style={{ margin: "0 0 1rem", color: "var(--slate-600)", lineHeight: 1.6, maxWidth: "60ch" }}>{post.e}</p>
                  <a href="#" onClick={(e) => e.preventDefault()} style={{ fontWeight: 500, color: "var(--base-content)", textDecoration: "underline", textDecorationColor: "var(--primary)", textUnderlineOffset: 4 }}>Read more</a>
                </div>
              </li>
            ))}
          </ol>
        </Container2>
      </section>
    </div>
  );
}

Object.assign(window, { LfxServiceDetailPage: ServiceDetailPage, LfxBlogIndexPage: BlogIndexPage });