/* global React, SiteHeader, HeroBg, Footer, ContactSection, Reveal, Icon */

function CapitalPage() {
  return (
    <div className="page-enter theme-capital" data-screen-label="Capital">
      <SiteHeader current="capital" theme="capital" />

      {/* HERO */}
      <section className="hero" data-screen-label="01 Capital Hero">
        <HeroBg theme="capital" />
        <div className="container hero-content">
          <Reveal>
            <span className="eyebrow">Sinux Capital</span>
          </Reveal>
          <Reveal delay={120}>
            <h1 className="h1"
              style={{
                marginTop: 24, marginBottom: 24, maxWidth: "16ch",
                background: "linear-gradient(135deg, #D3AF37 0%, #A08102 60%, #D3AF37 100%)",
                WebkitBackgroundClip: "text",
                backgroundClip: "text",
                color: "transparent",
              }}
            >
              Strategic Capital. Long-Term Vision.
            </h1>
          </Reveal>
          <Reveal delay={220}>
            <p className="lede" style={{ maxWidth: 660 }}>
              Sinux Capital manages investment portfolios and strategic venture activities — from active
              market participation to funding, acquiring, and scaling businesses with enduring value.
            </p>
          </Reveal>
          <Reveal delay={320}>
            <div className="row-reflow" style={{ marginTop: 36 }}>
              <a href="/capital/contact" className="btn btn-primary">Contact Sinux Capital <Icon.arrow className="arrow" /></a>
              <a href="#pillars" className="btn btn-outline">Our Pillars</a>
            </div>
          </Reveal>
          <Reveal delay={420}>
            <div style={{ marginTop: "clamp(56px, 8vh, 96px)" }}>
              <span className="pill" style={{ background: "color-mix(in oklab, var(--accent) 12%, transparent)", color: "var(--accent)", borderColor: "color-mix(in oklab, var(--accent) 35%, transparent)" }}>
                <span className="check-mark" style={{ background: "transparent", width: "auto", height: "auto" }}>●</span>
                Currently operating in private mode
              </span>
            </div>
          </Reveal>
        </div>
        <div className="scroll-cue">Scroll</div>
      </section>

      {/* TWO PILLARS */}
      <section id="pillars" className="section-py" data-screen-label="02 Pillars">
        <div className="container">
          <Reveal>
            <span className="eyebrow">Two Pillars</span>
            <h2 className="h2" style={{ marginTop: 16, marginBottom: 14, maxWidth: "22ch" }}>
              Compounding capital through two disciplines.
            </h2>
          </Reveal>

          <div className="auto-grid" style={{ "--min": "340px", marginTop: 56, gap: "var(--gap-lg)" }}>
            <Reveal>
              <div className="card" style={{ height: "100%", padding: "clamp(28px, 3vw, 44px)" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div style={{ width: 60, height: 60, borderRadius: 16, background: "color-mix(in oklab, var(--accent) 14%, transparent)", color: "var(--accent)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                    <Icon.trend />
                  </div>
                  <div className="display" style={{ color: "var(--accent)", fontSize: 12, letterSpacing: "0.18em" }}>01</div>
                </div>
                <h3 className="h3" style={{ marginTop: 22, marginBottom: 14, color: "var(--accent)" }}>Investments</h3>
                <p style={{ color: "var(--ink-2)", lineHeight: 1.65 }}>
                  Active portfolio management across equities, ETFs, and structured instruments. Sinux
                  Capital approaches markets with a long-term, research-driven philosophy — focused on
                  building compounding wealth through disciplined allocation.
                </p>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 24 }}>
                  {["Equities", "ETFs", "Options", "Long-Term Portfolio"].map((t, i) => <span key={i} className="pill accent">{t}</span>)}
                </div>
              </div>
            </Reveal>
            <Reveal delay={120}>
              <div className="card" style={{ height: "100%", padding: "clamp(28px, 3vw, 44px)" }}>
                <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
                  <div style={{ width: 60, height: 60, borderRadius: 16, background: "color-mix(in oklab, var(--accent) 14%, transparent)", color: "var(--accent)", display: "inline-flex", alignItems: "center", justifyContent: "center" }}>
                    <Icon.rocket />
                  </div>
                  <div className="display" style={{ color: "var(--accent)", fontSize: 12, letterSpacing: "0.18em" }}>02</div>
                </div>
                <h3 className="h3" style={{ marginTop: 22, marginBottom: 14, color: "var(--accent)" }}>Venture Capital</h3>
                <p style={{ color: "var(--ink-2)", lineHeight: 1.65 }}>
                  Sinux Capital identifies, funds, and acquires early-stage and growing businesses with
                  strong fundamentals and scalable potential. We bring both capital and operational
                  expertise to every engagement.
                </p>
                <div style={{ display: "flex", flexWrap: "wrap", gap: 8, marginTop: 24 }}>
                  {["Business Funding", "Acquisitions", "Strategic Partnerships", "Growth Capital"].map((t, i) => <span key={i} className="pill accent">{t}</span>)}
                </div>
              </div>
            </Reveal>
          </div>
        </div>
      </section>

      {/* PHILOSOPHY */}
      <section className="section-py" data-screen-label="03 Philosophy" style={{ background: "linear-gradient(180deg, transparent, rgba(211,175,55,0.04), transparent)", borderTop: "1px solid var(--line-2)" }}>
        <div className="container">
          <div className="editorial-two-col">
            <Reveal>
              <span className="eyebrow">Investment Philosophy</span>
            </Reveal>
            <div>
              <Reveal delay={80}>
                <h2 className="h2" style={{ marginBottom: 24, maxWidth: "22ch" }}>
                  Patient capital. Concentrated conviction.
                </h2>
              </Reveal>
              <Reveal delay={160}>
                <p className="lede" style={{ marginBottom: 36, maxWidth: 680 }}>
                  We invest in fewer ideas with deeper conviction. Whether allocating to public markets or
                  deploying venture capital into operating businesses, our decisions are governed by long
                  time horizons, rigorous research, and a bias toward durable competitive advantage.
                </p>
              </Reveal>
              <div className="auto-grid" style={{ "--min": "220px" }}>
                {[
                  { t: "Long Horizon", d: "We measure outcomes in years and decades, not quarters." },
                  { t: "Research First", d: "Every position starts with a written thesis." },
                  { t: "Operator Mindset", d: "We back companies we'd be proud to run ourselves." },
                  { t: "Capital + Counsel", d: "Capital is just the start; we partner on operations." },
                ].map((p, i) => (
                  <Reveal key={i} delay={200 + i * 70}>
                    <div className="card" style={{ height: "100%" }}>
                      <div className="display" style={{ color: "var(--accent)", fontSize: 13, letterSpacing: "0.14em", marginBottom: 8 }}>0{i + 1}</div>
                      <h4 className="h4" style={{ marginBottom: 8 }}>{p.t}</h4>
                      <p style={{ color: "var(--ink-2)", fontSize: 14, lineHeight: 1.6 }}>{p.d}</p>
                    </div>
                  </Reveal>
                ))}
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* COMING SOON / PRIVATE MODE CTA */}
      <section className="section-py" data-screen-label="04 Private Mode">
        <div className="container">
          <Reveal>
            <div className="card elevated" style={{ padding: "clamp(40px, 6vw, 80px)", textAlign: "center", border: "1px solid color-mix(in oklab, var(--accent) 30%, transparent)" }}>
              <div className="display" style={{ color: "var(--accent)", fontSize: 12, letterSpacing: "0.24em", marginBottom: 16 }}>
                PRIVATE MODE
              </div>
              <h2 className="h2" style={{ marginBottom: 20, maxWidth: "20ch", marginInline: "auto" }}>
                Sinux Capital is currently operating in private mode.
              </h2>
              <p className="lede" style={{ maxWidth: 600, marginInline: "auto", marginBottom: 32 }}>
                For partnership inquiries, co-investment opportunities, or business acquisition discussions,
                reach out directly.
              </p>
              <div className="row-reflow" style={{ justifyContent: "center" }}>
                <a href="/capital/contact" className="btn btn-primary">Contact Sinux Capital <Icon.arrow className="arrow" /></a>
                <a href="/" className="btn btn-ghost">Back to Group</a>
              </div>
              <div style={{ marginTop: 32, color: "var(--ink-3)", fontSize: 13, letterSpacing: "0.04em" }}>
                info@sinuxcapital.com  ·  +60 12-618 7256  ·  +1 (229) 374-6725
              </div>
            </div>
          </Reveal>
        </div>
      </section>

      <Footer variant="capital" />
    </div>
  );
}

window.CapitalPage = CapitalPage;