/* global React */

// =====================================================
// APPROACH, how we think
// =====================================================
const Approach = () => (
  <section id="approach">
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 2fr", gap: 64, marginBottom: 64 }} className="approach-grid">
        <div>
          <div className="tag">Our discipline</div>
          <h2 style={{ marginTop: 24 }}>Built by operators who've closed the rounds you're trying to close.</h2>
        </div>
        <div>
          <p className="lede" style={{ marginBottom: 0 }}>
            We sit on your side of the table. We've closed the rounds, sat in the partner meetings, and answered the questions that decide them. Avisen Strategies exists for founders who want a senior operator embedded in their raise, not another deck reviewer.
          </p>
        </div>
      </div>
      <hr className="rule" />
      <div className="grid cols-3" style={{ marginTop: 48, gap: 56 }}>
        {[
          { n: "01", t: "Built for the 72 hours after the partner says yes", b: "Pitches open doors. Diligence closes rounds. We optimize for the moment the associate opens your dataroom and starts pressure-testing what you've said." },
          { n: "02", t: "Written, sourced, defensible", b: "Every recommendation arrives in writing, with cited sources. You can hand it to your CFO, your lawyer, or your board the same day, and we stand behind it under questioning." },
          { n: "03", t: "Senior operators, not a junior bench", b: "You work with the partner who scoped your engagement. No project handoff to a junior associate, no slide-deck deliverables that don't survive a hard question. The work is done by people who've been on the other side of the table." }
        ].map(p => (
          <div key={p.n}>
            <div style={{ fontFamily: "var(--display)", fontSize: 22, color: "var(--accent)", letterSpacing: "0.1em", marginBottom: 16 }}>{p.n}</div>
            <h3 style={{ marginBottom: 12 }}>{p.t}</h3>
            <p style={{ fontSize: 16, color: "var(--ink)", margin: 0 }}>{p.b}</p>
          </div>
        ))}
      </div>
      <style>{`
        @media (max-width: 880px) {
          .approach-grid { grid-template-columns: 1fr !important; gap: 24px !important; }
        }
      `}</style>
    </div>
  </section>
);

