// about.jsx · About page

const aboutStyles = `
  /* HERO */
  .a-hero{padding:88px 0 56px;position:relative;overflow:hidden}
  .a-hero-mark{position:absolute;left:-180px;top:60px;width:520px;height:320px;
    color:${ARMIK.accentBri}33;pointer-events:none;animation:drift 24s ease-in-out infinite}
  .a-hero h1{font-size:clamp(56px,8.6vw,124px);max-width:14ch;position:relative}
  .a-hero h1 em{color:var(--accent);font-style:italic}
  .a-hero .sub{margin-top:32px;font-family:var(--display);font-size:30px;
    line-height:1.3;color:var(--ink-soft);max-width:34ch}

  .a-hero-fig{margin-top:72px;display:grid;grid-template-columns:1.5fr 1fr;gap:24px;
    align-items:stretch}
  @media(max-width:780px){.a-hero-fig{grid-template-columns:1fr}}
  .a-hero-fig .big{position:relative;border-radius:6px;overflow:hidden;
    background:${ARMIK.blue};min-height:420px;
    box-shadow:0 30px 80px -30px ${ARMIK.blue}55}
  .a-hero-fig .big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
  .a-hero-fig .big .badge{position:absolute;left:22px;bottom:22px;font-family:var(--mono);
    font-size:10.5px;color:#fff;letter-spacing:.12em;padding:8px 14px;
    background:rgba(0,0,0,.32);backdrop-filter:blur(6px);border-radius:999px;
    border:1px solid rgba(255,255,255,.22)}
  .a-stat-stack{display:flex;flex-direction:column;gap:16px}
  .a-stat{background:var(--surface);border:1px solid var(--rule);padding:28px 26px;
    border-radius:6px;flex:1;display:flex;flex-direction:column;justify-content:space-between;
    transition:.25s;min-height:130px}
  .a-stat:hover{transform:translateY(-2px);border-color:var(--accent)}
  .a-stat .lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--accent)}
  .a-stat .v{font-family:var(--display);font-size:46px;line-height:1;
    letter-spacing:-0.01em;font-style:italic}
  .a-stat .v .pre{font-style:normal;color:var(--ink-mute);font-size:24px;margin-right:4px}
  .a-stat .d{font-size:13px;color:var(--ink-mute);line-height:1.5}

  /* WHO */
  .who{border-top:1px solid var(--rule);position:relative}
  .who-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
  @media(max-width:980px){.who-grid{grid-template-columns:1fr;gap:40px}}
  .who-lede{font-family:var(--display);font-size:38px;line-height:1.18;
    letter-spacing:-0.01em;max-width:18ch}
  .who-lede em{color:var(--accent);font-style:italic}
  .who-body{font-size:16px;line-height:1.75;color:var(--ink-soft);
    display:flex;flex-direction:column;gap:18px;max-width:54ch}
  .who-body p strong{color:var(--ink);font-weight:500}
  .pull{padding:32px 36px;border-left:2px solid var(--accent);
    background:${ARMIK.accentBri}1c;font-family:var(--display);
    font-size:26px;line-height:1.35;color:var(--ink);margin-top:8px}

  /* HOW */
  .how{border-top:1px solid var(--rule);background:var(--bg-alt)}
  .how-item{padding:36px 0;border-top:1px solid var(--rule);
    display:grid;grid-template-columns:1fr 1.4fr;gap:48px;align-items:start;
    transition:.25s}
  .how-item:hover{padding-left:14px}
  .how-item:last-of-type{border-bottom:1px solid var(--rule)}
  .how-item .num{font-family:var(--mono);font-size:11px;color:var(--accent);
    letter-spacing:.1em;margin-bottom:8px}
  .how-item .t{font-family:var(--display);font-size:30px;line-height:1.15;
    letter-spacing:-0.01em;max-width:14ch}
  .how-item .b{color:var(--ink-soft);font-size:15px;line-height:1.7}
  @media(max-width:780px){.how-item{grid-template-columns:1fr;gap:14px}}

  /* PRINCIPLES */
  .principles{border-top:1px solid var(--rule);position:relative;overflow:hidden}
  .princ-mark{position:absolute;right:-200px;top:60px;width:520px;height:320px;
    color:${ARMIK.accentBri}26;pointer-events:none;animation:drift 26s ease-in-out infinite}
  .princ-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
    background:var(--rule);border:1px solid var(--rule);position:relative;z-index:1}
  @media(max-width:980px){.princ-grid{grid-template-columns:1fr}}
  .princ{background:var(--bg);padding:40px 32px;min-height:280px;
    display:flex;flex-direction:column;gap:16px;transition:.25s;position:relative;
    overflow:hidden}
  .princ::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
    background:var(--accent);transform:scaleX(0);transform-origin:left;transition:.35s}
  .princ:hover{background:var(--surface)}
  .princ:hover::before{transform:scaleX(1)}
  .princ .num{color:var(--accent)}
  .princ .t{font-family:var(--display);font-size:28px;line-height:1.15;
    letter-spacing:-0.01em}
  .princ .b{color:var(--ink-soft);font-size:14.5px;line-height:1.65;margin-top:auto}

  /* FAQ */
  .faq{border-top:1px solid var(--rule)}
  .faq-item{border-top:1px solid var(--rule);padding:28px 0;cursor:pointer;
    display:grid;grid-template-columns:1fr 28px;gap:24px;align-items:start;
    transition:padding .25s ease}
  .faq-item:last-of-type{border-bottom:1px solid var(--rule)}
  .faq-item:hover{padding-left:8px}
  .faq-q{font-family:var(--display);font-size:26px;line-height:1.25;
    letter-spacing:-0.01em}
  .faq-a{grid-column:1/-1;color:var(--ink-soft);font-size:15px;line-height:1.75;
    max-width:64ch;max-height:0;overflow:hidden;
    transition:max-height .4s ease,margin .4s ease,opacity .3s ease;opacity:0}
  .faq-item.open .faq-a{max-height:500px;margin-top:18px;opacity:1}
  .faq-toggle{width:28px;height:28px;border:1px solid var(--ink-faint);
    border-radius:50%;display:flex;align-items:center;justify-content:center;
    transition:.3s;font-size:14px;line-height:1;color:var(--ink-mute)}
  .faq-item.open .faq-toggle{background:var(--accent);border-color:var(--accent);
    color:#fff;transform:rotate(45deg)}

  /* CTA */
  .cta-band{padding:140px 0;border-top:1px solid var(--rule);
    position:relative;overflow:hidden}
  .cta-band-mark{position:absolute;left:-120px;bottom:-120px;width:520px;height:320px;
    color:${ARMIK.accent}26;animation:spinSlow 80s linear infinite;pointer-events:none}
  .cta-h{font-family:var(--display);font-size:clamp(48px,7vw,108px);
    letter-spacing:-0.02em;line-height:.98;max-width:18ch;position:relative}
  .cta-h em{color:var(--accent);font-style:italic}
  .cta-actions{margin-top:48px;display:flex;gap:14px;flex-wrap:wrap}
`;

