// home.jsx · landing page

const homeStyles = `
  /* HERO */
  .hero{padding:88px 0 88px;position:relative;overflow:hidden}
  .hero-circles{position:absolute;top:-120px;right:-160px;width:560px;height:340px;
    color:${ARMIK.accentBri}3b;pointer-events:none;animation:drift 18s ease-in-out infinite}
  .hero-circles svg{width:100%;height:100%}
  .hero-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center;
    position:relative;z-index:1}
  @media(max-width:980px){.hero-grid{grid-template-columns:1fr;gap:48px}}
  .h1{font-size:clamp(56px,8.6vw,128px)}
  .h1 .accent{color:var(--accent);font-style:italic}
  .hero-lede{margin-top:32px;font-size:18px;line-height:1.6;color:var(--ink-soft);
    max-width:42ch}
  .hero-lede strong{color:var(--ink);font-weight:500}
  .hero-actions{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap}

  .hero-figure{position:relative;aspect-ratio:1/1;border-radius:6px;overflow:hidden;
    background:${ARMIK.blue};box-shadow:0 30px 80px -30px ${ARMIK.blue}66}
  .hero-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    transform:scale(1.02);transition:transform 1.4s ease}
  .hero-figure:hover img{transform:scale(1.06)}
  .hero-figure .badge{position:absolute;left:20px;bottom:20px;font-family:var(--mono);
    font-size:10.5px;color:#fff;letter-spacing:.1em;padding:8px 14px;
    background:rgba(0,0,0,.32);backdrop-filter:blur(6px);border-radius:999px;
    border:1px solid rgba(255,255,255,.22)}
  .hero-figure .corner{position:absolute;right:18px;top:18px;color:#fff;opacity:.85;
    animation:wink 4s ease-in-out infinite}

  .hero-meta{display:grid;grid-template-columns:repeat(4,1fr);gap:48px;margin-top:72px;
    padding-top:32px;border-top:1px solid var(--rule);position:relative;z-index:1}
  @media(max-width:780px){.hero-meta{grid-template-columns:repeat(2,1fr);gap:32px}}
  .hero-meta .k{font-size:48px;font-family:var(--display);font-style:italic;
    line-height:1;color:var(--ink)}
  .hero-meta .k .pre{font-style:normal;color:var(--ink-mute);font-size:24px;
    margin-right:4px;vertical-align:0.18em}
  .hero-meta .l{color:var(--ink-mute);font-size:11px;margin-top:10px;letter-spacing:.08em;
    text-transform:uppercase;font-family:var(--mono)}

  /* STRATEGY */
  .strategy{border-top:1px solid var(--rule);position:relative;overflow:hidden}
  .strategy::before{content:"";position:absolute;left:-200px;top:80px;width:560px;height:340px;
    color:${ARMIK.blue}10;pointer-events:none}
  .strat-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start;
    position:relative;z-index:1}
  @media(max-width:980px){.strat-grid{grid-template-columns:1fr;gap:40px}}
  .strat-lede{font-family:var(--display);font-size:38px;line-height:1.18;
    letter-spacing:-0.01em;max-width:18ch}
  .strat-lede em{color:var(--accent);font-style:italic}
  .strat-body{font-size:16px;line-height:1.75;color:var(--ink-soft);
    display:flex;flex-direction:column;gap:18px;max-width:54ch}
  .strat-body p strong{color:var(--ink);font-weight:500}
  .strat-cta{margin-top:16px}

  /* CRITERIA STRIP */
  .crit-strip{background:var(--bg-alt);border-top:1px solid var(--rule);
    border-bottom:1px solid var(--rule)}
  .crit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
    background:var(--rule)}
  @media(max-width:980px){.crit-grid{grid-template-columns:repeat(2,1fr)}}
  .crit{background:var(--bg-alt);padding:36px 28px;display:flex;flex-direction:column;
    gap:10px;min-height:220px;transition:.25s;position:relative}
  .crit:hover{background:var(--surface);transform:translateY(-2px)}
  .crit .lbl{color:var(--accent)}
  .crit .v{font-family:var(--display);font-size:36px;line-height:1.05;letter-spacing:-0.01em}
  .crit .d{color:var(--ink-mute);font-size:13px;line-height:1.6;margin-top:auto;padding-top:8px}

  /* PROCESS */
  .process{border-top:1px solid var(--rule);position:relative}
  .process-bg{position:absolute;right:-200px;top:120px;width:520px;height:320px;
    color:${ARMIK.accentBri}26;pointer-events:none;animation:drift 22s ease-in-out infinite}
  .proc-row{display:grid;grid-template-columns:90px 1fr 1.2fr;gap:48px;
    padding:42px 0;border-top:1px solid var(--rule);align-items:start;transition:.3s;
    position:relative}
  .proc-row:last-of-type{border-bottom:1px solid var(--rule)}
  .proc-row:hover{padding-left:18px}
  .proc-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
    background:var(--accent);transform:scaleY(0);transform-origin:center;transition:.35s}
  .proc-row:hover::before{transform:scaleY(1)}
  .proc-row .n{color:var(--accent)}
  .proc-row .t{font-family:var(--display);font-size:34px;line-height:1.1;
    letter-spacing:-0.01em;max-width:14ch}
  .proc-row .b{color:var(--ink-soft);font-size:15px;line-height:1.7;max-width:48ch}
  .proc-row .b .ts{display:block;margin-top:14px;color:var(--ink-faint);
    font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase}
  @media(max-width:780px){.proc-row{grid-template-columns:1fr;gap:14px;padding:28px 0}
    .proc-row .t{font-size:26px}}

  /* PARTNERSHIP BAND · visual moment with the handshake image */
  .partners{padding:0;position:relative;background:${ARMIK.blue};color:#fff;
    overflow:hidden}
  .partners-inner{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
    min-height:520px}
  @media(max-width:980px){.partners-inner{grid-template-columns:1fr}}
  .partners-img{position:relative;overflow:hidden;min-height:360px}
  .partners-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .partners-copy{padding:88px 64px;display:flex;flex-direction:column;
    justify-content:center;gap:24px}
  @media(max-width:780px){.partners-copy{padding:64px 32px}}
  .partners-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;
    text-transform:uppercase;color:#ffffffbb}
  .partners h2{font-family:var(--display);font-size:clamp(42px,5.4vw,72px);
    letter-spacing:-0.02em;line-height:1.02;max-width:14ch}
  .partners h2 em{font-style:italic;color:${ARMIK.accentBri}}
  .partners p{font-size:16px;line-height:1.7;color:#ffffffd9;max-width:42ch}
  .partners .btn-bri{background:#fff;color:${ARMIK.blue}}
  .partners .btn-bri:hover{background:${ARMIK.accentBri};color:${ARMIK.blue}}

  /* CTA BAND */
  .cta-band{padding:140px 0;position:relative;overflow:hidden;
    border-top:1px solid var(--rule)}
  .cta-band-mark{position:absolute;right:-120px;bottom:-120px;width:520px;height:320px;
    color:${ARMIK.accent}26;animation:spinSlow 60s linear infinite;pointer-events:none}
  .cta-h{font-family:var(--display);font-size:clamp(56px,9vw,140px);
    letter-spacing:-0.02em;line-height:.96;max-width:14ch;position:relative}
  .cta-h em{color:var(--accent);font-style:italic}
  .cta-sub{margin-top:32px;color:var(--ink-soft);font-size:17px;line-height:1.7;
    max-width:50ch}
  .cta-actions{margin-top:48px;display:flex;gap:14px;flex-wrap:wrap}
`;