// =====================================================
// ENGAGEMENTS, three tiers
// =====================================================
const Engagements = ({ hierarchy = "capital" }) => {
  const PAYPAL_HREF = "https://www.paypal.com/ncp/payment/8X8Y2A4NYVC94";

  // Five real engagements + one Phase II teaser. Async products are tightly scoped, written deliverables.
  const diagnostic = {
    eyebrow: "Free · async · 3 minutes",
    title: "The 7-Question Diagnostic",
    desc: "An interactive diligence-readiness scorer. Seven questions on the dimensions investors actually probe: cap table, financials, narrative, pipeline, governance, team, traction. You get a written report scoring your raise across each, a band-specific punch-list of what to fix first, and an honest read on whether you're ready for institutional conversations or whether you'd be better served fixing gaps before you start.",
    price: "Free",
    cta: "Take the diagnostic",
    href: "#diagnostic",
    primary: false
  };

  const exposure = {
    eyebrow: "Productized · async · 2-week SLA",
    title: "Initial Exposure Assessment",
    desc: "A targeted evaluation of your diligence readiness. Async questionnaire → ranked remediation list: what to fix and in what order before your next institutional conversation. No retainer required.",
    price: "$1,950",
    cta: "Purchase",
    href: PAYPAL_HREF,
    external: true,
    primary: true,
    badge: "Most common entry point"
  };

  const pitch = {
    eyebrow: "Productized · 1 intake call + 2-week SLA",
    title: "Pitch Narrative Audit",
    desc: "Deck or video, founder's choice. Includes a structured intake (pitch materials, financials snapshot, current pipeline) submitted before the call so we both prep. The call is critique, not discovery. Written critique returned in 10 business days with margin notes, a one-page narrative rewrite, and a one-page financials template.",
    price: "$3,750",
    cta: "Inquire to start",
    href: "#apply",
    primary: false
  };

  const capitalRetainer = {
    eyebrow: "Retainer · by inquiry · returning clients only",
    title: "Capital Raise Advisory",
    desc: "Full investor GTM run alongside you through close: pipeline architecture, qualification, narrative, diligence prep, dataroom, partner-meeting prep, and the GTM playbook customized to your raise. Reserved for clients we've worked with before.",
    price: "Scoped",
    cta: "Inquire",
    href: "#apply",
    primary: false
  };

  const cooRetainer = {
    eyebrow: "Retainer · by inquiry",
    title: "Fractional COO",
    desc: "Embedded operator focused on de-risking the business, engineering process, and building for scale, financial discipline, governance, hiring, vendor negotiation, operating cadence. The operational scaffolding institutional investors expect to find when they look. Senior operator presence without a full-time hire.",
    price: "Scoped",
    cta: "Inquire",
    href: "#apply",
    primary: false
  };

  const fieldGuide = {
    eyebrow: "Coming Q2 2026 · async · self-paced",
    title: "Investor GTM Field Guide",
    desc: "A written playbook on running fundraising as an enterprise sales process, pipeline, qualification, narrative, outreach cadence, diligence prep. The Avisen POV, packaged. Join the list to be notified at launch.",
    price: "$497–$997",
    cta: "Notify me",
    href: "#apply",
    primary: false,
    soon: true
  };

  const tiers = {
    capital: [diagnostic, exposure, pitch, capitalRetainer, cooRetainer, fieldGuide],
    coo: [diagnostic, { ...cooRetainer, primary: true, badge: "Flagship engagement" }, exposure, pitch, capitalRetainer, fieldGuide],
    equal: [diagnostic, exposure, pitch, { ...capitalRetainer, primary: true }, { ...cooRetainer, primary: true }, fieldGuide]
  };
  const list = tiers[hierarchy] || tiers.capital;

  return (
    <section id="engagements" className="cool">
      <div className="container">
        <div style={{ marginBottom: 56, maxWidth: 760 }}>
          <div className="tag">Services</div>
          <h2 style={{ marginTop: 24 }}>Six ways to work together.</h2>
          <p style={{ fontSize: 19, color: "var(--ink)", marginTop: 16, maxWidth: "62ch" }}>
            Capital readiness and operational readiness are the same work seen from two angles. The async products focus on the raise. The retainers, Capital Raise Advisory and Fractional COO, sit before, during, and after the round, building the operational scaffolding that makes the raise easier and the company stronger after.
          </p>
        </div>
        <div className="engagements-grid">
          {list.map((t, i) => (
            <div key={i} style={{
              background: t.soon ? "transparent" : (t.primary ? "var(--ink-deepest)" : "#fff"),
              color: t.primary ? "#fff" : "var(--ink-deep)",
              padding: "32px 28px",
              border: t.soon ? "1px dashed var(--line)" : (t.primary ? "1px solid var(--ink-deepest)" : "1px solid var(--line)"),
              display: "flex", flexDirection: "column",
              position: "relative",
              opacity: t.soon ? 0.78 : 1
            }}>
              {t.badge && (
                <div style={{ position: "absolute", top: -12, left: 24, background: "var(--accent)", color: "#fff", padding: "5px 12px", fontFamily: "var(--sans)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 600 }}>{t.badge}</div>
              )}
              {t.soon && (
                <div style={{ position: "absolute", top: -12, left: 24, background: "var(--ink-muted)", color: "#fff", padding: "5px 12px", fontFamily: "var(--sans)", fontSize: 10, letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 600 }}>Phase II, coming soon</div>
              )}
              <div style={{ fontFamily: "var(--sans)", fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: t.primary ? "rgba(255,255,255,0.6)" : "var(--teal)", marginBottom: 14 }}>{t.eyebrow}</div>
              <h3 style={{ color: t.primary ? "#fff" : "var(--ink-deepest)", marginBottom: 12, fontSize: 22 }}>{t.title}</h3>
              <p style={{ fontSize: 14, color: t.primary ? "rgba(255,255,255,0.8)" : "var(--ink)", flex: 1, lineHeight: 1.55 }}>{t.desc}</p>
              <div style={{ borderTop: `1px solid ${t.primary ? "rgba(255,255,255,0.15)" : "var(--line)"}`, paddingTop: 18, marginTop: 8, display: "flex", justifyContent: "space-between", alignItems: "center", gap: 10 }}>
                <div style={{ fontFamily: "var(--display)", fontSize: 20, color: t.primary ? "#fff" : "var(--ink-deepest)" }}>{t.price}</div>
                <a href={t.href} target={t.external ? "_blank" : undefined} rel={t.external ? "noopener" : undefined} className={t.primary ? "btn btn-accent" : "btn btn-ghost"} style={{ padding: "10px 14px", fontSize: 11 }}>{t.cta} <span aria-hidden="true">→</span></a>
              </div>
            </div>
          ))}
        </div>
      </div>
      <style>{`
        .engagements-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 20px;
        }
        @media (max-width: 1080px) {
          .engagements-grid { grid-template-columns: repeat(2, 1fr); }
        }
        @media (max-width: 680px) {
          .engagements-grid { grid-template-columns: 1fr; }
        }
      `}</style>
    </section>
  );
};

// =====================================================
// PROOF, designed around absence
// =====================================================
const Proof = () => (
  <section>
    <div className="container">
      <div style={{ marginBottom: 48 }}>
        <div className="tag">How we work</div>
        <h2 style={{ marginTop: 24, maxWidth: "20ch" }}>What working with us looks like.</h2>
        <p style={{ fontSize: 19, color: "var(--ink)", marginTop: 16, maxWidth: "60ch" }}>
          We offer both synchronous and asynchronous engagements, structured to align with founder schedules. Productized written deliverables (Diagnostic, Exposure Assessment, Pitch Narrative Audit) run on a defined SLA. Retainer work (Capital Raise Advisory, Fractional COO) is embedded and synchronous work. Retainer engagements are by inquiry; the productized work is how we get to know each other first.
        </p>
      </div>
      <div className="grid cols-2" style={{ gap: 56 }}>
        <div style={{ background: "var(--bg-warm)", padding: 36, border: "1px solid var(--line)" }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>What you get back</div>
          <h3 style={{ marginBottom: 16, fontSize: 22 }}>Written. Sourced. Defensible.</h3>
          <p style={{ fontSize: 15, color: "var(--ink)" }}>
            Every deliverable arrives as a document you can forward, mark up, and defend in a partner meeting. No call recordings to re-watch, no slide salad, a written artifact built to the standard an investor will hold it to.
          </p>
          <ul style={{ marginTop: 20, paddingTop: 20, borderTop: "1px solid var(--line)", listStyle: "none", padding: "20px 0 0", display: "flex", flexDirection: "column", gap: 10, fontFamily: "var(--sans)", fontSize: 13, color: "var(--ink)" }}>
            <li><span style={{ color: "var(--accent)", fontWeight: 600, marginRight: 10 }}> </span>Specific to your raise, not a template</li>
            <li><span style={{ color: "var(--accent)", fontWeight: 600, marginRight: 10 }}> </span>Sources cited where claims are made</li>
            <li><span style={{ color: "var(--accent)", fontWeight: 600, marginRight: 10 }}> </span>Delivered on a stated SLA</li>
          </ul>
        </div>
        <div style={{ background: "var(--bg-warm)", padding: 36, border: "1px solid var(--line)", display: "flex", flexDirection: "column", justifyContent: "center", alignItems: "flex-start" }}>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Selective by design</div>
          <h3 style={{ marginBottom: 16, fontSize: 22 }}>Most clients start async.</h3>
          <p style={{ fontSize: 15, color: "var(--ink)" }}>
            The Exposure Assessment is the most common entry point: a written, ranked diligence-readiness evaluation, no calendar required. From there, founders typically move to the Pitch Narrative Audit and, if there's a fit, into a retainer engagement.
          </p>
          <a href="#engagements" className="btn btn-ghost" style={{ marginTop: 12 }}>See engagements <span aria-hidden="true">→</span></a>
        </div>
      </div>
    </div>
  </section>
);

// =====================================================
// ABOUT, Ettin warmth
// =====================================================
const About = () => (
  <section id="about" className="dark">
    <div className="container">
      <div className="grid cols-2" style={{ gap: 80, alignItems: "center" }}>
        <div>
          <div className="eyebrow-light">About the firm</div>
          <h2 style={{ color: "#fff", marginTop: 20, fontFamily: "var(--serif)", fontStyle: "italic", fontWeight: 400 }}>
            "The founders who close the cleanest rounds run their fundraise with the same rigor they run their product."
          </h2>
          <p style={{ color: "rgba(255,255,255,0.78)", fontSize: 17, marginTop: 28 }}>
            We've sat on both sides of the diligence table. We've closed transactions led by Founders Fund and backed by Warburg Pincus. We've watched founders walk into partner meetings with great pitches and operational fundamentals that wouldn't survive an associate's first weekend with their books.
          </p>
          <p style={{ color: "rgba(255,255,255,0.78)", fontSize: 17 }}>
            Avisen Strategies builds the discipline that closes rounds without repricing, and the operational scaffolding that makes the next round easier than the last. If that's the work you want done well, take the diagnostic. We'll talk if it's a fit.
          </p>
          <a href="#apply" className="btn btn-ghost-light" style={{ marginTop: 16 }}>Inquire about working together</a>
        </div>
        <div style={{ aspectRatio: "4/5", background: "rgba(255,255,255,0.04)", border: "1px solid rgba(255,255,255,0.08)", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: 32 }}>
          <div className="eyebrow-light">Principles</div>
          <div style={{ flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", gap: 18 }}>
            {[
              "Operator's lens. Advice from a seat we've actually held, built and run companies, not just advised them.",
              "Diligence-grade rigor. Every deliverable is written, sourced, and defensible against an investor's first hard question.",
              "Compounding work. What we build for the raise, pipeline, narrative, dataroom, cadence, keeps working after the wire hits.",
              "Discretion. Your raise, your numbers, and your operating reality stay between us."
            ].map((line, i) => (
              <div key={i} style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 14, alignItems: "baseline" }}>
                <span style={{ fontFamily: "var(--mono)", fontSize: 11, color: "var(--accent)" }}>{String(i + 1).padStart(2, "0")}</span>
                <span style={{ color: "rgba(255,255,255,0.85)", fontFamily: "var(--serif)", fontSize: 15, lineHeight: 1.5 }}>{line}</span>
              </div>
            ))}
          </div>
          <div>
            <div style={{ fontFamily: "var(--sans)", fontSize: 12, color: "rgba(255,255,255,0.45)", letterSpacing: "0.12em", textTransform: "uppercase" }}>Avisen Strategies LLC</div>
          </div>
        </div>
      </div>
    </div>
  </section>
);

// =====================================================
// FINAL CTA + FOOTER
// =====================================================
const FinalCTA = () => {
  const [inquiryName, setInquiryName] = React.useState("");
  const [inquiryCompany, setInquiryCompany] = React.useState("");
  const [inquiryEmail, setInquiryEmail] = React.useState("");
  const [inquiryEngagement, setInquiryEngagement] = React.useState("");
  const [inquiryTiming, setInquiryTiming] = React.useState("");
  const [inquiryContext, setInquiryContext] = React.useState("");
  const [inquiryStatus, setInquiryStatus] = React.useState("idle"); // idle | sending | done | error

  const submitInquiry = async (e) => {
    e.preventDefault();
    setInquiryStatus("sending");
    try {
      await fetch("https://api.brevo.com/v3/contacts", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "api-key": "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"
        },
        body: JSON.stringify({
          email: inquiryEmail,
          attributes: {
            FIRSTNAME: inquiryName,
            COMPANY: inquiryCompany,
            ENGAGEMENT_TYPE: inquiryEngagement,
            RAISE_TIMING: inquiryTiming,
            INQUIRY_CONTEXT: inquiryContext
          },
          listIds: [3],
          updateEnabled: true
        })
      });
      setInquiryStatus("done");
    } catch (err) {
      console.error("Brevo error:", err);
      setInquiryStatus("error");
    }
  };

  return (
  <section id="apply" className="warm">
    <div className="container">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 64, alignItems: "start" }} className="apply-grid">
        <div>
          <div className="tag">Retainer engagements · by inquiry</div>
          <h2 style={{ marginTop: 24, marginBottom: 24 }}>Inquire about working together.</h2>
          <p className="lede" style={{ color: "var(--ink)" }}>
            Retainer engagements start with a written inquiry, not a calendar booking. Tell us about your raise or your operational situation, and we'll respond if it's a fit. Lead time matters, the earlier you reach out relative to your target close, the more useful we can be.
          </p>
          <div style={{ marginTop: 32, padding: 20, background: "#fff", border: "1px solid var(--line)", fontFamily: "var(--sans)", fontSize: 14, color: "var(--ink)" }}>
            <strong style={{ color: "var(--ink-deepest)" }}>Not ready to inquire?</strong> The async products, Diagnostic, Pitch Deck Audit, Strategy Brief, and Investor GTM Playbook, are how most people start. Each is a written deliverable we produce after a self-serve intake; turnaround terms are noted at checkout.
          </div>
        </div>
        {inquiryStatus === "done" ? (
          <div style={{ background: "#fff", padding: 32, border: "1px solid var(--line)", display: "flex", flexDirection: "column", gap: 14, alignItems: "center", justifyContent: "center", minHeight: 300, textAlign: "center" }}>
            <div style={{ fontFamily: "var(--display)", fontSize: 18, letterSpacing: "0.1em", color: "var(--ink-deepest)" }}>Inquiry received.</div>
            <p style={{ fontFamily: "var(--sans)", fontSize: 14, color: "var(--ink-muted)", maxWidth: "36ch" }}>We review inquiries weekly and respond only when there's likely a fit. You'll hear from us if that's the case.</p>
          </div>
        ) : (
        <form onSubmit={submitInquiry} style={{ background: "#fff", padding: 32, border: "1px solid var(--line)", display: "flex", flexDirection: "column", gap: 14 }}>
          <input required placeholder="Your name" style={lightInput} value={inquiryName} onChange={e => setInquiryName(e.target.value)} />
          <input required placeholder="Company" style={lightInput} value={inquiryCompany} onChange={e => setInquiryCompany(e.target.value)} />
          <input required type="email" placeholder="Email" style={lightInput} value={inquiryEmail} onChange={e => setInquiryEmail(e.target.value)} />
          <select required style={lightInput} value={inquiryEngagement} onChange={e => setInquiryEngagement(e.target.value)}>
            <option value="">Engagement type</option>
            <option>Capital Raise Advisory (retainer)</option>
            <option>Fractional COO (retainer)</option>
            <option>Not sure yet</option>
          </select>
          <select required style={lightInput} value={inquiryTiming} onChange={e => setInquiryTiming(e.target.value)}>
            <option value="">Timing relative to target close</option>
            <option>6+ months out</option>
            <option>3–6 months out</option>
            <option>Less than 3 months out</option>
            <option>Not raising, operational engagement</option>
          </select>
          <textarea required placeholder="One paragraph: where you are, what you need, and what good looks like." rows="5" style={{ ...lightInput, fontFamily: "var(--serif)", resize: "vertical" }} value={inquiryContext} onChange={e => setInquiryContext(e.target.value)}></textarea>
          <button type="submit" className="btn btn-primary" style={{ justifyContent: "center" }} disabled={inquiryStatus === "sending"}>
            {inquiryStatus === "sending" ? "Sending…" : "Send inquiry"} <span aria-hidden="true">→</span>
          </button>
          {inquiryStatus === "error" && <p style={{ fontSize: 12, color: "red", fontFamily: "var(--sans)", margin: 0 }}>Something went wrong. Please email hello@avisenstrategies.com directly.</p>}
          <p style={{ fontSize: 11, color: "var(--ink-muted)", fontFamily: "var(--sans)", margin: 0 }}>Inquiries are reviewed weekly. We respond only when there's likely a fit.</p>
        </form>
        )}
      </div>
      <style>{`
        @media (max-width: 880px) {
          .apply-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
        }
      `}</style>
    </div>
  </section>
  );
};

