/* global React */
const { useState: useEPState, useEffect: useEPEffect } = React;

function useEPArm() {
  const [armed, useEPSetArmed] = useEPState(false);
  useEPEffect(() => {const t = setTimeout(() => useEPSetArmed(true), 60);return () => clearTimeout(t);}, []);
  return armed;
}
function epCls(armed, extra = "") {
  return "hero-animate" + (armed ? " in" : "") + (extra ? " " + extra : "");
}
function epDl(ms) {return { transitionDelay: ms + "ms" };}

// ============ ABOUT PAGE ============
window.AboutPage = function AboutPage({ openForm }) {
  const armed = useEPArm();
  const team = [
  {
    name: "Sachin Batra",
    role: "Managing Partner",
    photo: "img/batra.jpg",
    bio: "Strategic oversight across acquisitions, asset management, capital formation, and firm operations. Sachin brings $2.5B+ of transactional and investment experience spanning CRE acquisitions, debt and equity placement, structured finance, and international capital markets — across 36 years of professional experience, including 22 years investing and 16 years in commercial real estate. Previously Managing Director at Religare Global Asset Management, where he conceptualized and listed a healthcare REIT on SGX with ~$560M AUM. BE, Pune University; MBA, Carnegie Mellon University.",
    creds: ["$2.5B+ Transacted", "22+ yrs Investing", "16+ yrs CRE", "MBA · CMU"],
    linkedin: "https://www.linkedin.com/in/sachin-batra"
  },
  {
    name: "Ajita Sanjay Kumar",
    role: "Senior Investment Analyst",
    photo: "img/ajita.jpg",
    bio: "Ajita is a Senior Investment Analyst at VRB Capital, specializing in the underwriting and evaluation of secured real estate credit investments. She is responsible for financial modeling, due diligence, loan acquisition analysis, and collateral assessment across residential, multifamily, and hospitality assets. Her work supports disciplined investment decisions through rigorous credit analysis and strategic research. Ajita holds a Bachelor of Management Studies in Finance from the University of Delhi.",
    creds: ["Financial Modeling", "Due Diligence", "Underwriting", "Asset Management"],
    linkedin: "https://in.linkedin.com/in/ajita-sanjay-kumar-a457a0204"
  },
  {
    name: "Vishal Bhagat",
    role: "Investment Analyst",
    photo: "img/bhagat.jpg",
    bio: "Investment Analyst at VRB Capital, supporting multifamily, hospitality, and residential mortgage note acquisitions across underwriting, asset management, and investor engagement initiatives. Builds the diligence narrative that goes from sourcing memo through investor reporting.",
    creds: ["Underwriting", "Asset Management", "Investor Engagement"],
    linkedin: "https://www.linkedin.com/in/vishal-p-bhagat"
  },
  {
    name: "Pranay Bagaria",
    role: "AI Automations & IT Systems",
    photo: "img/pranay.jpg",
    bio: "Leverages emerging technologies to streamline operations, builds scalable automated solutions, and optimizes workflows to reduce manual tasks. Strong foundation in IT infrastructure with a deep passion for AI. Currently pursuing a BE in Artificial Intelligence and Machine Learning from BMS Institute of Technology & Management (BMS IT&M).",
    creds: ["AI / ML", "Automations", "IT Systems"],
    linkedin: "https://www.linkedin.com/in/pranay-bagaria-a64014293/"
  }];


  const principles = [
  { n: "01", t: "Principal-led conviction.", b: "Every transaction is sponsored, underwritten, and resolved by the same individuals whose capital is committed alongside investors. There are no junior-led approvals." },
  { n: "02", t: "Basis is protection.", b: "We never underwrite to a coupon we do not control. The reliable protection is acquisition basis — typically 60–80% of CLTV — relative to verified collateral value." },
  { n: "03", t: "Three exits, minimum.", b: "Modification, discounted payoff, disposition. A position is approved only when every modeled resolution path — three at minimum — underwrites to principal recovery under stress. The strategy that best supports the loan is executed." },
  { n: "04", t: "Transparency, by default.", b: "Monthly capital account statements, quarterly performance reporting, annual financials. The diligence we apply to loans, we apply to ourselves." }];


  return (
    <div>
      <section className="subpage-hero">
        <div className="subpage-hero-inner">
          <div>
            <div className={epCls(armed, "breadcrumbs")} style={epDl(0)}>
              <a href="index.html">VRB Capital</a>
              <span className="sep">/</span>
              <span>About</span>
            </div>
            <h1 className={epCls(armed)} style={epDl(100)}>A small firm built around a single discipline.</h1>
            <p className={epCls(armed, "lede")} style={epDl(240)}>
              VRB Capital invests in sub-performing and non-performing mortgage notes secured by U.S. real estate — underwriting to verified collateral value and managing every position to resolution in-house. $71.3M+ in capital advised across 50+ completed transactions since 2022.
            </p>
          </div>
          <div className={epCls(armed, "hero-capsule")} style={epDl(300)}>
            <div className="label">FIRM AT A GLANCE</div>
            <ul className="capsule-list">
              <li><strong>Founded</strong>2020 · Itasca, Illinois</li>
              <li><strong>Strategy</strong>Direct mortgage note investments</li>
              <li><strong>CAPITAL ADVISED/DEPLOYED</strong>UPB of $71.3M+ · 50+ transactions</li>
              <li><strong>Realized loss rate</strong>0.0% to date on resolved positions (Past performance is not indicative of future results.)</li>
            </ul>
            <div className="hero-cta">
              <button onClick={() => openForm && openForm()} className="btn btn-hero-cta">Talk to Us</button>
            </div>
          </div>
        </div>
      </section>

      {/* PRINCIPLES */}
      <section className="section">
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Principles</div>
              <h2 className="section-title">Four ideas govern every decision.</h2>
            </div>
            <p className="section-lede">
              These are not aspirations — they are the conditions a transaction must satisfy before VRB Capital commits capital. They appear unchanged on every investment committee memo since the firm's first acquisition.
            </p>
          </div>
          <div className="about-principles">
            {principles.map((p, i) =>
            <Reveal key={i} delay={i * 90} variant="scale">
                <div className="about-principle">
                  <div className="about-principle-num">{p.n}</div>
                  <h3>{p.t}</h3>
                  <p>{p.b}</p>
                </div>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      {/* TEAM */}
      <section className="section section-alt" id="team">
        <div className="container">
          <div className="section-head">
            <div>
              <Reveal variant="fade"><div className="eyebrow">Leadership</div></Reveal>
              <RevealWords text="The people on the deal." tag="h2" className="section-title" />
            </div>
            <Reveal variant="fade" delay={120}><p className="section-lede">One Managing Partner. Two investment analysts. One technology lead. Every transaction passes through them — sourcing, underwriting, resolution, and reporting. There is no outsourced asset management; resolution is the work.</p></Reveal>
          </div>
          <div className="team-grid-mp">
            {team.map((t, i) =>
            <Reveal key={i} delay={i * 100} variant="scale">
                <article className="team-card-mp">
                  <div className="team-photo-mp">
                    <img src={t.photo} alt={t.name} loading="lazy" />
                  </div>
                  <div className="team-body-mp">
                    <h3>
                      {t.name}
                      {t.linkedin && (
                        <a className="team-linkedin-icon-mp" href={t.linkedin} target="_blank" rel="noopener" aria-label={`${t.name} on LinkedIn`}>
                          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.75" strokeLinecap="round" strokeLinejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path><rect width="4" height="12" x="2" y="9"></rect><circle cx="4" cy="7" r="2"></circle></svg>
                        </a>
                      )}
                    </h3>
                    <div className="team-role-mp">{t.role}</div>
                    <p>{t.bio}</p>
                    <div className="team-creds-mp">
                      {t.creds.map((c, j) => <span key={j}>{c}</span>)}
                    </div>
                  </div>
                </article>
              </Reveal>
            )}
          </div>
        </div>
      </section>

      {/* PHILOSOPHY PULL QUOTE */}
      <section className="section section-navy">
        <div className="container-narrow about-quote">
          <div className="eyebrow eyebrow-on-navy">From the Managing Principal</div>
          <blockquote>
            "We are not in the business of forecasting interest rates or modeling rent growth. We are in the business of buying real estate-secured debt at a discount to the verified value of the collateral, and managing that debt to resolution. That is the only thing we do — and it is the only thing we intend to do."
          </blockquote>
          <div className="about-quote-attr">
            <strong>Sachin Batra</strong>
            <span>MANAGING PARTNER, VRB CAPITAL LLC</span>
          </div>
        </div>
      </section>

      <CTASection />
    </div>);

};

// ============ CONTACT PAGE ============
window.ContactPage = function ContactPage() {
  const armed = useEPArm();
  const [submitted, setSubmitted] = useEPState(false);
  const [submitting, setSubmitting] = useEPState(false);
  const [error, setError] = useEPState("");
  const [values, setValues] = useEPState({
    firstName: "", lastName: "", email: "", firm: "", phone: "", interest: "investor", message: "", _gotcha: ""
  });
  const onChange = (k) => (e) => setValues((v) => ({ ...v, [k]: e.target.value }));
  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    setError("");
    setSubmitting(true);
    try {
      await window.submitVrbForm(values, {
        subject: "VRB Capital — Contact Inquiry",
        fields: {
          firstName: "First Name", lastName: "Last Name", email: "Work Email",
          phone: "Phone", firm: "Firm / Affiliation", interest: "Reaching out as", message: "Message"
        }
      });
      setSubmitted(true);
    } catch (err) {
      setError(err.message || "Something went wrong. Please email info@vrbcap.com directly.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <div>
      <section className="subpage-hero">
        <div className="subpage-hero-inner">
          <div>
            <div className={epCls(armed, "breadcrumbs")} style={epDl(0)}>
              <a href="index.html">VRB Capital</a>
              <span className="sep">/</span>
              <span>Contact</span>
            </div>
            <h1 className={epCls(armed)} style={epDl(100)}>Begin a conversation.</h1>
            <p className={epCls(armed, "lede")} style={epDl(240)}>VRB Capital targets a response to investor inquiries within two business days. Capital introductions, advisor referrals, and press requests are reviewed by the Managing Partner directly.

            </p>
          </div>
          <div className={epCls(armed, "hero-capsule")} style={epDl(300)}>
            <div className="label">CONTACT · DIRECT</div>
            <p>
              <strong>Email:</strong> <a href="mailto:sachin@vrbcap.com" style={{ color: "var(--vrb-blue)", textDecoration: "none" }}>info@vrbcap.com</a><br />
              <strong>Phone:</strong> +1 (312) 469 0732<br />
              <strong>Office:</strong> One Pierce Place, Suite 455E<br />
              Itasca, Illinois 60143
            </p>
            <div className="hero-cta">
              <a href="#contact-form" className="btn btn-hero-cta">Send a Message</a>
            </div>
          </div>
        </div>
      </section>

      {/* CONTACT GRID */}
      <section className="section" id="contact-form" style={{ paddingBottom: 24 }}>
        <div className="container">
          <div className="contact-grid">
            <div className="contact-form-col">
              {submitted ?
              <div className="cf-canvas">
                  <div className="cf-header">
                    <div className="cf-header-eyebrow">/ INQUIRY</div>
                    <h3 className="cf-header-title">Request Information</h3>
                  </div>
                  <div className="cf-success">
                    <div className="cf-success-icon">
                      <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.25" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
                    </div>
                    <h3>Inquiry received.</h3>
                    <p>A member of the VRB Capital team will respond to <strong>{values.email}</strong> within two business days. The Managing Principal reviews every accredited investor inquiry directly.</p>
                  </div>
                </div> :

              <form className="cf-canvas" onSubmit={submit}>

                  <input type="text" name="_gotcha" tabIndex="-1" autoComplete="off" aria-hidden="true"
                    value={values._gotcha} onChange={onChange("_gotcha")}
                    style={{ position: "absolute", left: "-9999px", width: 1, height: 1, opacity: 0 }} />

                  {/* ── Header ── */}
                  <div className="cf-header">
                    <div className="cf-header-eyebrow">/ INQUIRY</div>
                    <h3 className="cf-header-title">Request Information</h3>
                  </div>

                  {/* ── Body ── */}
                  <div className="cf-body">

                    {/* Step 01 */}
                    <div className="cf-group">
                      <div className="cf-group-label"><span className="cf-num">01</span> Your Details</div>
                      <div className="cf-row">
                        <div className="cf-field">
                          <label className="cf-label">First Name</label>
                          <input className="cf-input" required value={values.firstName} onChange={onChange("firstName")} />
                        </div>
                        <div className="cf-field">
                          <label className="cf-label">Last Name</label>
                          <input className="cf-input" required value={values.lastName} onChange={onChange("lastName")} />
                        </div>
                      </div>
                      <div className="cf-row">
                        <div className="cf-field">
                          <label className="cf-label">Work Email</label>
                          <input className="cf-input" type="email" required placeholder="name@firm.com" value={values.email} onChange={onChange("email")} />
                        </div>
                        <div className="cf-field">
                          <label className="cf-label">Phone</label>
                          <input className="cf-input" type="tel" placeholder="+1" value={values.phone} onChange={onChange("phone")} />
                        </div>
                      </div>
                      <div className="cf-field">
                        <label className="cf-label">Firm / Affiliation</label>
                        <input className="cf-input" value={values.firm} onChange={onChange("firm")} />
                      </div>
                    </div>

                    {/* Step 02 */}
                    <div className="cf-group">
                      <div className="cf-group-label"><span className="cf-num">02</span> I am reaching out as a…</div>
                      <div className="cf-pills">
                        {[
                      { v: "investor", l: "Accredited Investor" },
                      { v: "advisor", l: "RIA / Advisor" },
                      { v: "institution", l: "Family Office / Institution" },
                      { v: "press", l: "Press / Media" },
                      { v: "other", l: "Other" }].
                      map((o) =>
                      <label key={o.v} className={"cf-pill" + (values.interest === o.v ? " active" : "")}>
                            <input type="radio" name="interest" value={o.v}
                        checked={values.interest === o.v} onChange={onChange("interest")} />
                            {o.l}
                          </label>
                      )}
                      </div>
                    </div>

                    {/* Step 03 */}
                    <div className="cf-group">
                      <div className="cf-group-label"><span className="cf-num">03</span> Message</div>
                      <textarea className="cf-textarea" rows="4" value={values.message} onChange={onChange("message")}
                    placeholder="Briefly describe your inquiry. For investor inquiries, include your typical allocation size and accredited investor status." />
                    </div>

                  </div>

                  {/* ── Footer ── */}
                  <div className="cf-footer">
                    <div className="cf-attest">
                      <input type="checkbox" id="ct-attest2" required />
                      <label htmlFor="ct-attest2">
                        I understand this inquiry does not constitute an offer or subscription, and that VRB Capital will respond before sharing any offering materials.
                      </label>
                    </div>
                    {error &&
                      <div role="alert" style={{ background: "var(--status-negative-bg)", color: "var(--status-negative)", fontSize: 13, lineHeight: 1.5, padding: "10px 14px", borderRadius: "var(--radius-sm)", margin: "0 0 14px" }}>
                        {error}
                      </div>
                    }
                    <div className="cf-footer-row">
                      <button type="submit" className="cf-submit" disabled={submitting}>
                        {submitting ? "Sending…" : "Send Inquiry"}
                        <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12" /><polyline points="12 5 19 12 12 19" /></svg>
                      </button>
                      <p className="cf-disclaimer">Rule 506(b) · Accredited investors only</p>
                    </div>
                  </div>

                </form>
              }
            </div>

            <aside className="contact-side">
              <div className="contact-card">
                <div className="contact-card-eyebrow">/ HEADQUARTERS</div>
                <h4>Itasca, Illinois</h4>
                <p>One Pierce Place, Suite 455E<br />Itasca, IL 60143<br />United States</p>
              </div>
              <div className="contact-card">
                <div className="contact-card-eyebrow">/ DIRECT LINES</div>
                <h4>Investor Relations</h4>
                <p>
                  <a href="mailto:sachin@vrbcap.com">info@vrbcap.com</a><br />
                  +1 (312) 469 0732
                </p>
              </div>
              <div className="contact-card">
                <div className="contact-card-eyebrow">/ RESPONSE WINDOW</div>
                <h4>Two business days</h4>
                <p>Investor inquiries are reviewed by the Managing Partner or the investor relations team. Initial calls are generally scheduled within two business days.</p>
              </div>
              <div className="contact-card">
                <div className="contact-card-eyebrow">/ INVESTMENT ADMINISTRATION</div>
                <h4>Service providers</h4>
                <p>Loan servicing, and counsel relationships are disclosed to qualified investors during diligence.

                </p>
              </div>
            </aside>
          </div>
        </div>
      </section>

      {/* MAP */}
      <section className="section section-alt" style={{ paddingTop: 24 }}>
        <div className="container">
          <div className="section-head">
            <div>
              <div className="eyebrow">Office</div>
              <h2 className="section-title">One Pierce Place · Itasca, Illinois.</h2>
            </div>
            <p className="section-lede">
              VRB Capital is headquartered in the western Chicago suburbs, 18 miles from O'Hare International Airport. Visitors should schedule meetings at least 48 hours in advance via Investor Relations.
            </p>
          </div>
          <div className="contact-map-wrap">
            <span className="map-pin">/ HQ · ITASCA, IL</span>
            <iframe
              src="https://www.google.com/maps?q=One+Pierce+Place+Itasca+IL+60143&output=embed"
              loading="lazy"
              referrerPolicy="no-referrer-when-downgrade"
              title="VRB Capital office — One Pierce Place, Suite 455E, Itasca, IL 60143"
              allowFullScreen></iframe>
          </div>
        </div>
      </section>
    </div>);

};

Object.assign(window, {
  AboutPage: window.AboutPage,
  ContactPage: window.ContactPage
});