function AboutPage() {
  useReveal();

  const how = [
    { t:"Relationships before transactions.", b:"We meet many founders we never buy from. Some become friends. A handful become partners years later when the timing is right. Either is fine. Selling a company is one of the largest decisions you will make, and we are not in a hurry to push it."},
    { t:"Operators, not financial engineers.", b:"After acquisition, a dedicated Managing Director joins your team. They sit in the office, walk the floor, and learn the business in person. They report to a small board with operating experience, not a deal team chasing the next IRR."},
    { t:"Conservative capital structure.",     b:"We finance acquisitions with patient equity from a small group of long term partners, complemented by sensible senior debt. We do not load companies with leverage to juice returns. Companies that survive recessions are not the over levered ones."},
    { t:"Continuity above growth.",            b:"Growth matters, but only when it does not compromise the things that made the business worth buying. We would rather hold a steady, profitable business for thirty years than push it through five years of aggressive expansion and a forced sale."},
  ];

  const principles = [
    { num:"I.",  t:"We hold forever.",          b:"There is no fund and no exit pressure. We treat every acquisition as the last one we will ever make of that kind."},
    { num:"II.", t:"The name stays.",           b:"Brand, signage, email domains, factory floor. We do not rename what works. The next generation should still recognise it."},
    { num:"III.",t:"People over models.",       b:"We back the team that is already there. No outside consultants, no restructuring decks, no 100 day plans you did not ask for."},
    { num:"IV.", t:"One offer, in plain English.", b:"We do not negotiate by attrition. The number we put on paper at week six is the number you receive at close."},
    { num:"V.",  t:"Patience compounds.",       b:"We measure decisions in decades. The best capital allocation question is rarely the urgent one."},
    { num:"VI.", t:"Confidentiality is total.", b:"Your staff, your customers, and your competitors will not hear about us until you decide they should. Usually that means never."},
  ];

  const faqs = [
    { q:"Do I have to stay on after the sale?", a:"No. Some sellers want a quick handover and a clean break of six weeks with no involvement after. Others want to stay on the board, or keep running things day to day for several more years. Both are fine. We have built the firm around whichever you choose, not whichever is most efficient for us." },
    { q:"Will you change the company name or fire my team?", a:"No. The name, the brand, the office, the people, they all stay. We have a thirty year horizon, so we are not in a position to throw away the very things that made the business worth buying. Our Managing Director joins your team, they do not replace it." },
    { q:"How do you finance acquisitions?", a:"Equity from a small pool of long term partners, complemented by conservative senior debt where it makes sense. We do not load companies with leverage to juice returns. We are holding for the long run, and over levered businesses do not survive the long run." },
    { q:"How quickly can you move?", a:"If the business is straightforward and the seller is decided, eight to twelve weeks from first call to close. We have done it faster. We have also taken nine months when the seller wanted nine months. The pace is set by you." },
    { q:"Will you work with my advisor, accountant, or broker?", a:"Of course. We work happily with intermediaries and pay fees directly. We also speak with sellers who do not yet have an advisor and are not sure they want one. Either route is normal." },
    { q:"What if we are not the right fit?", a:"We will tell you in the first conversation, with a reason. If we know someone better suited, we will make the introduction. We see far more businesses than we buy and most of those founders we have stayed in touch with for years." },
  ];

  const [open, setOpen] = React.useState(0);

  return (
    <>
      <style>{buildStyles()}</style>
      <style>{aboutStyles}</style>
      <Nav active="About" />

      <section className="a-hero">
        <div className="a-hero-mark"><CirclesMark size={320} stroke={1.2} /></div>
        <div className="wrap">
          <div className="eyebrow mono reveal">
            <span className="bar"></span>
            <span>About Armik Capital</span>
          </div>
          <h1 className="display reveal">Who we are, and <em>why</em> we exist.</h1>
          <p className="sub italic reveal d1">
            A London holding company built to acquire one or two enduring
            British businesses each year, and steward them indefinitely.
          </p>

          <div className="a-hero-fig">
            <div className="big reveal d1">
              <img src="assets/handshake.webp" alt="Two hands meeting in a handshake" />
              <span className="badge">A handshake means something</span>
            </div>
            <div className="a-stat-stack">
              <div className="a-stat reveal d2">
                <div className="lbl">Acquisitions per year</div>
                <div className="v"><CountUp to={2} /></div>
                <div className="d">One or two, carefully chosen.</div>
              </div>
              <div className="a-stat reveal d3">
                <div className="lbl">Up to enterprise value</div>
                <div className="v"><span className="pre">£</span><CountUp to={25} suffix="m" /></div>
                <div className="d">Founder led businesses we can hold for decades.</div>
              </div>
              <div className="a-stat reveal d4">
                <div className="lbl">Hold period</div>
                <div className="v">Indefinite</div>
                <div className="d">No fund clock. No forced exit.</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      <Marquee />

      <section className="who">
        <div className="wrap">
          <div className="sec-head reveal">
            <div className="mono sec-num">§ 01 / Who we are</div>
            <h2 className="display sec-title">A small firm built on a long horizon.</h2>
          </div>
          <div className="who-grid">
            <p className="who-lede italic reveal d1">
              Armik Capital was established in London with a clear mission.
              To build a group of <em>strong, enduring</em> businesses through
              thoughtful acquisitions and long term stewardship.
            </p>
            <div className="who-body reveal d2">
              <p>
                Our approach is selective and disciplined. We focus on
                acquiring small to mid sized companies with stable
                foundations, aiming for one to two acquisitions per year.
                Each opportunity is evaluated carefully, with an emphasis
                on trust, cultural fit, and sustainable growth.
              </p>
              <p>
                After acquisition, a dedicated Managing Director is appointed
                to work alongside the existing leadership team. This ensures
                operational stability, preserves company culture, and supports
                performance at the local level. Armik Capital provides the
                strategic oversight, governance, and resources to sustain
                long term growth across the group.
              </p>
              <p>
                <strong>We exist to be a reliable partner for business owners.</strong>
                A home where legacy is preserved, people are respected, and
                performance compounds over time.
              </p>
              <div className="pull">
                "We do not buy businesses to change them. We buy them
                because they already work."
              </div>
            </div>
          </div>
        </div>
      </section>

      <section className="how">
        <div className="wrap">
          <div className="sec-head reveal">
            <div className="mono sec-num">§ 02 / How we work</div>
            <h2 className="display sec-title">A measured, relationship driven approach.</h2>
          </div>
          <div>
            {how.map((h,i)=>(
              <div className={"how-item reveal d" + (i+1)} key={i}>
                <div>
                  <div className="num">No. 0{i+1}</div>
                  <div className="t">{h.t}</div>
                </div>
                <div className="b">{h.b}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="principles">
        <div className="princ-mark"><CirclesMark size={320} stroke={1.2} /></div>
        <div className="wrap">
          <div className="sec-head reveal">
            <div className="mono sec-num">§ 03 / Principles</div>
            <h2 className="display sec-title">Six things we believe, written down so we do not forget.</h2>
          </div>
          <div className="princ-grid">
            {principles.map((p,i)=>(
              <div className={"princ reveal d" + ((i%3)+1)} key={i}>
                <div className="mono num">{p.num}</div>
                <div className="t">{p.t}</div>
                <div className="b">{p.b}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="faq">
        <div className="wrap">
          <div className="sec-head reveal">
            <div className="mono sec-num">§ 04 / Questions</div>
            <h2 className="display sec-title">The questions sellers actually ask.</h2>
          </div>
          <div>
            {faqs.map((item,i)=>(
              <div key={i} className={"faq-item reveal" + (open===i?" open":"")}
                   onClick={()=>setOpen(open===i?-1:i)}>
                <div className="faq-q">{item.q}</div>
                <div className="faq-toggle">+</div>
                <div className="faq-a">{item.a}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="cta-band">
        <div className="cta-band-mark"><CirclesMark size={320} stroke={1.2} /></div>
        <div className="wrap">
          <h2 className="cta-h reveal">
            Tell us about<br/>the company you <em>built</em>.
          </h2>
          <div className="cta-actions reveal d1">
            <a href="contact.html" className="btn btn-primary">
              Start a conversation <span className="arrow"></span>
            </a>
            <a href="index.html" className="btn btn-ghost">Back to home</a>
          </div>
        </div>
      </section>

      <Footer />
    </>
  );
}

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