/* global React, SiteHeader, PageHero, SectionHead, PageCTA, SiteFooter */
const { useState: useS4, useEffect: useE4 } = React;

/* ---------- English Header / Footer ---------- */
function ENHeader({ activeTop }) {
  const [scrolled, setScrolled] = useS4(false);
  const [openMenu, setOpenMenu] = useS4(null);
  useE4(() => {
    const onScroll = () => setScrolled(window.scrollY > 8);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <header className={"hdr" + (scrolled ? " hdr-scrolled" : "")}>
      <div className="container hdr-inner">
        <a href="index.html" className="hdr-logo" aria-label="Arvomeklarit home">
          <img src="assets/arvomeklarit-logo.png" alt="Arvomeklarit" className="hdr-logo-img" />
        </a>
        <nav className="hdr-nav" aria-label="Main navigation">
          <a href="en/services.html" className={"hdr-nav-link"+(activeTop==="services"?" is-active":"")}>Services</a>
          <a href="en/about.html" className={"hdr-nav-link"+(activeTop==="about"?" is-active":"")}>About</a>
          <a href="en/contact.html" className={"hdr-nav-link"+(activeTop==="contact"?" is-active":"")}>Contact</a>
          <a href="Etusivu.html" className="hdr-nav-link" hrefLang="fi" lang="fi" style={{color:"var(--ink-2)"}}>Suomeksi →</a>
        </nav>
        <div className="hdr-actions">
          <a href="en/contact.html" className="btn btn-primary hdr-cta">Book a meeting</a>
        </div>
      </div>
    </header>
  );
}

function ENFooter() {
  const year = new Date().getFullYear();
  return (
    <footer className="ftr">
      <div className="container ftr-grid-simple">
        <div>
          <a href="index.html" className="ftr-logo"><img src="assets/arvomeklarit-logo.png" alt="Arvomeklarit" className="ftr-logo-img" /></a>
          <p className="ftr-tag">A Finnish insurance broker for SMEs.</p>
        </div>
        <div className="ftr-cols">
          <div><h4 className="ftr-h">Kauniainen</h4><p className="ftr-addr">Vanha Turuntie 14 B 1<br/>02700 Kauniainen, Finland</p><a href="tel:+358102742750" className="ftr-tel tnum">+358 (0) 10 274 2750</a></div>
          <div><h4 className="ftr-h">Helsinki</h4><p className="ftr-addr">Lampputie 12 C<br/>00750 Helsinki, Finland</p><a href="tel:+358102742754" className="ftr-tel tnum">+358 (0) 10 274 2754</a></div>
          <div><h4 className="ftr-h">Email</h4><a href="mailto:asiakaspalvelu@arvomeklarit.fi" className="ftr-mail">asiakaspalvelu@arvomeklarit.fi</a></div>
        </div>
      </div>
      <div className="container ftr-base">
        <div className="ftr-legal">
          <a href="en/about.html">About</a>
          <a href="en/services.html">Services</a>
          <a href="en/contact.html">Contact</a>
          <a href="Etusivu.html" hrefLang="fi">Suomeksi</a>
        </div>
        <p className="ftr-copy">© {year} Arvomeklarit Oy</p>
      </div>
    </footer>
  );
}

function ENBcrumb({ items }) {
  return (
    <nav className="bcrumb container" aria-label="Breadcrumb">
      <ol>{items.map((it,i)=>(
        <li key={i}>
          {i < items.length-1 ? <a href={it.href}>{it.label}</a> : <span aria-current="page">{it.label}</span>}
          {i < items.length-1 && <span className="bcrumb-sep" aria-hidden="true">/</span>}
        </li>
      ))}</ol>
    </nav>
  );
}

function ENCTA({ title, body }) {
  return (
    <section className="cta" id="cta" aria-labelledby="pcta-en">
      <div className="container cta-grid">
        <div>
          <p className="eyebrow cta-eyebrow">Get started</p>
          <h2 id="pcta-en">{title}</h2>
          <p className="cta-sub">30 minutes. No charge. No obligation.</p>
          {body && <p className="cta-body">{body}</p>}
        </div>
        <div className="cta-actions">
          <a href="en/contact.html" className="btn btn-gold cta-primary">Book a meeting →</a>
          <div className="cta-alts">
            <a href="tel:+358102742750" className="cta-alt"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M5 4l3-1 2 4-2 1a10 10 0 005 5l1-2 4 2-1 3a2 2 0 01-2 1A14 14 0 014 6a2 2 0 011-2z"/></svg><span><span className="cta-alt-label">Kauniainen</span><span className="cta-alt-num">+358 (0) 10 274 2750</span></span></a>
            <a href="tel:+358102742754" className="cta-alt"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round"><path d="M5 4l3-1 2 4-2 1a10 10 0 005 5l1-2 4 2-1 3a2 2 0 01-2 1A14 14 0 014 6a2 2 0 011-2z"/></svg><span><span className="cta-alt-label">Helsinki</span><span className="cta-alt-num">+358 (0) 10 274 2754</span></span></a>
            <a href="mailto:asiakaspalvelu@arvomeklarit.fi" className="cta-alt"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg><span><span className="cta-alt-label">Email</span><span className="cta-alt-num">asiakaspalvelu@arvomeklarit.fi</span></span></a>
          </div>
        </div>
      </div>
      <div className="cta-corner" aria-hidden="true"><svg viewBox="0 0 600 600" preserveAspectRatio="xMaxYMax slice"><circle cx="600" cy="600" r="500" fill="none" stroke="#C9A050" strokeOpacity="0.18" strokeWidth="0.5"/><circle cx="600" cy="600" r="340" fill="none" stroke="#C9A050" strokeOpacity="0.14" strokeWidth="0.5"/></svg></div>
    </section>
  );
}

/* ---------- /en — Home ---------- */
function PageEnHome() {
  return (<>
    <ENHeader />
    <section className="hero">
      <div className="container hero-inner">
        <p className="eyebrow">Insurance broker · Helsinki & Kauniainen</p>
        <h1 className="hero-h1">A Finnish insurance broker that works for you — not the insurer.</h1>
        <p className="lead hero-lead">We help SMEs in Finland review, compete, and manage their business insurance. The competition is performance-based: you only pay if we find savings. Ongoing service is a fixed monthly fee — no surprises.</p>
        <div className="hero-ctas">
          <a href="en/contact.html" className="btn btn-primary">Book a free 30-min review →</a>
          <a href="en/services.html" className="btn btn-ghost">See our services</a>
        </div>
        <div className="hero-stats">
          <div><span className="hero-stat-num tnum">10–35 %</span><span className="hero-stat-lbl">Typical savings on competition</span></div>
          <div><span className="hero-stat-num tnum">10+</span><span className="hero-stat-lbl">Years as independent brokers</span></div>
          <div><span className="hero-stat-num tnum">5+</span><span className="hero-stat-lbl">Years of average client tenure</span></div>
        </div>
      </div>
    </section>

    <section className="section alt-bg"><div className="container">
      <SectionHead eyebrow="What we do" title="Three services, one promise: clarity." lead="No commissions from insurers. No percentage fees on premiums. The insurer cannot pay us — Finnish law forbids it. We work for you." />
      <div className="en-svc-grid">
        <article className="en-svc"><span className="en-svc-num tnum">01</span><h3>Insurance competition</h3><p>We benchmark your current cover against five insurers and bring you a like-for-like comparison. Pay only if we find savings.</p><a href="en/services.html#competition" className="story-link">Read more →</a></article>
        <article className="en-svc"><span className="en-svc-num tnum">02</span><h3>Ongoing management</h3><p>Annual reviews, mid-year changes, document trail. Fixed monthly fee — no surprise invoices.</p><a href="en/services.html#management" className="story-link">Read more →</a></article>
        <article className="en-svc"><span className="en-svc-num tnum">03</span><h3>Claims handling</h3><p>When something happens, we negotiate the settlement on your behalf. You don't accept the first offer — you get what your policy entitles you to.</p><a href="en/services.html#claims" className="story-link">Read more →</a></article>
      </div>
    </div></section>

    <section className="section"><div className="container">
      <SectionHead eyebrow="Why us" title="Three reasons clients stay an average of 5+ years." />
      <div className="en-why">
        <article><h3>We came from the insurance side</h3><p>Both founders spent years inside Finnish insurers. We know the pricing logic and the negotiation room — knowledge you can't get without a decade in the industry.</p></article>
        <article><h3>Aligned incentives</h3><p>Competition is risk-shared: no savings, no fee. Management is a fixed monthly price agreed in advance. We never make more money by recommending bigger policies.</p></article>
        <article><h3>Small but precise</h3><p>We don't serve listed companies. We don't serve consumers. We serve Finnish SMEs (3–30 MEUR turnover) and we do it well.</p></article>
      </div>
    </div></section>

    <ENCTA title="Let's see if we can help." body="A 30-minute conversation, free of charge. We review your situation and tell you honestly whether we can add value — in either direction." />
    <ENFooter />

    <style>{`
      .hero{position:relative;padding:96px 0 96px;overflow:hidden;background:linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 100%)}
      @media(min-width:720px){.hero{padding:120px 0 128px}}
      .hero-inner{position:relative;z-index:2;max-width:880px}
      .hero-h1{font-size:clamp(40px,5.6vw,68px);line-height:1.05;margin-top:8px;letter-spacing:-.025em}
      .hero-lead{margin-top:28px;max-width:680px;font-size:clamp(18px,1.5vw,22px);color:var(--ink)}
      .hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:36px}
      .hero-stats{display:grid;grid-template-columns:1fr;gap:24px;margin-top:64px;max-width:760px;padding-top:32px;border-top:1px solid var(--line)}
      @media(min-width:640px){.hero-stats{grid-template-columns:repeat(3,1fr);gap:40px}}
      .hero-stat-num{display:block;font-family:var(--serif);font-weight:600;font-size:clamp(36px,4vw,52px);color:var(--gold);letter-spacing:-.02em;line-height:1}
      .hero-stat-lbl{display:block;margin-top:8px;font-size:14px;color:var(--ink-2);line-height:1.4}
      .en-svc-grid{display:grid;grid-template-columns:1fr;gap:24px}@media(min-width:880px){.en-svc-grid{grid-template-columns:repeat(3,1fr)}}
      .en-svc{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:32px 28px;transition:border-color var(--t),transform var(--t)}
      .en-svc:hover{border-color:rgba(201,160,80,.45);transform:translateY(-2px)}
      .en-svc-num{display:block;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--gold);margin-bottom:14px}
      .en-svc h3{font-size:22px;margin-bottom:12px}.en-svc p{color:var(--ink-2);font-size:15px;line-height:1.65;margin:0 0 16px}
      .en-why{display:grid;grid-template-columns:1fr;gap:24px;max-width:1080px}@media(min-width:880px){.en-why{grid-template-columns:repeat(3,1fr)}}
      .en-why article{padding:32px;background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px}
      .en-why h3{font-size:20px;margin-bottom:10px}.en-why p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.7}
    `}</style>
  </>);
}

/* ---------- /en/services ---------- */
function PageEnServices() {
  return (<>
    <ENHeader activeTop="services" />
    <ENBcrumb items={[{label:"Home",href:"en/index.html"},{label:"Services",href:"#"}]} />
    <PageHero eyebrow="Services" title="Three services. One philosophy: align incentives." intro="The Finnish Insurance Distribution Act forbids brokers from accepting payment from insurers. Every euro we earn comes from clients — which is why our incentives match yours." />

    <section className="section" style={{paddingTop:0}}><div className="container">
      <article id="competition" className="en-svc-deep">
        <p className="eyebrow">01</p><h2>Insurance competition</h2>
        <p className="en-svc-lead">A structured benchmark of your current cover against five Finnish insurers — comparing terms and exclusions, not just price.</p>
        <div className="en-deep-grid">
          <div>
            <h3>What we do</h3>
            <ul className="en-bullets">
              <li>Audit current policies and documented terms</li>
              <li>Build a tender package on your behalf</li>
              <li>Collect quotes from 5+ insurers</li>
              <li>Compare terms-by-terms, not headline price</li>
              <li>Recommend with a written rationale</li>
              <li>Handle the switch and notification period</li>
            </ul>
          </div>
          <div>
            <h3>Pricing</h3>
            <p>Risk-shared. We charge nothing if we don't find savings. If we do, our fee is a portion of the savings — always smaller than yours. Clients typically save 10–35 % on premiums without weakening cover.</p>
            <h3 style={{marginTop:24}}>Timeline</h3>
            <p>5–8 weeks from the first 30-minute review to new cover in force.</p>
          </div>
        </div>
      </article>

      <article id="management" className="en-svc-deep">
        <p className="eyebrow">02</p><h2>Ongoing management</h2>
        <p className="en-svc-lead">After competition, we keep watch on your cover so it tracks the business — turnover, headcount, premises, vehicles.</p>
        <div className="en-deep-grid">
          <div>
            <h3>Included</h3>
            <ul className="en-bullets">
              <li>Annual review — terms, claims, premium</li>
              <li>Mid-year changes (new premises, fleet, hires)</li>
              <li>Quote requests when something material changes</li>
              <li>Claims handled on your behalf</li>
              <li>Documentation in one place — auditor-ready</li>
            </ul>
          </div>
          <div>
            <h3>Pricing</h3>
            <p>Fixed monthly fee, agreed in advance. Typical SME pays 200–800 €/month depending on size and number of policies. No percentage fees, no surprise invoices.</p>
            <h3 style={{marginTop:24}}>Term</h3>
            <p>Minimum 12 months. After that, six-month notice. You can return to a direct relationship with the insurer at any point — your policies travel with you.</p>
          </div>
        </div>
      </article>

      <article id="claims" className="en-svc-deep">
        <p className="eyebrow">03</p><h2>Claims handling</h2>
        <p className="en-svc-lead">When a loss happens, the first offer is rarely the right number. We negotiate on your behalf so you get what your policy actually entitles you to.</p>
        <div className="en-deep-grid">
          <div>
            <h3>How we help</h3>
            <ul className="en-bullets">
              <li>Loss documentation — what to gather, immediately</li>
              <li>Filing the claim with precise wording</li>
              <li>Negotiation with the insurer</li>
              <li>Appeals when the decision is wrong</li>
              <li>Escalation to the Insurance Board if needed</li>
            </ul>
          </div>
          <div>
            <h3>Pricing</h3>
            <p>For management clients, claims handling is included in the monthly fee — no extra charges. As a standalone service, the fee is agreed in advance based on the loss size and estimated work.</p>
            <h3 style={{marginTop:24}}>Urgent loss?</h3>
            <p>Call directly: +358 (0) 10 274 2750 — straight to Matti or Jari. No queue.</p>
          </div>
        </div>
      </article>
    </div></section>

    <ENCTA title="Want a free 30-minute review?" body="We will go through your situation and tell you honestly whether we think we can help — and how." />
    <ENFooter />

    <style>{`
      .en-svc-deep{padding:64px 0;border-top:1px solid var(--line)}
      .en-svc-deep:first-of-type{border-top:0;padding-top:0}
      .en-svc-deep h2{font-size:clamp(32px,3.5vw,40px);margin-top:8px;margin-bottom:20px}
      .en-svc-lead{font-family:var(--serif);font-size:clamp(20px,1.7vw,24px);line-height:1.45;color:var(--ink);max-width:760px;margin-bottom:40px}
      .en-deep-grid{display:grid;grid-template-columns:1fr;gap:48px;max-width:1080px}
      @media(min-width:880px){.en-deep-grid{grid-template-columns:1.1fr 1fr;gap:80px}}
      .en-deep-grid h3{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-family:var(--sans);font-weight:600;margin-bottom:14px}
      .en-deep-grid p{color:var(--ink-2);font-size:15px;line-height:1.7;margin:0}
      .en-bullets{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
      .en-bullets li{font-size:15px;color:var(--ink-2);line-height:1.5;padding-left:20px;position:relative}
      .en-bullets li::before{content:"";position:absolute;left:0;top:11px;width:12px;height:1px;background:var(--gold)}
    `}</style>
  </>);
}

/* ---------- /en/about ---------- */
function PageEnAbout() {
  return (<>
    <ENHeader activeTop="about" />
    <ENBcrumb items={[{label:"Home",href:"en/index.html"},{label:"About",href:"#"}]} />
    <PageHero eyebrow="About" title="Ten years ago we left the insurance company. Here's why." intro="We spent years inside Finnish insurers, watching how SMEs were served — and where the model fell short. Then we switched sides." />

    <section className="section" style={{paddingTop:0}}><div className="container">
      <div className="intro-prose">
        <p>Working inside an insurer, you have one company's products to recommend. Even when you can see another carrier would serve the client better, you can't say so — because you don't earn anything from it.</p>
        <p>We both felt the same thing: this isn't the position from which to serve clients well.</p>
        <p>Ten years ago we passed the broker exam, registered with the Finnish Financial Supervisory Authority, and founded Arvomeklarit Oy. Now we work for the client — not for one insurer's targets.</p>
        <p>Our background is still our edge. We know how Finnish insurers price risk, where the negotiation room sits, what the policy wording really means. That's not something you learn in three years.</p>
      </div>
    </div></section>

    <section className="section alt-bg"><div className="container">
      <SectionHead eyebrow="Team" title="Who we are" />
      <div className="team-grid">
        {[
          {name:"Matti Notkola",role:"CEO, founder",img:"assets/matti-notkola.png",b:["Registered insurance broker","10+ years prior experience inside an insurer","Specialty: logistics, manufacturing, liability"],e:"matti@arvomeklarit.fi",p:"+358 (0) 10 274 2750"},
          {name:"Jari Salmi",role:"Founder, partner",img:"assets/jari-salmi.png",b:["Registered insurance broker","10+ years prior experience inside an insurer","Specialty: construction, ICT, executive liability"],e:"jari@arvomeklarit.fi",p:"+358 (0) 10 274 2754"},
        ].map((m,i)=>(
          <article key={i} className="team-card-en">
            <div className="team-photo-en"><img src={m.img} alt={m.name}/></div>
            <div className="team-body-en">
              <h3>{m.name}</h3>
              <p className="team-role-en">{m.role}</p>
              <ul>{m.b.map((x,j)=><li key={j}>{x}</li>)}</ul>
              <div className="team-contact-en">
                <a href={"mailto:"+m.e}>{m.e}</a>
                <a href={"tel:"+m.p.replace(/\s|\(|\)/g,"")} className="tnum">{m.p}</a>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div></section>

    <section className="section"><div className="container">
      <SectionHead eyebrow="Values" title="Three values that hold up under pressure" />
      <div className="vals-grid">
        <article className="val-card"><span className="val-num tnum">01</span><h3>Honesty</h3><p>We say what we see. If we don't see value for you, we say so — we don't manufacture reasons to work together.</p></article>
        <article className="val-card"><span className="val-num tnum">02</span><h3>Continuity</h3><p>Clients stay with us an average of 5+ years. That's rare in this industry, and it doesn't happen by accident.</p></article>
        <article className="val-card"><span className="val-num tnum">03</span><h3>Small but precise</h3><p>We don't try to be big. No listed companies, no consumers — just Finnish SMEs, served well.</p></article>
      </div>
    </div></section>

    <ENCTA title="Want to meet us?" body="A free 30-minute meeting — in Helsinki, in Kauniainen, or remotely." />
    <ENFooter />

    <style>{`
      .team-grid{display:grid;grid-template-columns:1fr;gap:24px}@media(min-width:880px){.team-grid{grid-template-columns:1fr 1fr;gap:32px}}
      .team-card-en{background:var(--bg);border:1px solid var(--line);border-radius:10px;overflow:hidden}
      .team-photo-en{aspect-ratio:4/3;background:var(--bg-2);overflow:hidden}.team-photo-en img{width:100%;height:100%;object-fit:cover;object-position:center top}
      .team-body-en{padding:28px}.team-body-en h3{font-size:24px;margin-bottom:6px}
      .team-role-en{font-size:14px;color:var(--gold);font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin:0 0 16px}
      .team-body-en ul{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-direction:column;gap:8px}
      .team-body-en li{font-size:15px;color:var(--ink-2);line-height:1.5;padding-left:16px;position:relative}
      .team-body-en li::before{content:"";position:absolute;left:0;top:11px;width:8px;height:1px;background:var(--gold)}
      .team-contact-en{display:flex;flex-wrap:wrap;gap:16px 24px;padding-top:16px;border-top:1px solid var(--line);font-size:14px}
      .team-contact-en a{color:var(--ink);transition:color var(--t)}.team-contact-en a:hover{color:var(--gold)}
      .vals-grid{display:grid;grid-template-columns:1fr;gap:20px}@media(min-width:800px){.vals-grid{grid-template-columns:repeat(3,1fr);gap:24px}}
      .val-card{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:32px 28px}
      .val-num{display:block;font-family:var(--serif);font-size:18px;font-weight:600;color:var(--gold);margin-bottom:14px}
      .val-card h3{font-size:22px;margin-bottom:10px}.val-card p{color:var(--ink-2);font-size:15px;line-height:1.65;margin:0}
    `}</style>
  </>);
}

/* ---------- /en/contact ---------- */
function PageEnContact() {
  const [sent, setSent] = useS4(false);
  return (<>
    <ENHeader activeTop="contact" />
    <ENBcrumb items={[{label:"Home",href:"en/index.html"},{label:"Contact",href:"#"}]} />
    <PageHero eyebrow="Contact" title="Call, email, or book a slot in the calendar." intro="A 30-minute conversation costs nothing and gets you closer to a decision — in either direction." />

    <section className="section" style={{paddingTop:0}}><div className="container">
      <div className="contact-grid">
        <div>
          <SectionHead eyebrow="Form" title="Send a message" lead="We reply within 24 business hours." />
          {sent ? (
            <div className="form-ok"><strong>Thank you.</strong><p>We'll be in touch within 24 business hours.</p></div>
          ) : (
            <form className="cform" onSubmit={(e)=>{e.preventDefault();setSent(true);}} noValidate>
              <div className="frow">
                <label>Name *<input type="text" required /></label>
                <label>Company<input type="text" /></label>
              </div>
              <div className="frow">
                <label>Email *<input type="email" required /></label>
                <label>Phone<input type="tel" /></label>
              </div>
              <label>Message *<textarea required rows="5" placeholder="Briefly: what insurance lines, headcount, when was the last competition." /></label>
              <label className="fcheck"><input type="checkbox" required /><span>I accept the <a href="Tietosuoja.html">privacy policy</a> and consent to processing of my data for this enquiry.</span></label>
              <button type="submit" className="btn btn-primary">Send message →</button>
            </form>
          )}
        </div>
        <div>
          <SectionHead eyebrow="Direct" title="Call or email Matti or Jari" lead="No queue — calls go straight through." />
          <div className="direct-people">
            <article className="direct-card">
              <div className="direct-photo"><img src="assets/matti-notkola.png" alt="Matti Notkola"/></div>
              <div><h3>Matti Notkola</h3><p className="direct-role">CEO, founder</p>
                <a href="tel:+358102742750" className="direct-line tnum">+358 (0) 10 274 2750</a>
                <a href="mailto:matti@arvomeklarit.fi" className="direct-line">matti@arvomeklarit.fi</a>
              </div>
            </article>
            <article className="direct-card">
              <div className="direct-photo"><img src="assets/jari-salmi.png" alt="Jari Salmi"/></div>
              <div><h3>Jari Salmi</h3><p className="direct-role">Founder, partner</p>
                <a href="tel:+358102742754" className="direct-line tnum">+358 (0) 10 274 2754</a>
                <a href="mailto:jari@arvomeklarit.fi" className="direct-line">jari@arvomeklarit.fi</a>
              </div>
            </article>
          </div>
          <div className="sla-box">
            <h4>Office hours</h4><p>Mon–Fri · 8.00–17.00 EET</p>
            <h4>Response time</h4><p>Email replies within 24 business hours. For urgent claims, call directly.</p>
          </div>
        </div>
      </div>

      <div style={{marginTop:64}}>
        <SectionHead eyebrow="Offices" title="Kauniainen and Helsinki" />
        <div className="off-grid">
          <article className="off-card"><h3>Headquarters · Kauniainen</h3><address>Vanha Turuntie 14 B 1<br/>02700 Kauniainen, Finland</address><a href="tel:+358102742750" className="tnum">+358 (0) 10 274 2750</a></article>
          <article className="off-card"><h3>Helsinki office</h3><address>Lampputie 12 C<br/>00750 Helsinki, Finland</address><a href="tel:+358102742754" className="tnum">+358 (0) 10 274 2754</a></article>
        </div>
      </div>
    </div></section>

    <ENFooter />

    <style>{`
      .contact-grid{display:grid;grid-template-columns:1fr;gap:48px}
      @media(min-width:960px){.contact-grid{grid-template-columns:1.05fr 1fr;gap:64px}}
      .cform{display:flex;flex-direction:column;gap:18px;max-width:560px}
      .cform .frow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
      @media(max-width:560px){.cform .frow{grid-template-columns:1fr}}
      .cform label{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--ink-2);font-weight:500;letter-spacing:.04em;text-transform:uppercase}
      .cform input,.cform textarea{font:inherit;font-size:16px;color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:12px 14px;transition:border-color var(--t);text-transform:none;letter-spacing:0;font-weight:400;font-family:var(--sans)}
      .cform input:focus,.cform textarea:focus{outline:none;border-color:var(--gold)}
      .fcheck{flex-direction:row !important;align-items:flex-start;gap:10px !important;text-transform:none !important;letter-spacing:0 !important;font-weight:400 !important;font-size:14px !important;color:var(--ink-2) !important;line-height:1.5}
      .fcheck input{width:auto;margin-top:3px}
      .fcheck a{color:var(--gold);border-bottom:1px solid var(--gold)}
      .form-ok{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--green);border-radius:4px;padding:24px 28px;max-width:560px}
      .form-ok strong{display:block;font-family:var(--serif);font-size:20px;color:var(--green);margin-bottom:6px}
      .form-ok p{margin:0;color:var(--ink-2);font-size:15px}
      .direct-people{display:flex;flex-direction:column;gap:20px;margin-bottom:32px}
      .direct-card{display:flex;gap:20px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:20px}
      .direct-photo{flex-shrink:0;width:80px;height:80px;border-radius:50%;overflow:hidden;background:var(--bg-2)}
      .direct-photo img{width:100%;height:100%;object-fit:cover}
      .direct-card h3{font-size:18px;margin-bottom:4px}
      .direct-role{font-size:13px;color:var(--gold);font-weight:500;letter-spacing:.04em;text-transform:uppercase;margin:0 0 10px}
      .direct-line{display:block;font-size:15px;color:var(--ink);margin:4px 0;transition:color var(--t)}
      .direct-line:hover{color:var(--gold)}
      .sla-box{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:24px 28px}
      .sla-box h4{font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2);margin:0 0 6px;font-family:var(--sans);font-weight:600}
      .sla-box h4:not(:first-child){margin-top:18px}
      .sla-box p{margin:0;font-size:15px;color:var(--ink);line-height:1.55}
      .off-grid{display:grid;grid-template-columns:1fr;gap:24px}@media(min-width:720px){.off-grid{grid-template-columns:1fr 1fr}}
      .off-card{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:4px;padding:28px}
      .off-card h3{font-size:18px;margin-bottom:14px}
      .off-card address{font-style:normal;font-size:15px;color:var(--ink-2);line-height:1.6;margin-bottom:12px}
      .off-card a{font-family:var(--serif);font-weight:600;color:var(--ink);font-size:16px}
      .off-card a:hover{color:var(--gold)}
    `}</style>
  </>);
}

window.PageEnHome = PageEnHome;
window.PageEnServices = PageEnServices;
window.PageEnAbout = PageEnAbout;
window.PageEnContact = PageEnContact;