function HomePage() {
  useReveal();
  return (
    <>
      <style>{buildStyles()}</style>
      <style>{homeStyles}</style>
      <Nav active="Home" />

      {/* HERO */}
      <section className="hero">
        <div className="hero-circles">
          <CirclesMark size={340} stroke={1.2} />
        </div>
        <div className="wrap">
          <div className="eyebrow mono reveal">
            <span className="bar"></span>
            <span>London &nbsp;·&nbsp; Permanent capital &nbsp;·&nbsp; Est. 2025</span>
          </div>
          <div className="hero-grid">
            <div>
              <h1 className="display h1 reveal">
                Quiet capital<br/>
                for the <span className="accent">long</span> hold.
              </h1>
              <p className="hero-lede reveal d1">
                <strong>Armik Capital</strong> acquires one or two established
                British businesses each year and keeps them.
                No flips. No five year clocks. A managing director on site,
                the same name above the door.
              </p>
              <div className="hero-actions reveal d2">
                <a href="about.html" className="btn btn-primary">
                  Our approach <span className="arrow"></span>
                </a>
                <a href="contact.html" className="btn btn-ghost">Get in touch</a>
              </div>
            </div>
            <div className="hero-figure reveal d3">
              <img src="assets/handshake.webp" alt="Two hands meeting in a handshake" />
              <span className="badge">Partnership over transaction</span>
              <span className="corner"><CirclesMark size={36} stroke={1.4} /></span>
            </div>
          </div>

          <div className="hero-meta">
            <div className="reveal d1">
              <div className="k"><CountUp to={2} suffix="" /></div>
              <div className="l">Acquisitions per year</div>
            </div>
            <div className="reveal d2">
              <div className="k"><span className="pre">£</span><CountUp to={25} suffix="m" /></div>
              <div className="l">Up to enterprise value</div>
            </div>
            <div className="reveal d3">
              <div className="k">∞</div>
              <div className="l">Hold period</div>
            </div>
            <div className="reveal d4">
              <div className="k italic">UK</div>
              <div className="l">Geography</div>
            </div>
          </div>
        </div>
      </section>

      <Marquee />

      {/* STRATEGY */}
      <section id="strategy" className="strategy">
        <div className="wrap">
          <div className="sec-head reveal">
            <div className="mono sec-num">§ 01 / Strategy</div>
            <h2 className="display sec-title">A holding company, not a fund.</h2>
          </div>
          <div className="strat-grid">
            <p className="strat-lede italic reveal d1">
              We were built without a fund clock, so we can act like an
              <em> owner </em> rather than a manager of other people's money.
            </p>
            <div className="strat-body reveal d2">
              <p>
                Most acquirers are passing through. They buy on a five year
                cycle, optimise for an exit, and leave the next buyer to
                clean up. That model does not suit the kind of businesses
                we like. The ones that took thirty years to build and are
                quietly the best at what they do.
              </p>
              <p>
                <strong>Armik is structured to hold indefinitely.</strong> Our
                capital comes from a small group of long term partners.
                There is no fund, no LPs to return to, no pressure to sell.
                We acquire one or two companies a year and run them
                carefully, for decades.
              </p>
              <p>
                After acquisition, we install a Managing Director who works
                alongside your existing leadership. We do not gut teams,
                rebrand, or centralise back office until it hurts. The
                name stays. The people stay. The thing you built keeps
                being itself.
              </p>
              <a href="about.html" className="btn btn-ghost strat-cta">
                Read our approach <span className="arrow"></span>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* PARTNERSHIP BAND with handshake image */}
      <section className="partners">
        <div className="partners-inner">
          <div className="partners-img reveal">
            <img src="assets/handshake.webp" alt="Two hands meeting" />
          </div>
          <div className="partners-copy">
            <div className="partners-eyebrow reveal">A different kind of partner</div>
            <h2 className="reveal d1">We sign once. <em>Then we stay.</em></h2>
            <p className="reveal d2">
              For thirty years, your customers, your staff, and your suppliers
              have trusted that the name above the door means the same thing.
              That does not change the day you sell to us. It is the
              foundation we build on for the next thirty.
            </p>
            <div className="reveal d3">
              <a href="contact.html" className="btn btn-bri">
                Begin a conversation <span className="arrow"></span>
              </a>
            </div>
          </div>
        </div>
      </section>

      {/* CRITERIA */}
      <section className="crit-strip">
        <div className="wrap">
          <div className="sec-head reveal">
            <div className="mono sec-num">§ 02 / Criteria</div>
            <h2 className="display sec-title">What we look for, plainly stated.</h2>
          </div>
          <div className="crit-grid">
            <div className="crit reveal d1">
              <div className="mono lbl">Revenue</div>
              <div className="v">£2 to £25m</div>
              <div className="d">Annual turnover. Smaller is welcome if the business is exceptional in its niche.</div>
            </div>
            <div className="crit reveal d2">
              <div className="mono lbl">EBITDA margin</div>
              <div className="v">15% or more</div>
              <div className="d">Consistent profitability over at least three trading years. We do not restructure to make numbers work.</div>
            </div>
            <div className="crit reveal d3">
              <div className="mono lbl">Tenure</div>
              <div className="v">10+ years</div>
              <div className="d">A proven track record. We prefer companies with a story longer than ours.</div>
            </div>
            <div className="crit reveal d4">
              <div className="mono lbl">Geography</div>
              <div className="v">United Kingdom</div>
              <div className="d">England, Scotland, Wales and Northern Ireland. Operations may extend abroad.</div>
            </div>
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section className="process">
        <div className="process-bg">
          <CirclesMark size={320} stroke={1.2} />
        </div>
        <div className="wrap">
          <div className="sec-head reveal">
            <div className="mono sec-num">§ 03 / Process</div>
            <h2 className="display sec-title">Four conversations from first call to close.</h2>
          </div>
          <div>
            {[
              { n:"I",  t:"A confidential conversation.", b:"Coffee, a phone call, or a walk. Off the record. We ask what you are actually trying to achieve, for yourself, your family, your team, before we ask anything about the business. No NDAs, no decks. Most sellers we meet have never told anyone they are thinking about an exit. We hear you first.", ts:"Typical duration · 1 to 2 weeks" },
              { n:"II", t:"A light, respectful review.",  b:"If there is mutual interest, we ask for top line financials and spend a couple of weeks understanding the shape of the business. No data rooms, no auditors crawling the office, no questions for your team. You stay in control of who knows.", ts:"Typical duration · 2 to 4 weeks" },
              { n:"III",t:"A clear offer, in writing.",   b:"We make one proposal covering terms, structure, and timeline that reflects what we discussed. We do not bid low to renegotiate later. The price you see is the price we close at, barring genuine surprises. If you would rather walk, we shake hands and stay in touch.", ts:"Typical duration · 1 week" },
              { n:"IV", t:"A handover, then stewardship.", b:"We appoint a Managing Director who joins your team. You stay on for as long as you would like, six months, six years, or six weeks. Culture, name, location, and people remain. We provide governance, capital, and patient ambition for whatever comes next.", ts:"Closing onward · indefinitely" },
            ].map((s, i) => (
              <div className={"proc-row reveal d" + (i+1)} key={i}>
                <div className="mono n">Step {s.n}</div>
                <div className="t">{s.t}</div>
                <div className="b">{s.b}<span className="ts">{s.ts}</span></div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* CTA */}
      <section className="cta-band">
        <div className="cta-band-mark">
          <CirclesMark size={320} stroke={1.2} />
        </div>
        <div className="wrap">
          <h2 className="cta-h reveal">
            Your legacy,<br/>
            our <em>commitment</em>.
          </h2>
          <p className="cta-sub reveal d1">
            If you are a founder, intermediary, or advisor exploring a sale,
            we would like to hear from you. The first conversation is
            confidential and costs nothing.
          </p>
          <div className="cta-actions reveal d2">
            <a href="contact.html" className="btn btn-primary">
              Start a conversation <span className="arrow"></span>
            </a>
            <a href="about.html" className="btn btn-ghost">Learn more about Armik</a>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<HomePage />);