/* LinkFX marketplace UI kit — Home page sections */
const { Button, Heading, Eyebrow, ServiceCard } = window.LinkFXDesignSystem_0271c1;

const WING = "M22.12,116.13c-26.29,22.19-29.62,61.5-7.43,87.79,2.69,3.18,5.68,6.09,8.95,8.67,5.25,4.09,11.11,7.32,17.37,9.58l348.67,128.87h110.32L54,186.29c-11.77-4.26-14.73-14.27-15.47-18.37-.73-4.1-1.4-14.52,8.17-22.58L221.19,0h-59.6L22.12,116.13Z";

function Container({ children, style }) {
  return <div style={{ maxWidth: "var(--container-max)", margin: "0 auto", padding: "0 clamp(1.25rem,4vw,2.5rem)", ...style }}>{children}</div>;
}

/* --- FX rate board mockup (stands in for the live Rive hero animation) --- */
function RateBoard() {
  const rows = [
    { p: "GBP / USD", r: "1.2734", d: "+0.12%", up: true },
    { p: "EUR / USD", r: "1.0862", d: "+0.04%", up: true },
    { p: "USD / JPY", r: "156.21", d: "−0.21%", up: false },
    { p: "GBP / EUR", r: "1.1724", d: "+0.08%", up: true },
    { p: "AUD / USD", r: "0.6631", d: "−0.05%", up: false },
  ];
  return (
    <div style={{ background: "var(--base-inverted-200)", borderRadius: "var(--radius-2xl)", padding: "1.5rem", boxShadow: "var(--shadow-card)" }}>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "1rem" }}>
        <span style={{ color: "#fff", fontWeight: 500 }}>Live rates</span>
        <span style={{ display: "inline-flex", alignItems: "center", gap: 6, color: "var(--primary)", fontSize: ".8rem", fontWeight: 500 }}>
          <span style={{ width: 7, height: 7, borderRadius: "50%", background: "var(--primary)", display: "inline-block" }}></span>
          Interbank
        </span>
      </div>
      <div style={{ display: "flex", flexDirection: "column", gap: ".2rem" }}>
        {rows.map((row) => (
          <div key={row.p} style={{ display: "grid", gridTemplateColumns: "1fr auto auto", alignItems: "center", gap: "1rem", padding: ".7rem .25rem", borderTop: "1px solid rgba(255,255,255,.07)" }}>
            <span style={{ color: "#fff", fontVariantNumeric: "tabular-nums" }}>{row.p}</span>
            <span style={{ color: "var(--slate-200)", fontVariantNumeric: "tabular-nums" }}>{row.r}</span>
            <span style={{ color: row.up ? "#5fd6a0" : "#ff9a8a", fontSize: ".8rem", fontVariantNumeric: "tabular-nums", minWidth: 56, textAlign: "right" }}>{row.d}</span>
          </div>
        ))}
      </div>
      <div style={{ marginTop: "1.25rem" }}>
        <Button variant="primary" style={{ width: "100%" }}>Convert now</Button>
      </div>
    </div>
  );
}

function Hero({ onRegister }) {
  return (
    <section style={{ padding: "0 clamp(1.25rem,4vw,2.5rem)" }}>
      <div style={{ position: "relative", overflow: "hidden", background: "var(--base-inverted-100)", borderRadius: "var(--radius-box)", maxWidth: "1536px", margin: "0 auto" }}>
        <svg viewBox="0 0 500 351.04" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"
          style={{ position: "absolute", height: "150%", top: "-25%", right: "-8%", opacity: .5 }}>
          <path fill="var(--base-inverted-200)" d={WING} />
        </svg>
        <div style={{ position: "relative", display: "grid", gridTemplateColumns: "1.1fr .9fr", gap: "2rem", alignItems: "center", padding: "clamp(2rem,5vw,5rem)" }} className="lfx-hero-grid">
          <div style={{ paddingTop: "3rem" }}>
            <Eyebrow color="primary">The currency marketplace</Eyebrow>
            <Heading as="h1" size="display" color="base-inverted" style={{ marginTop: "1.25rem", maxWidth: "16ch" }}>Move money across borders.</Heading>
            <p style={{ marginTop: "1.5rem", maxWidth: "42ch", color: "var(--slate-200)", fontSize: "1.125rem", lineHeight: 1.6 }}>
              One account for spot FX, global payments and hedging — at live interbank rates, with no hidden markup.
            </p>
            <div style={{ display: "flex", flexWrap: "wrap", gap: ".75rem", marginTop: "2rem" }}>
              <Button variant="accent" size="lg" onClick={onRegister}>Open an account</Button>
              <Button variant="base" size="lg">Chat to an advisor</Button>
            </div>
          </div>
          <div><RateBoard /></div>
        </div>
      </div>
    </section>
  );
}

