/* Pages: Home, About, Portfolio, Team, Investors, Criteria, Careers, Contact */
const { useState: usePg, useEffect: useEffPg } = React;

/* ── Web3Forms key ─────────────────────────────────────────────────────────
   1. Go to https://web3forms.com
   2. Enter hiring@erdemholdings.com → "Create Access Key"
   3. Check your inbox, copy the key, paste it below
   ─────────────────────────────────────────────────────────────────────── */
const WEB3FORMS_KEY = "ffb0666f-c853-47b4-b4a2-cd97bdaab379";

/* -------------------- SHARED: reusable scrollable photo stack -------------------- */
/* ratio   — CSS aspect-ratio string, e.g. "4/5" (portrait) or "3/2" (landscape)    */
/* maxH    — max-height in px                                                          */
function PhotoStack({ slides, ratio = "4/5", maxH = 500 }) {
  const [active, setActive] = usePg(0);
  const stageRef = React.useRef(null);

  useEffPg(() => {
    const id = setInterval(() => {
      setActive(prev => {
        const next = (prev + 1) % slides.length;
        if (stageRef.current) {
          stageRef.current.scrollTo({ top: next * stageRef.current.clientHeight, behavior: "smooth" });
        }
        return next;
      });
    }, 5000);
    return () => clearInterval(id);
  }, [slides.length]);

  const scrollTo = (i) => {
    const el = stageRef.current;
    if (!el) return;
    el.scrollTo({ top: i * el.clientHeight, behavior: "smooth" });
    setActive(i);
  };

  const onScroll = () => {
    const el = stageRef.current;
    if (!el) return;
    setActive(Math.round(el.scrollTop / el.clientHeight));
  };

  return (
    <div
      className="hero-visual"
      style={{ aspectRatio: ratio, maxHeight: maxH }}
    >
      <div className="hv-photo-stage scrollable" ref={stageRef} onScroll={onScroll}>
        {slides.map((s, i) => (
          <div className="hv-photo-slide" key={i}>
            <img
              src={s.src}
              alt=""
              style={{
                objectFit: s.fit || "cover",
                objectPosition: s.pos || "center",
                /* slight horizontal crop on distorted images to reduce warping */
                transform: s.cropSides ? "scaleX(0.92)" : undefined,
              }}
            />
          </div>
        ))}
      </div>
      <div className="hv-dots">
        {slides.map((_, i) => (
          <div key={i} className={"hv-dot" + (active === i ? " on" : "")} onClick={() => scrollTo(i)} />
        ))}
      </div>
    </div>
  );
}

/* HOME: team-shopfloor first, streetfront second, plumbing third */
const HOME_SLIDES = [
  { src: "assets/team-shopfloor.png" },
  { src: "assets/loc-streetfront.png" },
  { src: "assets/loc-plumbing.png" },
];

/* STORY: reifenstop landscape in a wider container — cover shows it naturally */
const STORY_SLIDES = [
  { src: "assets/loc-reifenstop.jpg",       fit: "fill" },
  { src: "assets/reifenstop-location2.jpg" },
  { src: "assets/reifenstop-location3.jpg" },
];

const INVESTORS_SLIDES = [
  { src: "assets/team-office.png" },
  { src: "assets/loc-shop-interior.png" },
];

/* -------------------- HOME -------------------- */
function PageHome({ go }) {
  return (
    <main data-screen-label="01 Home">
      <section className="section" style={{ paddingTop: 96, paddingBottom: 80 }}>
        <div className="wrap">
          <div className="hero-grid">
            <div>
              <div className="kicker" style={{ marginBottom: 28 }}>Erdem Holdings · Est. 2007</div>
              <h1 className="h-display serif fade-in in" style={{ maxWidth: "16ch", margin: 0 }}>
                Acquiring durable businesses for the long term.
              </h1>
              <p className="lede" style={{ marginTop: 32, maxWidth: "44ch" }}>
                A family-backed acquisition platform with two decades of hands-on operating experience across multiple service industries.
              </p>
              <div style={{ display: "flex", gap: 16, marginTop: 40, flexWrap: "wrap" }}>
                <button className="btn" onClick={() => go("portfolio")}>
                  Portfolio <span className="arr">→</span>
                </button>
                <button className="btn ghost" onClick={() => go("contact")}>Contact</button>
              </div>
            </div>
            {/* maxH=500 makes the stack slightly smaller than default 580 */}
            <PhotoStack slides={HOME_SLIDES} maxH={500} />
          </div>
        </div>
      </section>

      <section className="meta-bar">
        <div className="wrap">
          <div className="grid grid-4" style={{ gap: 32 }}>
            <MetaItem label="Operating since" value="2007" sub="Family operating heritage" />
            <MetaItem label="Sector" value="Service businesses" sub="Established, profitable" />
            <MetaItem label="Ownership" value="Permanent" sub="No planned exit" />
            <MetaItem label="On close" value="Management retained" sub="Culture and team preserved" />
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="grid grid-2" style={{ gap: 96, alignItems: "start" }}>
            <FadeIn>
              <div className="kicker">A holding company, not a fund</div>
              <h2 className="h-section serif" style={{ marginTop: 20, maxWidth: "16ch" }}>
                We acquire to own. Permanently.
              </h2>
            </FadeIn>
            <FadeIn delay={120}>
              <div className="body" style={{ display: "grid", gap: 18 }}>
                <p>
                  Erdem Holdings acquires profitable service businesses with established customer bases and durable demand. We bring direct operating experience to every transaction.
                </p>
                <p>
                  When we acquire a business, we do not plan to sell it. We preserve the team, the culture, and the customer relationships the owner spent years building — and we operate with that commitment from day one.
                </p>
                <p>
                  <span className="link-arrow" onClick={() => go("about")}>
                    Read the story <span className="arr">→</span>
                  </span>
                </p>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      <section className="section-tight" style={{ background: "var(--bg-alt)", padding: "88px 0" }}>
        <div className="wrap">
          <div className="kicker" style={{ marginBottom: 36 }}>Across the platform</div>
          <div className="grid grid-3" style={{ gap: 40 }}>
            <Tile n="01" title="Portfolio" body="A multi-industry European operating group and an active U.S. acquisition program." cta="Explore" go={go} to="portfolio" />
            <Tile n="02" title="Investment approach" body="How we identify, acquire, and operate service businesses — for the long term." cta="Approach" go={go} to="investors" />
            <Tile n="03" title="Careers" body="Summer analyst internships and an EA role with direct exposure to live acquisition work." cta="Open roles" go={go} to="careers" />
          </div>
        </div>
      </section>

      <section className="section deep" style={{ padding: "72px 0" }}>
        <div className="wrap">
          <div style={{ maxWidth: 680, margin: "0 auto", textAlign: "center" }}>
            <h2 className="h-section serif" style={{ margin: "0 0 32px" }}>
              For brokers, sellers, lenders, and investors — we welcome qualified conversations.
            </h2>
            <button className="btn" onClick={() => go("contact")}>
              Contact <span className="arr">→</span>
            </button>
          </div>
        </div>
      </section>
    </main>
  );
}

