// Home page sections
function Hero({ onOpenAudit }) {
  return (
    <section className="hero">
      <div className="hero-grain" />
      <div className="wrap hero-grid">
        <div>
          <div className="eyebrow reveal in" style={{ marginBottom: 32 }}>
            iAngels Wealth · Architecture for the wealth you've built
          </div>
          <h1 className="hero-headline reveal in">
            Most platforms <span className="strike">sell products</span>.<br />
            We <span className="accent">architect</span> portfolios.
          </h1>
          <p className="hero-sub reveal">
            For India's founders, HNIs and family offices who've outgrown
            opportunistic investing. We bring you into rooms most platforms
            don't even know exist: alternatives, startups, and structured global
            access.
          </p>
          <div className="hero-cta reveal">
            <button className="btn primary lg" onClick={onOpenAudit}>
              Schedule Introductory Call <IconArrow />
            </button>
            <a href="#approach" className="btn ghost lg">
              Explore our approach
            </a>
          </div>
          <div className="hero-meta reveal">
            <div className="pill">
              <span className="dot" /> Onboarding HNIs · UHNIs · NRIs · Family
              Offices
            </div>
            <div
              className="item"
              style={{ fontSize: 13, color: "var(--ink-3)" }}
            >
              <span className="bars-deco" aria-hidden>
                <span />
                <span />
                <span />
                <span />
              </span>
              <span style={{ marginLeft: 8 }}>
                Backed by 7+ years of frontline deal flow
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
}

function StatsStack() {
  return (
    <section className="section stats-strip" aria-label="Key metrics">
      <div className="wrap">
        <div className="stats reveal">
          <div className="stat">
            <div className="num">
              ₹<Counter to={1240} /> <span className="unit">Cr</span>
            </div>
            <div className="lbl">AUM</div>
          </div>
          <div className="stat">
            <div className="num">
              <Counter to={85} suffix="+" />
            </div>
            <div className="lbl">Startups funded</div>
          </div>
          <div className="stat">
            <div className="num">
              <Counter to={1400} suffix="+" />
            </div>
            <div className="lbl">Network of members</div>
          </div>
          <div className="stat">
            <div className="num">
              <Counter to={30} suffix="+" />
            </div>
            <div className="lbl">Cities</div>
          </div>
        </div>
      </div>
    </section>
  );
}

function CompanyProfile() {
  return (
    <section className="section" id="company">
      <div className="wrap">
        <div className="sec-head reveal company-sec-head">
          <div
            className="eyebrow company-sec-eyebrow"
            style={{ color: "var(--ink-4)" }}
          >
            Company profile
          </div>
          <h2 className="h-1">
            Built on Access.{" "}
            <em className="accent-gradient-text" style={{ fontWeight: 400 }}>
              Anchored in Discipline.
            </em>
          </h2>
          <p className="right body-lg company-sec-sub">
            Your wealth is the result of conviction, risk, and hard work. We
            treat it that way: protecting what you've built, growing what you've
            earned, and unlocking opportunities most investors will never see.
          </p>
        </div>
        <div className="vmc-grid reveal">
          <div className="vmc-cell">
            <div className="vmc-tag">— Vision</div>
            <p className="vmc-body">
              To redefine wealth management for India&apos;s next generation by
              making the most compelling investing opportunities{" "}
              <em>accessible, transparent, and built around you.</em>
            </p>
          </div>
          <div className="vmc-cell">
            <div className="vmc-tag">— Mission</div>
            <p className="vmc-body">
              To help emerging and experienced investors transition from{" "}
              <em>opportunistic investing</em> to{" "}
              <em>structured wealth creation</em> through curated access,
              disciplined portfolio construction, and integrated long-term
              solutions.
            </p>
          </div>
          <div className="vmc-cell">
            <div className="vmc-tag">— Our Commitment</div>
            <p className="vmc-body">
              Through rigorous research, complete transparency, and advice that
              is <em>always, unconditionally yours.</em>
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

function Problem() {
  const items = [
    {
      n: "01",
      t: "Most platforms sell products.",
      d: "They earn from manufacturers, not from you. You get whatever's in the catalog, dressed up as advice.",
    },
    {
      n: "02",
      t: "Most platforms lack alternatives access.",
      d: "Private deals, AIFs, pre-IPO opportunities; these conversations rarely make it to your inbox.",
    },
    {
      n: "03",
      t: "Most portfolios are collections.",
      d: "A PMS here, an MF there, an angel ticket somewhere. None of it talks to the rest. None of it is a strategy.",
    },
  ];
  return (
    <section className="section" id="approach">
      <div className="wrap">
        <div className="problem-hero reveal">
          <div className="problem-hero__copy">
            <h2 className="h-1">The wealth management you've outgrown.</h2>
            <p className="body-lg">
              If you're reading this, you've likely run into all three. We built
              iAngels Wealth because we did, too.
            </p>
          </div>
          <div className="problem-hero__figure">
            <img
              src="assets/wealth-management-problems.png"
              alt="Infographic: Alignment, Access, and Strategy—rarely delivered together, integrated under one approach."
              width="760"
              height="288"
              loading="lazy"
              decoding="async"
            />
          </div>
        </div>
        <div className="problem-grid reveal">
          {items.map((i) => (
            <div className="col" key={i.n}>
              <div className="num">— {i.n}</div>
              <h3 className="ttl">{i.t}</h3>
              <p className="desc">{i.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Pillars() {
  const pillars = [
    {
      n: "01",
      t: "Public & Core",
      d: "A strong core designed to complement alternative exposure: stability, liquidity, and a research-led foundation from which returns can compound.",
      svc: [
        "Mutual Funds",
        "Equity Advisory Products",
        "Unlisted Pre-IPO Shares",
        "Bonds",
      ],
      href: "products-and-solutions.html#public-markets",
    },
    {
      n: "02",
      t: "Startups & Alternatives",
      d: "Curated access to differentiated, low-correlation opportunities most investors never encounter, from early-stage AIFs to pre-IPO and structured debt.",
      svc: [
        "AIFs CAT I, II & III",
        "Customized PMS",
        "MLDs",
        "Structured Products",
        "Exclusive Startups",
      ],
      href: "products-and-solutions.html#alternatives",
      badge: "Flagship",
      highlight: true,
    },
    {
      n: "03",
      t: "Global & Cross Border",
      d: "Efficient global diversification using India's GIFT City framework: cross-border portfolio structuring with tax efficiency and regulatory clarity.",
      svc: ["GIFT City Funds", "Int. Mutual Funds", "Outbound Funds"],
      href: "products-and-solutions.html#global",
    },
  ];
  return (
    <section className="section alt">
      <div className="wrap">
        <div className="sec-head reveal pillars-sec-head">
          <div
            className="eyebrow pillars-sec-eyebrow"
            style={{ color: "var(--ink-4)" }}
          >
            What we do
          </div>
          <h2 className="h-1">
            Three pillars.{" "}
            <em className="accent-gradient-text" style={{ fontWeight: 400 }}>
              One integrated wealth strategy.
            </em>
          </h2>
          <p className="right body-lg pillars-sec-sub">
            We don't sell products. We compose them into a structure that works
            as a single, coherent strategy across public, private, and global
            markets.
          </p>
        </div>
        <div className="pillars">
          {pillars.map((p) => (
            <a
              href={p.href}
              key={p.n}
              className={`pillar-card reveal ${p.highlight ? "highlight" : ""}`}
            >
              {p.badge && <span className="badge">{p.badge}</span>}
              <div className="num">— {p.n}</div>
              <h3 className="ttl">{p.t}</h3>
              <p className="desc">{p.d}</p>
              <ul className="services">
                {p.svc.map((s) => (
                  <li key={s}>{s}</li>
                ))}
              </ul>
              <div className="arrow-link">
                Explore <IconArrow size={12} />
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Advantage() {
  const items = [
    {
      n: "01",
      icon: <IconArchitecture />,
      t: "Portfolio Architecture, Not Product Selling.",
      d: "Every recommendation begins with a deep understanding of your financial life, and ends with a structure built around it.",
    },
    {
      n: "02",
      icon: <IconCore />,
      t: "Alternatives at the Core.",
      d: "Where access defines advantage. Not a bolt-on, not a side allocation; the philosophical center of how we build wealth.",
    },
    {
      n: "03",
      icon: <IconTransparency />,
      t: "Transparency at Every Step.",
      d: "We work for you, not for product manufacturers. Open architecture means every recommendation is driven purely by what's right for your portfolio.",
    },
    {
      n: "04",
      icon: <IconPowerhouses />,
      t: "Two Ecosystems. One Moat.",
      d: "We operate at the intersection of institutional wealth expertise and frontline startup investing experience. That combined perspective shapes every portfolio we build.",
    },
  ];
  return (
    <section className="section">
      <div className="wrap">
        <div className="sec-head reveal" style={{ gridTemplateColumns: "1fr" }}>
          <div>
            <h2 className="h-1">
              What sets <em className="accent-gradient-text">us</em> apart.
            </h2>
          </div>
        </div>
        <div className="advantage reveal">
          {items.map((i) => (
            <div className="cell" key={i.n}>
              <span className="num">{i.n}</span>
              <div className="glyph" style={{ color: "var(--accent)" }}>
                {i.icon}
              </div>
              <h3>{i.t}</h3>
              <p>{i.d}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

function Powerhouses() {
  const moatCards = [
    {
      icon: <IconMoatResearch />,
      t: "Deep Research & Diligence",
      d: "Institutional-style evaluation frameworks and rigorous due diligence across investment opportunities and asset classes.",
    },
    {
      icon: <IconMoatAccess />,
      t: "Investment Access & Ecosystem Connectivity",
      d: "Experience across alternative investments and deep connectivity within founder, operator, investor and product ecosystems.",
    },
    {
      icon: <IconMoatPortfolio />,
      t: "Portfolio Strategy & Relationship Capital",
      d: "We believe strong portfolios are built through aligned relationships, disciplined allocation, and access to opportunities not visible to traditional platforms.",
    },
  ];

  return (
    <section className="power">
      <div className="wrap">
        <div className="sec-head reveal power-sec-head">
          <div
            className="eyebrow power-moat-eyebrow"
            style={{ color: "var(--ink-4)" }}
          >
            The moat
          </div>
          <h2 className="power-headline">
            <span className="power-headline__lead">
              Built at the intersection
            </span>{" "}
            of <em className="power-headline__accent">two investing worlds.</em>
          </h2>
          <p className="body-lg power-moat-sub">
            Most platforms specialize in either wealth products or startup
            access.
            <br />
            Our experience across both ecosystems allows us to bridge that gap.
          </p>
        </div>

        <div className="moat-cards reveal">
          {moatCards.map((card) => (
            <article className="moat-card" key={card.t}>
              <div className="moat-card__icon" aria-hidden="true">
                {card.icon}
              </div>
              <h3 className="moat-card__title">{card.t}</h3>
              <div className="moat-card__rule" aria-hidden="true" />
              <p className="moat-card__desc">{card.d}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FounderQuote() {
  const founderNotes = [
    {
      noteLabel: "Founder's Note",
      name: "Mona Singh",
      role: "Founder, iAngels Wealth & Co-Founder India Accelerator",
      portrait: "assets/portrait-mona-singh.png",
      quote:
        "India's most meaningful opportunities are seldom advertised; they are discovered early, through the right relationships, insights and timing. Our job is to give our clients a seat at that table, before the rest of the market gets a memo.",
    },
    {
      noteLabel: "Co-Founder's Note",
      name: "Hardik Acharya",
      role: "Co-Founder, iAngels Wealth",
      portrait: "assets/portrait-hardik-acharya.png",
      quote:
        "We treat your wealth the way we'd want ours treated. Architecturally. Without product bias. Without manufacturer kickbacks. And with access most platforms can't match.",
    },
  ];

  return (
    <section className="section alt founder-notes-section">
      <div className="wrap">
        <div className="founder-notes-grid">
          {founderNotes.map((f) => (
            <article
              className="leader-card founder-note-card reveal"
              key={f.name}
            >
              <div className="founder-note-card__label">{f.noteLabel}</div>
              <div className="portrait">
                {f.portrait ? (
                  <img
                    src={f.portrait}
                    alt={`Portrait of ${f.name}`}
                    loading="lazy"
                    decoding="async"
                  />
                ) : (
                  "[ Editorial portrait ]"
                )}
              </div>
              <div className="info">
                <blockquote className="founder-note-card__quote">
                  {f.quote}
                </blockquote>
                <h4 className="name">{f.name}</h4>
                <div className="role">{f.role}</div>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

function FinalCTA({ onOpenAudit }) {
  return (
    <>
      <section className="section" style={{ paddingTop: 0, paddingBottom: 0 }}>
        <div className="wrap">
          <div className="about-blurb reveal">
            <div className="about-blurb__eyebrow eyebrow">
              About iAngels Wealth
            </div>
            <div className="about-blurb__lhs lhs">
              <h3>
                The intersection of{" "}
                <em className="accent-gradient-text">financial rigour</em> and{" "}
                <em className="accent-gradient-text">
                  entrepreneurial instinct.
                </em>
              </h3>
            </div>
            <div className="about-blurb__rhs rhs">
              <p>
                iAngels Wealth brings India's HNIs and UHNIs into alternative
                investments that are <em>meticulously researched</em>,{" "}
                <em>carefully curated</em>, and built around a single belief:
                your wealth deserves better than the ordinary.
              </p>
            </div>
          </div>
        </div>
      </section>
      <section className="final-cta" id="contact">
        <div className="wrap">
          <div className="eyebrow final-cta__eyebrow">Ready when you are</div>
          <h2 className="h-display">
            Ready to move from <em className="final-cta__opp">opportunistic</em>
            <br />
            to <span className="final-cta__structured">structured?</span>
          </h2>
          <p className="final-cta__lede">
            Let's build your wealth architecture. A complimentary 30-minute
            portfolio review. We'll walk through your existing holdings,
            identify gaps, and tell you honestly whether we're the right fit.
          </p>
          <div className="row">
            <button className="btn primary lg" onClick={onOpenAudit}>
              Get Started <IconArrow />
            </button>
          </div>
        </div>
      </section>
    </>
  );
}

Object.assign(window, {
  Hero,
  StatsStack,
  CompanyProfile,
  Problem,
  Pillars,
  Advantage,
  Powerhouses,
  FounderQuote,
  FinalCTA,
});