function ServiceGrid() {
  const ic = (n) => <img src={`../../assets/icons/platform-${n}.svg`} alt="" />;
  const services = [
    { name: "Spot FX", description: "Exchange 40+ currencies at live interbank rates, settled same day.", icon: ic("exchange") },
    { name: "Global Payments", description: "Send funds to 180 countries with transparent, low fees.", icon: ic("payments") },
    { name: "Multi-currency Accounts", description: "Hold and manage balances in every major currency.", icon: ic("cash") },
    { name: "Deposits", description: "Fund your account by bank transfer and settle instantly.", icon: ic("deposit") },
    { name: "Market Data", description: "Rate alerts, charts and daily commentary from our desk.", icon: ic("terminal") },
    { name: "API Access", description: "Automate conversions and payments with a REST API.", icon: ic("settings") },
  ];
  return (
    <section style={{ marginTop: "var(--section-spacer-lg)" }}>
      <Container>
        <header style={{ textAlign: "center", maxWidth: "48rem", margin: "0 auto clamp(2.5rem,5vw,4rem)" }}>
          <Eyebrow>The marketplace</Eyebrow>
          <Heading as="h2" size="h2" style={{ marginTop: ".75rem" }}>Everything you need to trade &amp; pay.</Heading>
          <p style={{ marginTop: "1rem", color: "var(--slate-600)", fontSize: "1.125rem" }}>Access a curated set of FX and cross-border services, all under one login.</p>
        </header>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(260px,1fr))", gap: "1.25rem", alignItems: "stretch" }}>
          {services.map((s) => (
            <ServiceCard key={s.name} name={s.name} description={s.description} icon={s.icon}>
              <Button variant="primary">View service</Button>
            </ServiceCard>
          ))}
        </div>
      </Container>
    </section>
  );
}

function Testimonial() {
  return (
    <section style={{ marginTop: "var(--section-spacer-lg)" }}>
      <Container>
        <div style={{ position: "relative", overflow: "hidden", background: "var(--base-inverted-100)", borderRadius: "var(--radius-box)", padding: "clamp(2.5rem,6vw,6rem)" }}>
          <svg viewBox="0 0 500 351.04" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style={{ position: "absolute", height: "150%", top: "-25%", left: "-10%", opacity: .5, transform: "scaleX(-1)" }}><path fill="var(--base-inverted-200)" d={WING} /></svg>
          <div style={{ position: "relative", maxWidth: "56rem", margin: "0 auto", textAlign: "center" }}>
            <p style={{ margin: 0, color: "#fff", fontSize: "clamp(1.25rem,2.5vw,1.75rem)", lineHeight: 1.5, textWrap: "balance" }}>
              "We cut our FX costs by a third and settle same-day. LinkFX feels less like a bank and more like a trading desk that actually answers the phone."
            </p>
            <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "1rem", marginTop: "2rem" }}>
              <div style={{ width: 56, height: 56, borderRadius: "50%", background: "var(--primary)", color: "var(--primary-content)", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: 600, fontSize: "1.25rem" }}>PM</div>
              <div style={{ textAlign: "left" }}>
                <div style={{ color: "var(--primary)", fontWeight: 500, fontSize: "1.125rem" }}>Priya Menon</div>
                <div style={{ color: "var(--slate-200)", fontSize: ".8rem", textTransform: "uppercase", letterSpacing: ".08em" }}>CFO, Northwind Trading</div>
              </div>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