function MetaItem({ label, value, sub }) {
  return (
    <div className="meta-item">
      <div className="label">{label}</div>
      <div className="value serif">{value}</div>
      <div className="sub">{sub}</div>
    </div>
  );
}

function Tile({ n, title, body, cta, go, to }) {
  return (
    <FadeIn>
      <div className="tile" onClick={() => go(to)}>
        <div className="numbered" style={{ marginBottom: 24 }}>{n}</div>
        <h3 className="h-sub serif">{title}</h3>
        <p className="body" style={{ marginBottom: 24, fontSize: 14.5 }}>{body}</p>
        <span className="link-arrow" style={{ marginTop: "auto", alignSelf: "flex-start" }}>{cta} <span className="arr">→</span></span>
      </div>
    </FadeIn>
  );
}

/* -------------------- ABOUT / STORY -------------------- */
function PageAbout({ go }) {
  return (
    <main>
      {/* HERO — photo stack top-right, wider ratio for landscape images */}
      <section className="section" style={{ paddingTop: 96, paddingBottom: 56 }}>
        <div className="wrap">
          <div className="story-hero-grid">
            <div>
              <div className="kicker" style={{ marginBottom: 24 }}>About · Story</div>
              <h1 className="h-display serif" style={{ maxWidth: "18ch", margin: 0 }}>
                A family operating heritage.
              </h1>
              <p className="lede" style={{ marginTop: 28, maxWidth: "50ch" }}>
                Erdem Holdings is built on a multi-decade family operating background — businesses built, owned, and scaled by the people behind this firm.
              </p>
            </div>
            {/* ratio 3/2 suits landscape location photos; maxH 340 keeps it proportional */}
            <PhotoStack slides={STORY_SLIDES} ratio="3/2" maxH={340} />
          </div>
        </div>
      </section>

      {/* ORIGIN TEXT */}
      <section className="section-tight" style={{ paddingTop: 16, paddingBottom: 56 }}>
        <div className="wrap">
          <div className="story-grid">
            <FadeIn>
              <div className="origin-panel" aria-hidden="true">
                <img src="assets/reifenstop.png" alt="Reifenstop GmbH" className="origin-logo" />
                <div className="origin-meta">
                  <span>Reifenstop GmbH</span>
                  <span>Vienna · 2007</span>
                </div>
              </div>
            </FadeIn>
            <FadeIn delay={120}>
              <div className="body" style={{ fontSize: 15.5, lineHeight: 1.75, display: "grid", gap: 20 }}>
                <p>
                  The family operating background began in <strong>Vienna in 2007</strong> with the founding of <strong>Reifenstop GmbH</strong> by Mr. N. Erdem — a tire sales and service business that became the origin of a wider operating group spanning multiple industries across Central Europe.
                </p>
                <p>
                  Over the following years, the operating footprint expanded into adjacent and non-adjacent service categories — auto repair, auto sales, electrical, HVAC, renovation, and car painting — across Austria and Germany.
                </p>
                <p>
                  Kaan Erdem, son of the founder, now leads Erdem Holdings as Managing Partner and directs the firm's U.S. acquisition mandate on behalf of the Erdem family office. He brings analytical rigor from his studies in Computer Science and Economics at Columbia University, and a lifelong perspective on what it means to build and run a service business.
                </p>
              </div>
            </FadeIn>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="wrap">
          <div className="kicker" style={{ marginBottom: 28 }}>Operating heritage</div>
          <div className="timeline">
            <TLEntry year="2007" title="Reifenstop GmbH founded" loc="Vienna, Austria"
              body="Mr. N. Erdem founds Reifenstop GmbH — a tire sales and service business that becomes the origin of a multi-industry operating group." />
            <TLEntry year="2010 – 2022" title="Multi-industry expansion" loc="Vienna · Styria · Lower Austria · Frankfurt · Munich"
              body="The operating footprint grows into auto repair, auto sales, car painting, electrical, HVAC, and renovation across Austria and Germany." />
            <TLEntry year="2025" title="Erdem Holdings LLC" loc="United States"
              body="Erdem Holdings LLC is established as the U.S. acquisition platform. Kaan Erdem leads the mandate on behalf of the Erdem family office." last />
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-alt)" }}>
        <div className="wrap">
          <div className="kicker" style={{ marginBottom: 32 }}>What carries through</div>
          <div className="grid grid-2" style={{ gap: 64 }}>
            <Principle n="01" title="Operating experience first"
              body="Decades of running service businesses across multiple industries inform every diligence, every underwrite, every post-close decision." />
            <Principle n="02" title="Permanent ownership"
              body="Each acquisition is underwritten to be held indefinitely. We operate with that commitment from the moment we sign." />
            <Principle n="03" title="Respect for what was built"
              body="Sellers, employees, and customers are inherited with the company. Continuity of leadership, brand, and culture is the default — not the exception." />
            <Principle n="04" title="Certainty of execution"
              body="When we make an offer, we intend to close. Patient capital, disciplined diligence, and a process built around certainty." />
          </div>
        </div>
      </section>

      <SectionLink go={go} to="portfolio" label="See the portfolio" />
    </main>
  );
}

