/* MCA, Interior pages */

const { useState: useStateP } = React;

function ServicePage({ slug, navigate }) {
  const data = {
    "ai-solutions": {
      crumb: "SERVICES / AI SOLUTIONS",
      title: "AI-powered systems for modern growth.",
      sub: "We help companies replace manual workflows with intelligent systems across sales, marketing, operations, customer support, and financial analysis.",
      problem: "Most teams are buried in repeatable, non-strategic work. AI is no longer optional: it is the operating leverage layer for the next decade of growth.",
      build: [
        { num: "01", title: "Sales & GTM Agents", desc: "Pipeline enrichment, outbound sequencing, deal intelligence, and CRM hygiene, automated with intelligent agents." },
        { num: "02", title: "Marketing Operations", desc: "Content production, multi-channel campaign assembly, brief-to-asset pipelines, and performance feedback loops." },
        { num: "03", title: "Finance & Reporting", desc: "Recurring close workstreams, board reporting, scenario modeling, and KPI surveillance." },
        { num: "04", title: "Customer & Support", desc: "Tier-1 support automation, ticket triage, and customer-facing assistants tuned to your product." },
        { num: "05", title: "Internal Knowledge", desc: "Private RAG systems on your docs, decisions, and institutional memory, searchable and trustable." },
        { num: "06", title: "Custom Workflows", desc: "Bespoke agentic workflows orchestrated across your existing tooling stack." },
      ],
      label: "ai-advisory.mp4",
    },
    "growth-scale": {
      crumb: "SERVICES / GROWTH & SCALE",
      title: "Strategy, growth & scale for emerging tech companies.",
      sub: "We help companies build market presence, activate communities, strengthen positioning, and scale through data-driven growth systems.",
      problem: "Growth is a system, not a campaign. We design the system: positioning, channels, narrative, and community. Then we operate it alongside you.",
      build: [
        { num: "01", title: "Positioning & Narrative", desc: "Sharpen the story that makes capital, talent, and customers move toward you." },
        { num: "02", title: "Go-to-Market", desc: "Channel strategy, pricing, ICP refinement, and integrated launch campaigns." },
        { num: "03", title: "Ecosystem & Partnerships", desc: "BD strategy and execution across protocols, exchanges, and ecosystem partners." },
        { num: "04", title: "Community Growth", desc: "Real Discord, Telegram, and ambassador motion, not vanity engagement." },
        { num: "05", title: "Brand & Content", desc: "Editorial-quality content, thought leadership, and design that signals seriousness." },
        { num: "06", title: "Data-Driven Scale", desc: "Growth analytics, experiment cadence, and the dashboards that drive decisions." },
      ],
      label: "growth.mp4",
    },
    "ma-capital-markets": {
      crumb: "SERVICES / M&A & CAPITAL MARKETS",
      title: "Capital strategy and M&A advisory ",
      titleAccent: "for emerging markets.",
      sub: "We help companies prepare for capital formation, strategic partnerships, acquisitions, and long-term enterprise value creation.",
      problem: "Capital decisions compound. The right structure at the right moment is the difference between a strategic exit and a stalled cap table.",
      build: [
        { num: "01", title: "Capital Strategy", desc: "Round structuring, investor mapping, and capital formation across equity, token, and hybrid stacks." },
        { num: "02", title: "Sell-Side Advisory", desc: "Process design, materials, buyer outreach, and negotiation through close." },
        { num: "03", title: "Buy-Side Advisory", desc: "Target sourcing, diligence support, valuation, and integration planning." },
        { num: "04", title: "TGE Preparation", desc: "Token launch architecture, distribution, exchange strategy, and pre-launch positioning." },
        { num: "05", title: "Strategic Partnerships", desc: "Joint ventures, commercial alliances, and structural relationships that move enterprise value." },
        { num: "06", title: "Board & Governance", desc: "Board composition, reporting cadence, and governance discipline that capital markets reward." },
      ],
      label: "ma.mp4",
    },
  }[slug];

  return (
    <React.Fragment>
      <section className="page-hero">
        <div className="page-hero__inner">
          <div className="page-hero__crumb">{data.crumb}</div>
          <h1 className="page-hero__title">{data.title}{data.titleAccent && <span style={{ color: "var(--teal)" }}>{data.titleAccent}</span>}</h1>
          <p className="page-hero__sub">{data.sub}</p>
          <div style={{ marginTop: 32, display: "flex", gap: 12, flexWrap: "wrap" }}>
            <Button variant="teal" size="lg" onClick={() => window.open("https://form.typeform.com/to/j6nKhXw5", "_blank", "noopener")} withArrow>Schedule a Free Consultation</Button>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="two-col">
            <div className="two-col__title">
              <span className="eyebrow" style={{ display: "block", marginBottom: 16 }}>Problem · Opportunity</span>
              The opportunity.
            </div>
            <div>
              <p style={{ fontSize: 19, lineHeight: 1.55, maxWidth: 640 }}>{data.problem}</p>
              <div style={{ marginTop: 32 }}>
                <div className="hero__visual" style={{ aspectRatio: "16 / 9", borderRadius: 16 }}>
                  <VideoSlot label={data.label} />
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="section section--tight" style={{ background: "var(--surface)" }}>
        <div className="container">
          <div className="section-head">
            <div className="section-head__left">
              <span className="eyebrow">WHAT WE BUILD</span>
              <h2 className="h2" style={{ marginTop: 16 }}>An Operating System, Not a Deliverable.</h2>
            </div>
          </div>
          <ul className="bullets" style={{ borderTop: "1px solid var(--border)" }}>
            {data.build.map((b) => (
              <li key={b.num}>
                <span className="bullets__num">{b.num}</span>
                <div>
                  <div className="bullets__title">{b.title}</div>
                  <div className="bullets__desc">{b.desc}</div>
                </div>
              </li>
            ))}
          </ul>
        </div>
      </section>

      <FinalCTA navigate={navigate} />
    </React.Fragment>
  );
}

