const SERVICES = [
  {
    id: "bespoke",
    slug: "bespoke-wealth-architecture",
    code: "01",
    title: "Bespoke Wealth Architecture",
    long: "We design and engineer total financial ecosystems — structuring your liquid wealth, private holdings and legacy goals into a singular, resilient framework.",
    bullets: ["High-Value Asset Management", "Family Wealth Aggregation"],
    image: "https://images.unsplash.com/photo-1487958449943-2429e8be8625?w=1400&q=80"
  },
  {
    id: "treasury",
    slug: "treasury-management",
    code: "02",
    title: "Treasury Management",
    long: "We make idle corporate cash work without compromising access — engineering funds flow and opening passive & smart-beta exposure across your treasury.",
    bullets: ["Bespoke Funds-Flow Engineering", "Passive & Smart-Beta Access"],
    image: "https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?w=1400&q=80"
  },
  {
    id: "nri",
    slug: "nri-services",
    code: "03",
    title: "NRI Services",
    long: "End-to-end planning for Indians abroad — FEMA-compliant onboarding, NRE/NRO/RFC structuring, DTAA positioning, and access to Indian markets from anywhere in the world.",
    bullets: ["NRE / NRO / RFC account strategy", "DTAA & dual-tax positioning", "PMS & AIF access for NRIs", "Property & inheritance planning"],
    image: "https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=1400&q=80"
  },
  {
    id: "alternatives",
    slug: "alternative-investment-vehicles",
    code: "04",
    title: "Alternative Investment Vehicles",
    long: "Our alternative vehicles grant qualified investors access to highly vetted, private-market opportunities engineered to capture alpha independent of broader market cycles.",
    bullets: ["Private equity & private credit", "AIF Category I / II / III", "Pre-IPO & venture access", "Market-neutral strategies"],
    image: "https://images.unsplash.com/photo-1551836022-d5d88e9218df?w=1400&q=80"
  },
  {
    id: "tracking",
    slug: "external-asset-tracking",
    code: "05",
    title: "External Asset Tracking",
    long: "Our platform features native Consolidated Account Statement (CAS) integration, allowing you to securely aggregate, reconcile and track off-platform investments and external holdings in real time.",
    bullets: ["CAS integration", "Intelligent data reconciliation", "Unified net-worth dashboard"],
    image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1400&q=80"
  },
  {
    id: "estate",
    slug: "nomination-estate-audits",
    code: "06",
    title: "Nomination & Estate Readiness Audits",
    long: "A meticulous, asset-by-asset forensic review designed to ensure that your portfolios, private equity holdings and corporate entities are legally cleared for instant, frictionless transmission.",
    bullets: ["Comprehensive nomination mapping", "Asset-by-asset transmission readiness", "Will & succession coordination"],
    image: "https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=1400&q=80"
  },
];

const Services = () => {
  const [active, setActive] = useState("bespoke");
  const cur = SERVICES.find(s => s.id === active);
  const __b = window.__BASE || "";

  return (
    <section id="services" className="block" style={{ background: "var(--green-800)", color: "var(--cream)" }}>
      <div className="container">
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", flexWrap: "wrap", gap: 24, marginBottom: 56 }}>
          <div style={{ color: "var(--cream)" }}>
            <Marker index={2} total={7} label="One Practice. Six Disciplines."/>
          </div>
          <span className="mono" style={{ fontSize: 11, color: "var(--gold-300)", letterSpacing: "0.14em" }}>§ SERVICES</span>
        </div>

        <h2 className="display" style={{ fontSize: "clamp(33px, 4.5vw, 56px)", color: "var(--cream)", maxWidth: "18ch", marginBottom: 72, lineHeight: 1.02 }}>
          A single desk for every money question
          <span style={{ color: "var(--gold-400)" }}>.</span>
        </h2>

        {/* Services panel */}
        <div className="svc-grid" style={{ display: "grid", gridTemplateColumns: "minmax(280px, 420px) 1fr", gap: 72, alignItems: "start" }}>
          {/* Left: list */}
          <div style={{ display: "flex", flexDirection: "column" }}>
            {SERVICES.map(s => {
              const isActive = active === s.id;
              return (
                <button key={s.id} onClick={() => setActive(s.id)} style={{
                  display: "flex", justifyContent: "space-between", alignItems: "center",
                  padding: "26px 0", borderTop: "1px solid var(--hairline-light)",
                  textAlign: "left", color: isActive ? "var(--gold-400)" : "var(--cream)",
                  transition: "color .25s",
                  position: "relative"
                }}>
                  {isActive && <span style={{ position: "absolute", left: -16, top: "50%", width: 8, height: 8, background: "var(--gold-500)", borderRadius: "50%", transform: "translateY(-50%)" }}/>}
                  <span style={{ display: "flex", alignItems: "baseline", gap: 18 }}>
                    <span className="mono" style={{ fontSize: 11, opacity: 0.55 }}>{s.code}</span>
                    <span className="display" style={{ fontSize: 26, fontWeight: 600 }}>{s.title}</span>
                  </span>
                  <ArrowIcon size={16} style={{ opacity: isActive ? 1 : 0.4, transform: isActive ? "translate(2px,-2px)" : "none" }}/>
                </button>
              );
            })}
            <div style={{ borderTop: "1px solid var(--hairline-light)" }}/>
          </div>

          {/* Right: detail */}
          <div key={cur.id} style={{ animation: "fadeUp .5s ease forwards" }}>
            <Placeholder aspect="16 / 10" label={`// ${cur.title.toLowerCase()}`} tone="green-dark" image={cur.image} style={{ marginBottom: 40 }}/>
            <p className="display-light" style={{ fontSize: 28, lineHeight: 1.25, color: "var(--cream)", textWrap: "balance", marginBottom: 32 }}>
              {cur.long}
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 14, marginBottom: 36 }} className="bullets-grid">
              {cur.bullets.map((b, i) => (
                <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", color: "var(--cream)", opacity: 0.88 }}>
                  <span style={{ color: "var(--gold-400)", marginTop: 4, fontSize: 18 }}>—</span>
                  <span style={{ fontSize: 15, fontWeight: 400 }}>{b}</span>
                </div>
              ))}
            </div>
            <a href={`${__b}services/${cur.slug}.html`} className="btn btn-gold">Explore {cur.title} <ArrowIcon/></a>
          </div>
        </div>
      </div>
      <style>{`
        @keyframes fadeUp { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
        @media (max-width: 900px){
          .svc-grid{ grid-template-columns: 1fr !important; gap: 40px !important }
          .bullets-grid{ grid-template-columns: 1fr !important }
        }
      `}</style>
    </section>
  );
};

window.Services = Services;