function TLEntry({ year, title, loc, body }) {
  return (
    <div className="tl-row">
      <div className="tl-year mono">{year}</div>
      <div className="tl-line"><span /></div>
      <div className="tl-body">
        <div className="serif" style={{ fontSize: 24, lineHeight: 1.2, marginBottom: 6 }}>{title}</div>
        <div style={{ color: "var(--mute)", marginBottom: 12, letterSpacing: "0.05em", textTransform: "uppercase", fontSize: 11, fontWeight: 500 }}>{loc}</div>
        <p className="body" style={{ maxWidth: "62ch" }}>{body}</p>
      </div>
    </div>
  );
}

function Principle({ n, title, body }) {
  return (
    <FadeIn>
      <div className="principle">
        <div className="numbered">{n}</div>
        <h3 className="h-sub serif">{title}</h3>
        <p className="body" style={{ fontSize: 15 }}>{body}</p>
      </div>
    </FadeIn>
  );
}

/* -------------------- PORTFOLIO -------------------- */
const PORTFOLIO_GROUPS = [
  {
    region: "Vienna area", country: "Austria", total: 10,
    cats: [
      { cat: "Tire sales & service", n: 3, note: "Reifenstop GmbH · origin" },
      { cat: "Auto repair", n: 2 },
      { cat: "Auto sales", n: 1 },
      { cat: "Electrical", n: 1 },
      { cat: "HVAC", n: 1 },
      { cat: "Car painting", n: 1 },
      { cat: "Renovation & building", n: 1 },
    ],
  },
  {
    region: "Styria", country: "Austria", total: 2,
    cats: [{ cat: "Tire sales & service", n: 1 }, { cat: "B2B tire sales", n: 1 }],
  },
  { region: "Lower Austria", country: "Austria", total: 1, cats: [{ cat: "Tire sales & service", n: 1 }] },
  { region: "Upper Austria", country: "Austria", total: 1, cats: [{ cat: "Tire sales & service", n: 1 }] },
  { region: "Frankfurt area", country: "Germany", total: 2, cats: [{ cat: "Tire sales & service", n: 2 }] },
  { region: "Munich area",    country: "Germany", total: 1, cats: [{ cat: "Tire sales & service", n: 1 }] },
];

