/* global React */
const { useState, useEffect, useMemo, useRef } = React;

// =====================================================
// AVISEN, shared bits
// =====================================================

// Real Avisen Strategies logo, image asset (wordmark + bridge integrated)
const BridgeMark = () => null;

const Wordmark = ({ light = false }) => (
  <span className="nav-logo" style={{ display: "inline-flex", flexDirection: "column", lineHeight: 1, gap: 3 }}>
    <span style={{ fontFamily: "'Cinzel', serif", fontSize: 22, letterSpacing: "0.28em", color: light ? "#fff" : "var(--ink-deepest)", fontWeight: 500 }}>AVISEN</span>
    <span style={{ fontFamily: "var(--sans)", fontSize: 9, letterSpacing: "0.42em", color: light ? "rgba(255,255,255,0.55)" : "var(--ink-muted)", textTransform: "uppercase" }}>Strategies</span>
  </span>
);


// =====================================================
// NAV
// =====================================================
const Nav = () =>
<header className="nav">
    <div className="nav-inner">
      <a href="#top"><Wordmark /></a>
      <nav className="nav-links">
        <a href="#diagnostic">Free Diagnostic</a>
        <a href="#approach">What We Do</a>
        <a href="#engagements">Work With Us</a>
        <a href="#about">About</a>
        <a href="#apply" className="btn btn-primary" style={{ padding: "10px 18px", fontSize: 12 }}>Get In Touch</a>
      </nav>
    </div>
  </header>;


// =====================================================
// HERO
// =====================================================
const HERO_COPY = {
  firm: {
    eyebrow: "Capital readiness · Fractional COO",
    title: ["Capital readiness for founders raising into ", <span style={{ color: "var(--accent)" }}>institutional money.</span>],
    lede: "Avisen Strategies builds the systematized fundraising preparation most founders skip, pipeline architecture, narrative, diligence prep, operational scaffolding, so you walk into the room ready."
  },
  work: {
    eyebrow: "Capital strategy & operations",
    title: [<em key="w" style={{ fontFamily: "var(--serif)", fontStyle: "italic", color: "var(--accent)" }}>The work </em>, "behind the round."],
    lede: "Most founders treat raising capital as a campaign. We treat it as an operating discipline. Avisen Strategies builds the investor-readiness work most founders skip, so when capital moves, you're prepared."
  },
  discipline: {
    eyebrow: "Capital readiness · Fractional COO",
    title: ["Rigor in the rest of your business.", <span style={{ color: "var(--accent)" }}> Improvisation in the round.</span>],
    lede: "You run product GTM with discipline. Most founders run their fundraising on instinct. Avisen Strategies builds the preparation, narrative, and operating cadence that lets serious founders walk in ready."
  }
};

const Hero = ({ copyVariant = "firm" }) => {
  const c = HERO_COPY[copyVariant] || HERO_COPY.firm;
  return (
    <section id="top" style={{ paddingTop: "clamp(80px, 10vw, 140px)", paddingBottom: "clamp(60px, 8vw, 120px)" }}>
      <div className="container">
        <div className="eyebrow" style={{ marginBottom: 28 }}>{c.eyebrow}</div>
        <h1 style={{ maxWidth: "16ch", marginBottom: 28 }}>
          {c.title.map((t, i) => <React.Fragment key={i}>{t}{i < c.title.length - 1 ? " " : ""}</React.Fragment>)}
        </h1>
        <p className="lede" style={{ maxWidth: "60ch", marginBottom: 40 }}>{c.lede}</p>
        <div className="row" style={{ gap: 14 }}>
          <a href="#engagements" className="btn btn-primary">
            See how to work with us
            <span aria-hidden="true">→</span>
          </a>
          <a href="#approach" className="btn btn-ghost">Read the approach</a>
        </div>

      </div>
      <div className="container" style={{ marginTop: 96 }}>
        <hr className="rule" />
        <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 24, paddingTop: 28, fontFamily: "var(--sans)", fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-muted)" }}>
          <span>Investor pipeline</span>
          <span>Narrative & memo</span>
          <span>Diligence preparation</span>
          <span>Cap table & governance</span>
          <span>Fractional COO</span>
        </div>
      </div>
    </section>);

};

// =====================================================
// THE PROBLEM, data-led
// =====================================================
const Problem = () =>
<section className="warm">
    <div className="container">
      <div className="grid cols-2" style={{ alignItems: "start", gap: 80 }}>
        <div>
          <div className="tag">The gap</div>
          <h2 style={{ marginTop: 24, marginBottom: 24 }}>
            You run product GTM with a CRM, a funnel, and unit economics. You run fundraising on instinct.
          </h2>
          <p style={{ fontSize: 19, color: "var(--ink)" }}>
            Raising capital is operational work. There is a pipeline to architect, a narrative to write, diligence questions to anticipate, financials and cap tables to clean up. Most founders apply the rigor of their day job to building product, hiring, and customer acquisition, and then improvise their way through the round. The ones who treat capital readiness as a discipline walk in better prepared, with sharper answers, and with fewer fires to put out under time pressure.
          </p>
          <p style={{ fontSize: 19, color: "var(--ink)" }}>
            <strong style={{ color: "var(--ink-deepest)" }}>The same operational rigor doesn't stop being useful after the wire hits.</strong> The disciplines that make a company easy to fund, clean financials, real cadence, sound governance, hiring that compounds, vendors that scale, are the disciplines that make a company work. Avisen Strategies builds that scaffolding before, during, and after a raise.
          </p>
        </div>
        <div style={{ display: "flex", flexDirection: "column", gap: 0, borderTop: "1px solid var(--line)" }}>
          {[
        { stat: "63%", label: "of Series A deals delayed or renegotiated cite operational issues, not market issues, as root cause.", src: "PwC Deals Practice, 2024" },
        { stat: "5–9", label: "Average number of investors a Series A founder pitches before close. Founders who walk in unprepared burn meetings they can't get back.", src: "Carta data, 2023" },
        { stat: "0", label: "Number of founders we've met who treat fundraising preparation with the same rigor as their product roadmap.", src: "Avisen Strategies, observed" }].
        map((d, i) =>
        <div key={i} style={{ padding: "28px 0", borderBottom: "1px solid var(--line)", display: "grid", gridTemplateColumns: "auto 1fr", gap: 24, alignItems: "baseline" }}>
              <div style={{ fontFamily: "var(--display)", fontSize: 36, color: "var(--accent)", letterSpacing: "0.02em", minWidth: 110 }}>{d.stat}</div>
              <div>
                <p style={{ fontSize: 16, color: "var(--ink)", margin: "0 0 8px" }}>{d.label}</p>
                <div style={{ fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--ink-muted)" }}>{d.src}</div>
              </div>
            </div>
        )}
        </div>
      </div>
    </div>
  </section>;


Object.assign(window, { BridgeMark, Wordmark, Nav, Hero, Problem });