function CTA({ onRegister }) {
  return (
    <section style={{ marginTop: "var(--section-spacer-lg)" }}>
      <Container>
        <div style={{ position: "relative", overflow: "hidden", borderRadius: "var(--radius-box)", padding: "clamp(3rem,7vw,7rem) 2rem", background: "linear-gradient(to bottom, var(--primary), var(--primary-light))", textAlign: "center" }}>
          <svg viewBox="0 0 500 351.04" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" style={{ position: "absolute", height: "100%", top: 0, right: "-10rem", opacity: .2 }}><path fill="#fff" d={WING} /></svg>
          <div style={{ position: "relative" }}>
            <Heading as="h3" size="h1" color="primary" highlight={false} style={{ margin: "0 auto", maxWidth: "18ch" }}>Ready to move money smarter?</Heading>
            <div style={{ display: "flex", flexWrap: "wrap", gap: ".75rem", justifyContent: "center", marginTop: "2.5rem" }}>
              <Button variant="base-inverted" size="lg" onClick={onRegister}>Open an account</Button>
              <Button variant="base" size="lg">Chat to an advisor</Button>
            </div>
          </div>
        </div>
      </Container>
    </section>
  );
}

function Faqs() {
  const faqs = [
    { q: "How does LinkFX make money if there's no markup?", a: "We charge a small, transparent per-trade fee that's shown before you confirm. No spread padding, no hidden margins." },
    { q: "Which currencies can I trade?", a: "Over 40 currencies for spot FX and payments to 180 countries. New pairs are added regularly." },
    { q: "How long does onboarding take?", a: "Most accounts are verified within one business day. Corporate accounts may take a little longer depending on documents." },
    { q: "Is my money protected?", a: "Client funds are held in segregated safeguarding accounts with tier-one banking partners." },
  ];
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ marginTop: "var(--section-spacer-lg)" }}>
      <Container style={{ maxWidth: "56rem" }}>
        <header style={{ textAlign: "center", marginBottom: "clamp(2rem,5vw,3.5rem)" }}>
          <Heading as="h2" size="h2">Frequently asked questions</Heading>
        </header>
        <div>
          {faqs.map((f, i) => {
            const isOpen = open === i;
            return (
              <div key={i} style={{ borderTop: "1px solid var(--slate-300)", padding: "1.5rem 0" }}>
                <button onClick={() => setOpen(isOpen ? -1 : i)} style={{ width: "100%", display: "flex", justifyContent: "space-between", alignItems: "center", gap: "2rem", background: "none", border: "none", cursor: "pointer", textAlign: "left", padding: 0 }}>
                  <span style={{ fontSize: "clamp(1.125rem,2vw,1.5rem)", fontWeight: 500, color: "var(--base-content)" }}>{f.q}</span>
                  <svg width="36" height="36" viewBox="0 0 43 43" style={{ flex: "0 0 auto" }}>
                    <path fill="var(--primary)" d="M21.5,0C9.63,0,0,9.63,0,21.5s9.63,21.5,21.5,21.5,21.5-9.63,21.5-21.5S33.37,0,21.5,0Z" />
                    {isOpen
                      ? <path fill="var(--primary-content)" d="M13.69,23.46h15.64c1.08-.02,1.93-.92,1.91-2-.02-1.05-.86-1.89-1.91-1.91H13.69c-1.08.02-1.93.92-1.91,2,.02,1.05.86,1.89,1.91,1.91Z" />
                      : <path fill="var(--primary-content)" d="M23.45,29.32v-5.86h5.86c1.08-.02,1.93-.92,1.91-2-.02-1.05-.86-1.89-1.91-1.91h-5.86v-5.86c-.02-1.08-.92-1.93-2-1.91-1.05.02-1.89.86-1.91,1.91v5.86h-5.86c-1.08.02-1.93.92-1.91,2,.02,1.05.86,1.89,1.91,1.91h5.86v5.86c.02,1.08.92,1.93,2,1.91,1.05-.02,1.89-.86,1.91-1.91Z" />}
                  </svg>
                </button>
                {isOpen && <p style={{ margin: "1rem 0 0", color: "var(--slate-600)", fontSize: "1.0625rem", lineHeight: 1.6, maxWidth: "62ch" }}>{f.a}</p>}
              </div>
            );
          })}
        </div>
      </Container>
    </section>
  );
}

function HomePage({ onRegister }) {
  return (
    <div style={{ paddingTop: "1.25rem" }}>
      <Hero onRegister={onRegister} />
      <ServiceGrid />
      <Testimonial />
      <CTA onRegister={onRegister} />
      <Faqs />
    </div>
  );
}

Object.assign(window, { LfxHomePage: HomePage, LfxContainer: Container, LFX_WING: WING });