function PagePortfolio({ go }) {
  const [which, setWhich] = usePg("eu");
  let runningIdx = 0;

  return (
    <main data-screen-label="03 Portfolio">
      <PageHeader
        eyebrow="About · Portfolio"
        title="An operating group and an active acquisition program."
        lede="The map shows the family operating group built over nearly two decades, alongside the United States markets where Erdem Holdings is actively sourcing acquisitions."
      />

      <section className="section" style={{ paddingTop: 24 }}>
        <div className="wrap">
          <LeafletMapPanel which={which} setWhich={setWhich} />
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-alt)" }}>
        <div className="wrap">
          <div style={{ display: "flex", alignItems: "baseline", justifyContent: "space-between", flexWrap: "wrap", gap: 16, marginBottom: 40 }}>
            <div>
              <div className="kicker" style={{ marginBottom: 14 }}>Operating businesses · Europe</div>
              <h2 className="h-section serif" style={{ margin: 0, maxWidth: "20ch" }}>By geography and category.</h2>
            </div>
            <span className="mono small" style={{ color: "var(--mute)", letterSpacing: "0.16em", textTransform: "uppercase" }}>17 companies · 6 regions · 2 countries</span>
          </div>

          {PORTFOLIO_GROUPS.map((g, gi) => (
            <div key={gi} className="geo-group">
              <div className="geo-head">
                <div>
                  <div className="geo-title serif">{g.region}</div>
                  <div className="small" style={{ color: "var(--mute)", marginTop: 4, letterSpacing: "0.06em" }}>{g.country}</div>
                </div>
                <div className="geo-meta">{g.total} {g.total === 1 ? "company" : "companies"}</div>
              </div>
              <div className="biz-grid">
                {g.cats.flatMap((c, ci) => Array.from({ length: c.n }).map((_, k) => {
                  runningIdx += 1;
                  return (
                    <div className="biz-card" key={`${gi}-${ci}-${k}`}>
                      <span className="biz-n">{String(runningIdx).padStart(2, "0")}</span>
                      <div className="biz-cat serif">{c.cat}</div>
                      <div className="biz-region">{g.region}</div>
                      {c.note && k === 0 && <div className="biz-note">{c.note}</div>}
                    </div>
                  );
                }))}
              </div>
            </div>
          ))}

          <div style={{ borderTop: "1px solid var(--rule)", marginTop: 64, paddingTop: 24 }}>
            <p className="small" style={{ color: "var(--mute)", maxWidth: "70ch", lineHeight: 1.6 }}>
              Reifenstop GmbH is publicly identified as the origin business. Other holdings are presented by category and region. Additional details are available to qualified sellers, brokers, lenders, and investors upon request.
            </p>
          </div>
        </div>
      </section>

      <section className="section">
        <div className="wrap">
          <div className="grid grid-2" style={{ gap: 96, alignItems: "start" }}>
            <div>
              <div className="kicker">Acquisition program</div>
              <h2 className="h-section serif" style={{ marginTop: 20, maxWidth: "16ch" }}>
                Active across the United States.
              </h2>
            </div>
            <div className="body" style={{ display: "grid", gap: 18 }}>
              <p>
                We are actively sourcing established service businesses with profitable operating histories. We work directly with owners, brokers, and intermediaries — and respond to every qualified inquiry within five business days.
              </p>
              <p>
                <span className="link-arrow" onClick={() => go("criteria")}>
                  Acquisition criteria <span className="arr">→</span>
                </span>
              </p>
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

/* -------------------- TEAM -------------------- */
const TEAM = [
  {
    name: "Kaan Erdem",
    role: "Managing Partner",
    initials: "KE",
    img: "assets/kaan.png",
    focus: "Core acquisitions · $1M – $3M+ EBITDA",
    bio: "Son of the group's founder and Managing Partner of Erdem Holdings. Directs the firm's U.S. acquisition mandate on behalf of the Erdem family office, with responsibility for sourcing, underwriting, and transaction execution. Completing his studies in Computer Science and Economics at Columbia University.",
  },
  {
    name: "Erika Schulz",
    role: "Executive Assistant to the Managing Partner",
    initials: "ES",
    img: "assets/erika.png",
    focus: null,
    bio: "Supports the Managing Partner across investor calls, banker calls, seller conversations, and broker meetings. Coordinates day-to-day execution across the active acquisition pipeline.",
  },
  {
    name: "Caleb Heaton",
    role: "Analyst",
    initials: "CH",
    img: "assets/rex.jpg",
    focus: "Deal sourcing · $300K – $1M EBITDA",
    bio: "Leads outreach, target identification, and deal screening in the lower-middle market across U.S. service industries.",
  },
  {
    name: "Rex Christopher Mayer",
    role: "Analyst",
    initials: "RM",
    img: "assets/caleb.jpg",
    focus: "Deal sourcing · $300K – $1M EBITDA",
    bio: "Focuses on opportunity development, sector research, and broker relationships across the active U.S. acquisition program.",
  },
];

function PageTeam({ go }) {
  return (
    <main>
      <PageHeader
        screen="04 Team"
        eyebrow="About · Team"
        title="The team behind the mandate."
        lede="A focused group of operators and analysts executing a single acquisition program across U.S. service markets."
      />

      <section className="section" style={{ paddingTop: 24 }}>
        <div className="wrap">
          <div className="team-grid">
            {TEAM.map((p, i) => (
              <FadeIn key={i} delay={i * 80}>
                <div>
                  <div className="team-photo">
                    {p.img ? (
                      <img src={p.img} alt={p.name} />
                    ) : (
                      <>
                        <span className="team-initials serif">{p.initials}</span>
                        <span className="team-photo-label mono">PORTRAIT</span>
                      </>
                    )}
                  </div>
                  <div className="team-name serif">{p.name}</div>
                  <div className="team-role">{p.role}</div>
                  {p.focus && <div className="team-focus mono">{p.focus}</div>}
                  <p className="team-bio">{p.bio}</p>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      <SectionLink go={go} to="careers" label="Open roles" />
    </main>
  );
}

/* -------------------- INVESTORS -------------------- */
const INDUSTRIES = [
  "Tire sales & service", "Auto repair", "Auto sales", "Car painting",
  "HVAC", "Electrical", "Renovation & building", "B2B distribution",
];

function PageInvestors({ go }) {
  return (
    <main data-screen-label="05 Investors">
      <section className="section" style={{ paddingTop: 96, paddingBottom: 80 }}>
        <div className="wrap">
          <div className="hero-grid">
            <div>
              <div className="kicker" style={{ marginBottom: 24 }}>Investors · Investment approach</div>
              <h1 className="h-display serif" style={{ maxWidth: "18ch", margin: 0 }}>
                Operator-led acquisition. Permanent ownership.
              </h1>
              <p className="lede" style={{ marginTop: 28, maxWidth: "44ch" }}>
                We acquire profitable service businesses as committed, permanent owners. No fund timeline. No exit mandate.
              </p>
              <div className="body" style={{ marginTop: 20, maxWidth: "44ch", display: "grid", gap: 14 }}>
                <p>
                  Two decades of direct operating experience across multiple service industries defines how we underwrite, structure, and own every acquisition. Returns come from sustained cash flow and operational excellence — not financial engineering.
                </p>
              </div>
            </div>
            <PhotoStack slides={INVESTORS_SLIDES} maxH={500} />
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-alt)" }}>
        <div className="wrap">
          <div className="kicker" style={{ marginBottom: 28 }}>How we operate</div>
          <div className="thesis-band">
            <div className="thesis-cell">
              <div className="num">01</div>
              <div className="ttl serif">Source directly</div>
              <p className="body">We work with owners, brokers, and intermediaries on a direct basis. Outreach is hands-on, cycle times are predictable, and confidentiality is the default.</p>
            </div>
            <div className="thesis-cell">
              <div className="num">02</div>
              <div className="ttl serif">Underwrite as operators</div>
              <p className="body">Diligence is led by operators with multi-industry experience. We focus on customer retention, reinvestment needs, and the practical realities of running the business — not on financial repackaging.</p>
            </div>
            <div className="thesis-cell">
              <div className="num">03</div>
              <div className="ttl serif">Own indefinitely</div>
              <p className="body">Every acquisition is underwritten to be held permanently. Management, brand, and customer relationships are preserved. Operating decisions are made on a generational horizon.</p>
            </div>
          </div>
        </div>
      </section>

      <section className="section" style={{ paddingTop: 72, paddingBottom: 56 }}>
        <div className="wrap">
          <div className="grid grid-2" style={{ gap: 80, alignItems: "start" }}>
            <div>
              <div className="kicker" style={{ marginBottom: 16 }}>Operating experience across</div>
              <p className="body" style={{ maxWidth: "36ch" }}>
                Industries owned and operated directly by the Erdem family over two decades.
              </p>
            </div>
            <div className="industry-flow">
              {INDUSTRIES.map((it, i) => (
                <span key={i} className="industry-flow-item">
                  <span className="mono" style={{ fontSize: 10, color: "var(--accent)", letterSpacing: "0.1em", flexShrink: 0 }}>{String(i + 1).padStart(2, "0")}</span>
                  <span>{it}</span>
                </span>
              ))}
            </div>
          </div>
        </div>
      </section>

      <PageCapitalInline />
    </main>
  );
}

function PageCapitalInline() {
  return (
    <section className="section deep" style={{ padding: "72px 0" }}>
      <div className="wrap">
        <div className="grid grid-2" style={{ gap: 96, alignItems: "start" }}>
          <div>
            <div className="kicker">Capital & alignment</div>
            <h2 className="h-section serif" style={{ marginTop: 20, maxWidth: "16ch" }}>
              Patient capital, aligned for ownership.
            </h2>
          </div>
          <div className="body" style={{ display: "grid", gap: 20 }}>
            <p>
              Erdem Holdings is backed by the Erdem family operating group and aligned long-term investors. Capital is committed and available — there is no fundraising cycle between opportunity and close.
            </p>
            <p>
              We have closed on every letter of intent we have executed. When we make an offer, capital is in place.
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

/* -------------------- CRITERIA -------------------- */
const CRITERIA_SEGMENTS = [
  {
    n: "I",
    title: "Core acquisitions",
    ebitda: "$1M – $3M+",
    body: "Established businesses with management in place. Typically full exits or seller transitions where continuity of operations is a priority. Led directly by the Managing Partner.",
    tags: ["Full or majority acquisition", "Management continuity", "Owner exit or transition"],
  },
  {
    n: "II",
    title: "Growth market",
    ebitda: "$500K – $1.5M",
    body: "Owner-operated businesses with a loyal customer base and a clear operating history. We look for businesses the owner has built over years — and intends to exit well.",
    tags: ["Owner-operated", "Recurring customer base", "Defined service market"],
  },
  {
    n: "III",
    title: "Select situations",
    ebitda: "$300K – $600K",
    body: "High-conviction opportunities in durable service categories with strong operating fundamentals and long-term demand. Evaluated case by case.",
    tags: ["Strong operating history", "Niche service category", "Long-term demand"],
  },
];

function PageCriteria() {
  return (
    <main>
      <PageHeader
        screen="06 Criteria"
        eyebrow="Investors · Criteria"
        title="Acquisition profile."
        lede="We evaluate opportunities across multiple market segments. Detailed criteria are available to qualified sellers, brokers, and intermediaries upon request."
      />

      <section className="section" style={{ paddingTop: 32, paddingBottom: 56 }}>
        <div className="wrap">
          <div className="crit-segments">
            {CRITERIA_SEGMENTS.map((s, i) => (
              <FadeIn key={i} delay={i * 100}>
                <div className="crit-segment">
                  <div className="crit-seg-head">
                    <div className="crit-seg-n mono">Segment {s.n}</div>
                    <div className="crit-seg-ebitda serif">{s.ebitda}</div>
                  </div>
                  <h3 className="crit-seg-title serif">{s.title}</h3>
                  <p className="body" style={{ fontSize: 14.5 }}>{s.body}</p>
                  <div className="crit-seg-tags">
                    {s.tags.map((t, k) => <span key={k} className="crit-seg-tag">{t}</span>)}
                  </div>
                </div>
              </FadeIn>
            ))}
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--bg-alt)", paddingTop: 64, paddingBottom: 64 }}>
        <div className="wrap">
          <div className="kicker" style={{ marginBottom: 28 }}>Common to all segments</div>
          <div className="criteria-grid criteria-grid-4">
            <Crit label="Geography"  value="United States"        sub="National sourcing, local diligence" />
            <Crit label="Sector"     value="Service businesses"   sub="Recurring or repeat-customer revenue" />
            <Crit label="Ownership"  value="Majority or full"     sub="Including phased seller transitions" />
            <Crit label="Hold"       value="Permanent"            sub="No fund timeline; we own through cycles" />
          </div>
          <div style={{ borderTop: "1px solid var(--rule)", marginTop: 48, paddingTop: 24 }}>
            <p className="small" style={{ color: "var(--mute)", maxWidth: "62ch", lineHeight: 1.65 }}>
              Criteria are a starting point, not a filter. If you represent a business that is close to the above profile, we encourage you to reach out. We evaluate each situation on its own merits.
            </p>
          </div>
        </div>
      </section>
    </main>
  );
}

function Crit({ label, value, sub }) {
  return (
    <div className="crit">
      <div className="label">{label}</div>
      <div className="value serif">{value}</div>
      <div className="sub">{sub}</div>
    </div>
  );
}

/* -------------------- CAREERS -------------------- */
const ROLES = [
  {
    id: "ny",
    title: "Summer Analyst Internship (2026)",
    subtitle: "On-site (New York) · Part-time · Open",
    body: "Work alongside the team in New York on live deals. Direct exposure to sourcing, screening, broker outreach, and investor materials.",
    bullets: [
      "Live deal sourcing and target list development",
      "Market research across U.S. service categories",
      "Investment screening and preliminary diligence",
      "Broker outreach and qualified-lead workflows",
      "Investor materials, memos, and portfolio reporting",
    ],
  },
  {
    id: "rm",
    title: "Summer Analyst Internship (2026)",
    subtitle: "Remote · Part-time · Open",
    body: "Same scope of work, performed remotely. Suited for candidates with strong written communication and self-direction.",
    bullets: [
      "Live deal sourcing and target list development",
      "Market research across U.S. service categories",
      "Investment screening and preliminary diligence",
      "Broker outreach and qualified-lead workflows",
      "Investor materials, memos, and portfolio reporting",
    ],
  },
  {
    id: "ea",
    title: "Executive Assistant to the Managing Partner",
    subtitle: "Hybrid (Remote or On-site) · Part-time · Open",
    body: "Work directly alongside the Managing Partner on the day-to-day execution of the acquisition program. Attend meetings, manage cadence, and keep the front line of communication running.",
    bullets: [
      "Attend meetings with the Managing Partner",
      "Investor calls and follow-up coordination",
      "Banker calls across the active financing pipeline",
      "Seller calls and qualified inbound conversations",
      "Broker meetings and intermediary relationships",
      "Scheduling and follow-up support",
    ],
  },
];

function PageCareers() {
  const [openRole, setOpen] = usePg(null);
  const [applying, setApplying] = usePg(null);

  return (
    <main data-screen-label="07 Careers">
      <PageHeader
        eyebrow="Careers · Open roles"
        title="Direct exposure to acquisition work."
        lede="Analysts work on real transactions across the active pipeline. Three roles are currently open."
      />

      <section className="section" style={{ paddingTop: 24 }}>
        <div className="wrap">
          <div className="roles">
            {ROLES.map((r, i) => (
              <div key={r.id} className={"role" + (openRole === r.id ? " open" : "")}>
                <div className="role-row" onClick={() => setOpen(openRole === r.id ? null : r.id)}>
                  <div className="numbered" style={{ minWidth: 80 }}>{String(i + 1).padStart(2, "0")} / {String(ROLES.length).padStart(2, "0")}</div>
                  <div style={{ flex: 1 }}>
                    <div className="serif" style={{ fontSize: 24, lineHeight: 1.2 }}>{r.title}</div>
                    <div className="small" style={{ marginTop: 6, color: "var(--mute)", letterSpacing: "0.05em" }}>
                      {r.subtitle}
                    </div>
                  </div>
                  <span className="role-toggle" aria-hidden>{openRole === r.id ? "−" : "+"}</span>
                </div>
                {openRole === r.id && (
                  <div className="role-body">
                    <div className="grid grid-2" style={{ gap: 64, alignItems: "start" }}>
                      <div><p className="body">{r.body}</p></div>
                      <div>
                        <div className="kicker" style={{ marginBottom: 16 }}>Scope of work</div>
                        <ul className="role-bullets">
                          {r.bullets.map((b, k) => <li key={k}>{b}</li>)}
                        </ul>
                        <button className="btn" style={{ marginTop: 28 }} onClick={() => setApplying(r.id)}>
                          Apply <span className="arr">→</span>
                        </button>
                      </div>
                    </div>
                  </div>
                )}
              </div>
            ))}
          </div>
          <div style={{ borderTop: "1px solid var(--rule)", marginTop: 64, paddingTop: 24 }}>
            <p className="small" style={{ color: "var(--mute)", maxWidth: "70ch" }}>
              Applications are reviewed on a rolling basis until the roles are filled.
            </p>
          </div>
        </div>
      </section>

      {applying !== null && (
        <ApplyModal role={ROLES.find(r => r.id === applying)} onClose={() => setApplying(null)} />
      )}
    </main>
  );
}

function ApplyModal({ role, onClose }) {
  const [state, setState] = usePg({ name: "", email: "", phone: "", school: "", linkedin: "", resumeUrl: "", note: "" });
  const [submitted, setSubmitted] = usePg(false);
  const [sending, setSending] = usePg(false);
  const [errors, setErrors] = usePg({});

  const validate = () => {
    const e = {};
    if (!state.name.trim())       e.name = "Required";
    if (!state.email.trim())      e.email = "Required";
    else if (!/^[^@]+@[^@]+\.[^@]+$/.test(state.email)) e.email = "Enter a valid email";
    if (!state.phone.trim())      e.phone = "Required";
    if (!state.school.trim())     e.school = "Required";
    if (!state.linkedin.trim())   e.linkedin = "Required";
    else if (!/linkedin\.com\/in\//i.test(state.linkedin)) e.linkedin = "Must be a linkedin.com/in/ URL";
    if (!state.resumeUrl.trim())  e.resumeUrl = "Required";
    if (!state.note.trim())       e.note = "Required";
    setErrors(e);
    return Object.keys(e).length === 0;
  };

  const onSubmit = async (ev) => {
    ev.preventDefault();
    if (!validate()) return;
    setSending(true);
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          access_key: WEB3FORMS_KEY,
          subject: `New Application — ${role.title}`,
          from_name: state.name,
          replyto: state.email,
          role: role.title,
          name: state.name,
          email: state.email,
          phone: state.phone,
          school: state.school,
          linkedin: state.linkedin,
          resume_link: state.resumeUrl,
          cover_note: state.note,
        }),
      });
      if (res.ok) { setSubmitted(true); }
      else { alert("Something went wrong — please email us directly at hiring@erdemholdings.com"); }
    } catch { alert("Network error — please email us directly at hiring@erdemholdings.com"); }
    setSending(false);
  };

  return (
    <div className="modal-back" onClick={onClose}>
      <div className="modal" onClick={e => e.stopPropagation()}>
        <button className="modal-close" onClick={onClose} aria-label="Close">✕</button>
        {submitted ? (
          <div style={{ padding: 8 }}>
            <div className="kicker" style={{ marginBottom: 18 }}>Application received</div>
            <h3 className="h-section serif" style={{ marginBottom: 18 }}>Thank you, {state.name.split(" ")[0]}.</h3>
            <p className="body">
              Your application for <strong>{role.title}</strong> has been received. You will hear from us within ten business days.
            </p>
            <button className="btn" style={{ marginTop: 28 }} onClick={onClose}>Close</button>
          </div>
        ) : (
          <form onSubmit={onSubmit}>
            <div className="kicker" style={{ marginBottom: 18 }}>Apply</div>
            <h3 className="h-section serif" style={{ marginBottom: 6 }}>{role.title}</h3>
            <div className="small" style={{ color: "var(--mute)", marginBottom: 32 }}>{role.subtitle}</div>
            <div className="form-grid">
              <Field label="Full name"  value={state.name}      onChange={v => setState({...state, name: v})}      error={errors.name} />
              <Field label="Email"      type="email" value={state.email} onChange={v => setState({...state, email: v})} error={errors.email} />
              <Field label="Phone"      value={state.phone}     onChange={v => setState({...state, phone: v})}     error={errors.phone} placeholder="+1 (___) ___-____" />
              <Field label="School / current institution" value={state.school} onChange={v => setState({...state, school: v})} error={errors.school} />
              <Field label="LinkedIn"   value={state.linkedin}  onChange={v => setState({...state, linkedin: v})}  error={errors.linkedin} placeholder="linkedin.com/in/…" full />
              <Field label="Resume link" value={state.resumeUrl} onChange={v => setState({...state, resumeUrl: v})} error={errors.resumeUrl}
                     placeholder="Google Drive, Dropbox, or any shareable link" full />
              <Field label="Cover note" value={state.note} onChange={v => setState({...state, note: v})} textarea full
                     placeholder="A few lines on why this role and what you bring to it." error={errors.note} />
            </div>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 32, gap: 16, flexWrap: "wrap" }}>
              <span className="small" style={{ color: "var(--mute)" }}>All fields are required.</span>
              <button className="btn" type="submit" disabled={sending}>
                {sending ? "Sending…" : "Submit application"} <span className="arr">→</span>
              </button>
            </div>
          </form>
        )}
      </div>
    </div>
  );
}