function ContactPage({ navigate }) {
  const [submitted, setSubmitted] = useStateP(false);
  const [error, setError] = useStateP("");
  const [form, setForm] = useStateP({
    name: "", email: "", company: "", website: "",
    interest: "Growth & Scale", budget: "$25k – $75k", message: "",
  });
  const set = (k) => (e) => setForm({ ...form, [k]: e.target.value });
  const submit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) {
      setError("Please complete name, email, and message before submitting.");
      return;
    }
    setError("");
    setSubmitted(true);
  };

  return (
    <React.Fragment>
      <section className="page-hero">
        <div className="page-hero__inner">
          <div className="page-hero__crumb">CONTACT</div>
          <h1 className="page-hero__title">Tell us where you're headed. We'll tell you how to get there faster.</h1>
          <p className="page-hero__sub">
            Most engagements start with a 30-minute free consultation. Share a few details and the
            right MCA partner will follow up within one business day.
          </p>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="contact-grid">
            <div>
              <span className="eyebrow">WHERE TO FIND US</span>
              <h3 className="h3" style={{ marginTop: 16, fontSize: 28 }}>Global. Always On.</h3>
              <p style={{ color: "var(--muted)", marginTop: 16, maxWidth: 360 }}>
                Founders move quickly. We do too. Reach out via the form, by email, or directly to a partner on Telegram.
              </p>
              <div style={{ marginTop: 32, display: "flex", flexDirection: "column", gap: 12, fontFamily: "var(--font-mono)", fontSize: 13, color: "var(--muted)" }}>
                <div>HELLO@MCA.DIGITAL</div>
                <div>TELEGRAM · @MCA</div>
                <div>NORTH AMERICA · ASIA · EUROPE · AUSTRALIA</div>
              </div>
            </div>
            <div>
              {submitted ? (
                <div className="form-wrap">
                  <div className="form-success">
                    <span style={{ marginTop: 2 }}>●</span>
                    <div>
                      <div style={{ fontWeight: 600, marginBottom: 4 }}>Thank you. Your inquiry has been received.</div>
                      <div>The MCA team will review your message and get back to you within one business day.</div>
                    </div>
                  </div>
                  <div style={{ marginTop: 24 }}>
                    <Button variant="secondary" onClick={() => navigate("/")}>Back to homepage</Button>
                  </div>
                </div>
              ) : (
                <form className="form-wrap" onSubmit={submit}>
                  {error && <div className="form-error" style={{ marginBottom: 20 }}>{error}</div>}
                  <div className="field-row">
                    <div className="field">
                      <label className="field__label">Name</label>
                      <input className="field__input" value={form.name} onChange={set("name")} placeholder="Jane Doe" />
                    </div>
                    <div className="field">
                      <label className="field__label">Email</label>
                      <input type="email" className="field__input" value={form.email} onChange={set("email")} placeholder="jane@company.com" />
                    </div>
                  </div>
                  <div className="field-row">
                    <div className="field">
                      <label className="field__label">Company</label>
                      <input className="field__input" value={form.company} onChange={set("company")} placeholder="Company name" />
                    </div>
                    <div className="field">
                      <label className="field__label">Website</label>
                      <input className="field__input" value={form.website} onChange={set("website")} placeholder="company.com" />
                    </div>
                  </div>
                  <div className="field-row">
                    <div className="field">
                      <label className="field__label">Service interest</label>
                      <select className="field__select" value={form.interest} onChange={set("interest")}>
                        <option>AI Solutions</option>
                        <option>Growth & Scale</option>
                        <option>M&A & Capital Markets</option>
                        <option>Multi-service engagement</option>
                      </select>
                    </div>
                    <div className="field">
                      <label className="field__label">Budget range</label>
                      <select className="field__select" value={form.budget} onChange={set("budget")}>
                        <option>Under $25k</option>
                        <option>$25k – $75k</option>
                        <option>$75k – $250k</option>
                        <option>$250k+</option>
                      </select>
                    </div>
                  </div>
                  <div className="field">
                    <label className="field__label">Message</label>
                    <textarea className="field__textarea" value={form.message} onChange={set("message")}
                      placeholder="A few sentences about where you are and what you need." />
                  </div>
                  <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 8, gap: 12, flexWrap: "wrap" }}>
                    <span className="small">By submitting, you agree to MCA's privacy policy.</span>
                    <Button variant="primary" size="lg" withArrow>Submit Inquiry</Button>
                  </div>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function ReportCover({ report }) {
  return (
      <div className="rpt-cover">
      <img className="rpt-cover__img" src={report.image} alt="" loading="lazy" />
      <div className="rpt-cover__shade" aria-hidden="true" />
      <div className="rpt-cover__cat">{report.cat}</div>
    </div>
  );
}

function InsightsPage({ navigate }) {
  const reports = [
    {
      slug: "ai-agents-agentic-workflows",
      cat: "AI · AGENTS",
      title: "Introduction to AI Agents & Agentic Workflows",
      read: "5 min read",
      date: "FEB 2026",
      preview: "An AI agent is a piece of software built on top of a large language model that can plan, decide, and execute tasks on its own.",
      image: "assets/reports/ai-agents.png",
      sigil: "01",
    },
    {
      slug: "crypto-m-and-a-trends-2026",
      cat: "M&A · 2026",
      title: "Crypto M&A Trends in 2026: What Buyers Are Looking For",
      read: "7 min read",
      date: "FEB 2026",
      preview: "An analysis of current global deals activity with insights from industry specialists on what acquirers are actually pricing in this cycle.",
      image: "assets/reports/crypto-ma.png",
      sigil: "02",
    },
    {
      slug: "rewiring-smb-operations-for-ma",
      cat: "AI · OPERATIONS",
      title: "How AI is Rewiring SMB Operations for the Next Wave of M&A",
      read: "5 min read",
      date: "JAN 2026",
      preview: "Operators and hedge fund managers point to the infrastructure layers where AI is quietly rewriting the SMB acquisition playbook.",
      image: "assets/reports/smb-ops.png",
      sigil: "03",
    },
    {
      slug: "understanding-ai-in-web3",
      cat: "AI · WEB3",
      title: "Understanding the Role of AI in Web3",
      read: "3 min read",
      date: "JAN 2026",
      preview: "AI and Web3 are two of the most groundbreaking advancements of our time. Here is where they meaningfully collide, and where they don't.",
      image: "assets/reports/ai-web3.png",
      sigil: "04",
    },
    {
      slug: "ai-x-crypto-agent-infrastructure",
      cat: "AGENTS · CRYPTO",
      title: "AI x Crypto: The Rise of Agent Infrastructure",
      read: "6 min read",
      date: "DEC 2025",
      preview: "Autonomous agents have been the imagined endgame for decades. The infrastructure to actually run them on-chain is finally catching up.",
      image: "assets/reports/ai-crypto.png",
      sigil: "05",
    },
    {
      slug: "marketing-strategies-llms-ai-agents",
      cat: "GROWTH · AI",
      title: "Marketing Strategies in the Era of LLMs & AI Agents",
      read: "6 min read",
      date: "NOV 2025",
      preview: "The infrastructure through which users discover, evaluate, and act on information has been fundamentally rewired, and so has the response.",
      image: "assets/reports/marketing-llms.png",
      sigil: "06",
    },
  ];

  return (
    <React.Fragment>
      <section className="rpt-hero rpt-hero--centered">
        <div className="rpt-hero__bg" aria-hidden="true">
          {window.CaseField ? React.createElement(window.CaseField) : null}
          <div className="rpt-hero__grid" />
          <div className="rpt-hero__noise" />
          <div className="rpt-hero__vignette" />
        </div>
        <div className="rpt-hero__inner">
          <h1 className="rpt-hero__title">
            Strategic intelligence
            <br />
            for <span className="rpt-hero__accent">AI, Growth &amp; M&amp;A.</span>
          </h1>
          <p className="rpt-hero__sub">
            High-impact reports across AI, capital markets, and emerging technologies.
            We distill complex trends into clear strategies, so you can make faster, sharper decisions.
          </p>
          <div style={{ marginTop: 32 }}>
            <Button variant="teal" size="lg" onClick={() => window.open("https://form.typeform.com/to/j6nKhXw5", "_blank", "noopener")} withArrow>Schedule a Free Consultation</Button>
          </div>
        </div>
      </section>

      <CaseStudies navigate={navigate} variant="reports" />

      <section className="rpt-section">
        <div className="container">
          <div className="rpt-grid">
            {reports.map((r) => (
              <article
                key={r.slug}
                className="rpt-card"
                onClick={() => navigate("/article/" + r.slug)}
                style={{ cursor: "pointer" }}
              >
                <ReportCover report={r} />
                <div className="rpt-card__body">
                  <div className="rpt-card__meta">
                    <span className="rpt-card__cat">{r.cat}</span>
                    <span className="rpt-card__read">{r.read}</span>
                  </div>
                  <h3 className="rpt-card__title">{r.title}</h3>
                  <p className="rpt-card__preview">{r.preview}</p>
                  <div className="rpt-card__foot">
                    <a
                      className="rpt-card__cta"
                      href={"#/article/" + r.slug}
                      onClick={(e) => { e.preventDefault(); e.stopPropagation(); navigate("/article/" + r.slug); }}
                    >
                      Read more
                      <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
                        <path d="M3 11L11 3M11 3H5M11 3V9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                    </a>
                  </div>
                </div>
              </article>
            ))}
          </div>

          <div className="rpt-cta">
            <div>
              <div className="rpt-cta__eyebrow">WORK WITH US</div>
              <h3 className="rpt-cta__title">Ready to Put These Insights to Work?</h3>
              <p className="rpt-cta__desc">
                Book a free 30-minute consultation. We'll map your goals to the right strategy across AI, growth, and capital markets.
              </p>
            </div>
            <Button variant="primary" onClick={() => window.open("https://form.typeform.com/to/j6nKhXw5", "_blank", "noopener")} withArrow>Schedule a consultation</Button>
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function TeamPage({ navigate }) {
  const leadership = [
    { name: "Niro", role: "Founder & CEO", initial: "N", photo: "assets/team/niro.png",
      linkedin: "https://www.linkedin.com/in/nirojant/", x: "https://x.com/cryptoape" },
    { name: "Hash", role: "COO", initial: "H", photo: "assets/team/hash.png",
      linkedin: "https://www.linkedin.com/in/hasht/", x: "https://x.com/Northernapez" },
    { name: "Ali", role: "Head of BD", initial: "A", photo: "assets/team/ali.png",
      linkedin: "https://www.linkedin.com/in/ali-mertsoy-5ab912126/", x: "https://x.com/mrunique" },
  ];
  const team = [
    { name: "Serena", role: "Senior Strategy Consultant", initial: "S", photo: "assets/team/serena.png",
      linkedin: "https://www.linkedin.com/in/serena-sung/", x: "https://x.com/swingy369" },
    { name: "Nish", role: "Senior Strategy Consultant", initial: "N", photo: "assets/team/nish.png",
      linkedin: "https://www.linkedin.com/in/nishanth-peter-a8428b369/", x: "https://x.com/lethirdweb" },
    { name: "Danylo", role: "Senior Strategy Consultant", initial: "D", photo: "assets/team/danylo.png",
      linkedin: "https://www.linkedin.com/in/danylokravets/", x: "https://x.com/CrazyD0k" },
    { name: "Patrick", role: "Senior Growth Manager", initial: "P", photo: "assets/team/patrick.png",
      linkedin: "https://www.linkedin.com/in/patrick-rocchio/", x: "https://x.com/orangeape" },
    { name: "Ani", role: "Marketing Manager", initial: "A", photo: "assets/team/ani.png",
      linkedin: "https://www.linkedin.com/in/aniharutyunyann/", x: "https://x.com/Anii_belle" },
    { name: "Edo", role: "BD & Strategy Consultant", initial: "E", photo: "assets/team/edo.png",
      linkedin: "https://www.linkedin.com/in/edoardo-l-495475289/", x: "https://x.com/eddi_rei" },
    { name: "Jayson", role: "BD & Strategy Consultant", initial: "J", photo: "assets/team/jayson.png" },
    { name: "Reuben", role: "Graphic Designer & Animator", initial: "R", photo: "assets/team/reuben.png",
      linkedin: "https://www.linkedin.com/in/reubenarmena/" },
    { name: "Mariel", role: "EA & Admin Manager", initial: "M", photo: "assets/team/mariel.png" },
    { name: "Aisha", role: "BD & Strategy Consultant", initial: "A", photo: "assets/team/aisha.png" },
  ];
  const experience = ["Bank of Montreal", "MorganFranklin Consulting", "Grant Thornton LLP", "Poly", "CPA Canada", "Fresenius Group", "Siegfried Group", "PVH", "KPMG", "CIBC", "Kimberly-Clark", "Kucoin", "Magic Eden", "Ford", "PWC", "Accenture"];
  return (
    <React.Fragment>
      <section className="section section--team-dark section--team-dark-hero">
        <div className="container">
          <div className="globe-header globe-header--page">
            <div className="globe-header__copy">
              <span className="eyebrow">ABOUT US</span>
              <h1 className="globe-header__title">
                Senior operators. <em>Global coverage.</em>
              </h1>
              <p className="globe-header__sub">
                A team of senior strategists, capital advisors, growth operators, and Web3 natives who have built, raised, and exited, operating across North America, Europe, the Middle East, Asia, and Australia.
              </p>
              <ul className="globe-header__cities">
                <li>North America</li>
                <li>Europe</li>
                <li>Dubai</li>
                <li>Asia</li>
                <li>Australia</li>
              </ul>
              <div style={{ marginTop: 36 }}>
                <Button variant="teal" size="lg" onClick={() => window.open("https://form.typeform.com/to/j6nKhXw5", "_blank", "noopener")} withArrow>Schedule a Free Consultation</Button>
              </div>
            </div>
            <Globe />
          </div>
        </div>
      </section>
      <section className="section section--team-dark" style={{ paddingTop: 0 }}>
        <div className="container">
          <div className="team-leadership">
            {leadership.map((m, i) => (
              <div key={i} className="member member--lead">
                <div className={`member__photo ${m.photo ? "member__photo--img" : ""}`}
                     style={m.photoPos ? { "--photo-pos": m.photoPos } : undefined}>
                  {m.photo ? <img src={m.photo} alt={m.name} style={{ objectFit: "cover" }} /> : m.initial}
                </div>
                <div className="member__info">
                  <div>
                    <div className="member__name" style={{ fontSize: 18 }}>{m.name}</div>
                    <div className="member__role">{m.role}</div>
                  </div>
                  <MemberSocials linkedin={m.linkedin} x={m.x} name={m.name} />
                </div>
              </div>
            ))}
          </div>
          <div className="team-grid team-grid--5">
            {team.map((m, i) => (
              <div key={i} className="member">
                <div className={`member__photo ${m.photo ? "member__photo--img" : ""}`}
                     style={m.photoPos ? { "--photo-pos": m.photoPos } : undefined}>
                  {m.photo ? <img src={m.photo} alt={m.name}
                    style={m.photoZoom ? { transform: `scale(${m.photoZoom})`, transformOrigin: "center top" } : undefined} /> : m.initial}
                </div>
                <div className="member__info">
                  <div>
                    <div className="member__name">{m.name}</div>
                    <div className="member__role">{m.role}</div>
                  </div>
                  <MemberSocials linkedin={m.linkedin} x={m.x} name={m.name} />
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      <section className="section section--team-dark" style={{ paddingTop: 0 }}>
        <div className="container">
          <TeamLife />
        </div>
      </section>
      <FAQ />
      <FinalCTA navigate={navigate} />
    </React.Fragment>
  );
}

Object.assign(window, {
  ServicePage, ContactPage, InsightsPage, TeamPage
});