const lightInput = {
  background: "#fff",
  border: "1px solid var(--line)",
  color: "var(--ink-deep)",
  fontFamily: "var(--sans)",
  fontSize: 15,
  padding: "12px 14px",
  outline: "none",
  width: "100%"
};

const Footer = () => (
  <footer className="site-footer">
    <div className="container">
      <div>
        <div>
          <div style={{ marginBottom: 16 }}>
            <div style={{ fontFamily: "'Cinzel', serif", fontSize: 22, letterSpacing: "0.28em", color: "#fff", fontWeight: 500 }}>AVISEN</div>
            <div style={{ fontFamily: "var(--sans)", fontSize: 9, letterSpacing: "0.42em", color: "rgba(255,255,255,0.55)", textTransform: "uppercase", marginTop: 6 }}>Strategies</div>
          </div>
          <p style={{ fontSize: 13, color: "rgba(255,255,255,0.6)", margin: 0, maxWidth: "32ch" }}>
            Capital readiness advisory and fractional COO services for founders raising into institutional capital.
          </p>
          <div style={{ marginTop: 20, display: "flex", gap: 12, alignItems: "center" }}>
            <a href="https://www.linkedin.com/company/avisen-strategies" target="_blank" rel="noopener" aria-label="Avisen Strategies on LinkedIn" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 32, height: 32, border: "1px solid rgba(255,255,255,0.2)", color: "rgba(255,255,255,0.7)" }}>
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M19 3a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14zM8.34 18.34V10.5H5.67v7.84h2.67zM7 9.34a1.55 1.55 0 1 0 0-3.1 1.55 1.55 0 0 0 0 3.1zm11.34 9V14c0-2.5-1.34-3.67-3.13-3.67-1.45 0-2.1.8-2.46 1.36V10.5h-2.67v7.84h2.67v-4.37c0-.24.02-.48.09-.65.19-.48.63-.97 1.36-.97.96 0 1.34.73 1.34 1.8v4.19h2.8z"/></svg>
            </a>
            <a href="mailto:info@avisenstrategies.com" style={{ fontFamily: "var(--sans)", fontSize: 12, color: "rgba(255,255,255,0.6)", textDecoration: "none" }}>info@avisenstrategies.com</a>
          </div>
        </div>
        <div>
          <h4>Engage</h4>
          <ul>
            <li><a href="#diagnostic">Diagnostic</a></li>
            <li><a href="#engagements">Services</a></li>
            <li><a href="#apply">Inquire</a></li>
          </ul>
        </div>
        <div>
          <h4>Firm</h4>
          <ul>
            <li><a href="#about">About</a></li>
            <li><a href="#approach">Approach</a></li>
            <li><a href="mailto:info@avisenstrategies.com">Contact</a></li>
          </ul>
        </div>
        <div>
          <h4>Legal</h4>
          <ul>
            <li><a href="#">Terms</a></li>
            <li><a href="#">Privacy</a></li>
            <li><a href="#">Disclaimer</a></li>
          </ul>
        </div>
      </div>
      <div className="legal">
        <span>© 2026 Avisen LLC</span>
        <span>avisenstrategies.com</span>
      </div>
    </div>
  </footer>
);

Object.assign(window, { Approach, Engagements, Proof, About, FinalCTA, Footer });