function Field({ label, value, onChange, type = "text", error, placeholder, textarea, full }) {
  return (
    <label className={"field" + (full ? " full" : "") + (error ? " error" : "")}>
      <span className="field-label">
        {label}
        <span className="field-required">REQUIRED</span>
        {error && <span className="field-err"> · {error}</span>}
      </span>
      {textarea ? (
        <textarea value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} rows={4} />
      ) : (
        <input type={type} value={value} onChange={e => onChange(e.target.value)} placeholder={placeholder} />
      )}
    </label>
  );
}

/* -------------------- CONTACT -------------------- */
function PageContact() {
  const [state, setState] = usePg({ name: "", email: "", role: "Seller / Owner", message: "" });
  const [submitted, setSubmitted] = usePg(false);
  const [errors, setErrors] = usePg({});

  const [sending, setSending] = usePg(false);

  const onSubmit = async (e) => {
    e.preventDefault();
    const er = {};
    if (!state.name.trim()) er.name = "Required";
    if (!state.email.trim()) er.email = "Required";
    else if (!/^[^@]+@[^@]+\.[^@]+$/.test(state.email)) er.email = "Enter a valid email";
    if (!state.message.trim()) er.message = "Required";
    setErrors(er);
    if (Object.keys(er).length) return;
    setSending(true);
    try {
      const res = await fetch("https://api.web3forms.com/submit", {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({
          access_key: WEB3FORMS_KEY,
          subject: `New Inquiry — ${state.role}`,
          from_name: state.name,
          replyto: state.email,
          name: state.name,
          email: state.email,
          role: state.role,
          message: state.message,
        }),
      });
      if (res.ok) { setSubmitted(true); }
      else { alert("Something went wrong — please email us directly at contact@erdemholdings.com"); }
    } catch { alert("Network error — please email us directly at contact@erdemholdings.com"); }
    setSending(false);
  };

  return (
    <main data-screen-label="08 Contact">
      <PageHeader
        eyebrow="Contact"
        title="For brokers, sellers, lenders, and investors."
        lede="Inquiries are treated confidentially. We respond within five business days."
      />
      <section className="section" style={{ paddingTop: 24 }}>
        <div className="wrap">
          <div className="grid grid-2" style={{ gap: 96, alignItems: "start" }}>
            <div>
              <div className="kicker" style={{ marginBottom: 24 }}>Direct</div>
              <ContactRow label="Email"      value="contact@erdemholdings.com" />
              <ContactRow label="Phone"      value="+1 (212) 555-0142" />
              <ContactRow label="Office"     value={<>Erdem Holdings LLC<br/>New York, NY</>} />
              <ContactRow label="Affiliated" value={<>Erdem family operating group<br/>Vienna, Austria</>} />
              <div style={{ marginTop: 48, paddingTop: 24, borderTop: "1px solid var(--rule)" }}>
                <div className="kicker" style={{ marginBottom: 16 }}>Confidentiality</div>
                <p className="small" style={{ color: "var(--mute)", maxWidth: "44ch", lineHeight: 1.6 }}>
                  All inquiries are handled with strict confidentiality. We sign NDAs as a matter of course before discussing specific opportunities.
                </p>
              </div>
            </div>
            <div className="contact-card">
              {submitted ? (
                <div>
                  <div className="kicker" style={{ marginBottom: 18 }}>Message received</div>
                  <h3 className="h-section serif" style={{ marginBottom: 18 }}>Thank you.</h3>
                  <p className="body">We will be in touch within five business days.</p>
                </div>
              ) : (
                <form onSubmit={onSubmit}>
                  <div className="kicker" style={{ marginBottom: 22 }}>Send a message</div>
                  <div className="form-grid">
                    <Field label="Full name" value={state.name}  onChange={v => setState({...state, name: v})}  error={errors.name} />
                    <Field label="Email" type="email" value={state.email} onChange={v => setState({...state, email: v})} error={errors.email} />
                    <label className="field full">
                      <span className="field-label">I am a <span className="field-required">REQUIRED</span></span>
                      <select value={state.role} onChange={e => setState({...state, role: e.target.value})}>
                        <option>Seller / Owner</option>
                        <option>Broker / Intermediary</option>
                        <option>Lender</option>
                        <option>Investor / LP</option>
                        <option>Candidate</option>
                        <option>Other</option>
                      </select>
                    </label>
                    <Field label="Message" value={state.message} onChange={v => setState({...state, message: v})}
                           textarea full error={errors.message} placeholder="A few lines on what you'd like to discuss." />
                  </div>
                  <div style={{ display: "flex", justifyContent: "flex-end", marginTop: 28 }}>
                    <button className="btn" type="submit" disabled={sending}>
                      {sending ? "Sending…" : "Send"} <span className="arr">→</span>
                    </button>
                  </div>
                </form>
              )}
            </div>
          </div>
        </div>
      </section>
    </main>
  );
}

function ContactRow({ label, value }) {
  return (
    <div className="contact-row">
      <div className="label">{label}</div>
      <div className="value">{value}</div>
    </div>
  );
}

Object.assign(window, {
  PageHome, PageAbout, PagePortfolio, PageTeam,
  PageInvestors, PageCriteria, PageCareers, PageContact,
});