Update index.html

index.html

@@ -464,7 +464,7 @@ font-size: 0.8rem;
   <div class="nav-logo">
     <img src="logo.png" alt="SumUp" height="32" style="display:block;" />
   </div>
-  <a href="#book" class="nav-cta">Book a free demo →</a>
+  <a href="#book" class="nav-cta" id="navCta">Book a free demo →</a>
 </nav>
 
 <!-- ── REP INTRO BANNER (shown only on ?rep= links) ── -->
@@ -474,10 +474,10 @@ font-size: 0.8rem;
     <div class="rep-intro-hey" id="repHey"></div>
     <h2 id="repIntroHeadline"></h2>
   </div>
-  <p id="repIntroBody">I've put together this page just for you, so you can explore SumUp at your own pace. Take a look, check the pricing, and book a call whenever you're ready.</p>
+  <p id="repIntroBody"></p>
   <a href="#" class="rep-intro-cta" id="repIntroCta" target="_blank" rel="noopener">
     <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
-    Book a free demo
+    <span id="repIntroCtaText"></span>
   </a>
   <div class="rep-intro-role" id="repIntroRole"></div>
 </div>
@@ -486,17 +486,17 @@ font-size: 0.8rem;
 <section class="bookings-section">
   <div class="bookings-inner">
     <div class="bookings-content">
-      <div class="section-label">Core feature</div>
-      <h2 class="section-title">Smart bookings that run themselves.</h2>
-      <p class="section-sub">No-shows cost beauty businesses thousands every year. SumUp's booking system puts you back in control — automatically.</p>
+      <div class="section-label" id="bookingLabel">Core feature</div>
+      <h2 class="section-title" id="bookingHeadline">Smart bookings that run themselves.</h2>
+      <p class="section-sub" id="bookingSub">No-shows cost beauty businesses thousands every year. SumUp's booking system puts you back in control — automatically.</p>
       <div class="bookings-detail">
         <div class="bookings-point">
           <div class="bookings-point-icon">
             <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
           </div>
           <div class="bookings-point-text">
-            <strong>Online scheduling 24/7</strong>
-            Clients book themselves at any time — no back-and-forth messages.
+            <strong id="bp1Title">Online scheduling 24/7</strong>
+            <span id="bp1Body">Clients book themselves at any time — no back-and-forth messages.</span>
           </div>
         </div>
         <div class="bookings-point">
@@ -504,8 +504,8 @@ font-size: 0.8rem;
             <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
           </div>
           <div class="bookings-point-text">
-            <strong>Automated reminders</strong>
-            SMS and email reminders sent automatically to reduce no-shows.
+            <strong id="bp2Title">Automated reminders</strong>
+            <span id="bp2Body">SMS and email reminders sent automatically to reduce no-shows.</span>
           </div>
         </div>
         <div class="bookings-point">
@@ -513,8 +513,8 @@ font-size: 0.8rem;
             <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
           </div>
           <div class="bookings-point-text">
-            <strong>Deposits & cancellation fees</strong>
-            Require upfront deposits and charge for late cancellations automatically.
+            <strong id="bp3Title">Deposits &amp; cancellation fees</strong>
+            <span id="bp3Body">Require upfront deposits and charge for late cancellations automatically.</span>
           </div>
         </div>
         <div class="bookings-point">
@@ -522,13 +522,12 @@ font-size: 0.8rem;
             <svg width="14" height="14" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
           </div>
           <div class="bookings-point-text">
-            <strong>Your own booking page</strong>
-            A branded page clients can share and save, no app download needed.
+            <strong id="bp4Title">Your own booking page</strong>
+            <span id="bp4Body">A branded page clients can share and save, no app download needed.</span>
           </div>
         </div>
       </div>
     </div>
-    <!-- Replace hero.png with your preferred product image -->
     <div class="bookings-image">
       <img src="hero.png" alt="SumUp bookings"
         onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';" />
@@ -543,44 +542,39 @@ font-size: 0.8rem;
 <section class="more-features">
   <div class="more-features-inner">
     <div class="more-features-header">
-      <div class="section-label">And there's more</div>
-      <h2 class="section-title">Everything else your business needs.</h2>
-      <p class="section-sub">SumUp goes beyond bookings — giving you the full toolkit to run, grow and get paid.</p>
+      <div class="section-label" id="featuresLabel">And there's more</div>
+      <h2 class="section-title" id="featuresHeadline">Everything else your business needs.</h2>
+      <p class="section-sub" id="featuresSub">SumUp goes beyond bookings — giving you the full toolkit to run, grow and get paid.</p>
     </div>
     <div class="features-grid">
-
       <div class="feature-card">
         <div class="eco-icon">
           <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg>
         </div>
-        <h3>POS & Payments</h3>
-        <p>Card, Apple Pay, Google Pay — all at competitive rates with next-day payouts.</p>
+        <h3 id="f1Title">POS &amp; Payments</h3>
+        <p id="f1Body">Card, Apple Pay, Google Pay — all at competitive rates with next-day payouts.</p>
       </div>
-
       <div class="feature-card">
         <div class="eco-icon">
           <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
         </div>
-        <h3>Loyalty</h3>
-        <p>Points and stamp programmes to turn one-time visitors into regulars.</p>
+        <h3 id="f2Title">Loyalty</h3>
+        <p id="f2Body">Points and stamp programmes to turn one-time visitors into regulars.</p>
       </div>
-
       <div class="feature-card">
         <div class="eco-icon">
           <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><path d="M20 12v10H4V12"/><path d="M22 7H2v5h20V7z"/><path d="M12 22V7"/><path d="M12 7H7.5a2.5 2.5 0 010-5C11 2 12 7 12 7z"/><path d="M12 7h4.5a2.5 2.5 0 000-5C13 2 12 7 12 7z"/></svg>
         </div>
-        <h3>Gift Cards</h3>
-        <p>Digital gift cards that bring in new customers at zero extra cost.</p>
+        <h3 id="f3Title">Gift Cards</h3>
+        <p id="f3Body">Digital gift cards that bring in new customers at zero extra cost.</p>
       </div>
-
       <div class="feature-card">
         <div class="eco-icon">
           <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>
         </div>
-        <h3>Cash Advance</h3>
-        <p>Funding based on your sales — repaid automatically as you trade.</p>
+        <h3 id="f4Title">Cash Advance</h3>
+        <p id="f4Body">Funding based on your sales — repaid automatically as you trade.</p>
       </div>
-
     </div>
   </div>
 </section>
@@ -588,17 +582,17 @@ font-size: 0.8rem;
 <!-- ── DEMO LINK ── -->
 <section class="demo-link-section">
   <div class="demo-link-inner">
-    <div class="section-label">Try it yourself</div>
-    <h2 class="section-title">Explore the live demo account.</h2>
-    <p class="section-sub" style="text-align:center;">Get hands-on with SumUp. Click through the demo and see how it works for a beauty business like yours — no sign-in needed.</p>
+    <div class="section-label" id="demoLabel">Try it yourself</div>
+    <h2 class="section-title" id="demoHeadline">Explore the live demo account.</h2>
+    <p class="section-sub" id="demoSub" style="text-align:center;">Get hands-on with SumUp. Click through the demo and see how it works for a beauty business like yours — no sign-in needed.</p>
     <a href="https://www.sumupbookings.com/demo-bookings-uk" target="_blank" rel="noopener" class="demo-strip">
       <div class="demo-strip-left">
         <div class="demo-strip-icon">
           <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="white" stroke-width="2"><polygon points="5 3 19 12 5 21 5 3"/></svg>
         </div>
         <div>
-          <div class="demo-strip-text">Open the demo account</div>
-          <div class="demo-strip-sub">Explore the platform at your own pace</div>
+          <div class="demo-strip-text" id="demoStripText">Open the demo account</div>
+          <div class="demo-strip-sub" id="demoStripSub">Explore the platform at your own pace</div>
         </div>
       </div>
       <div class="demo-strip-arrow">→</div>
@@ -610,29 +604,29 @@ font-size: 0.8rem;
 <section class="pricing-section">
   <div class="pricing-inner">
     <div class="pricing-header">
-      <div class="section-label">Pricing</div>
-      <h2 class="section-title">Simple, personalised pricing.</h2>
-      <p class="section-sub">No hidden costs. No commissions. 24/7 Priority Care included on every plan.</p>
+      <div class="section-label" id="pricingLabel">Pricing</div>
+      <h2 class="section-title" id="pricingHeadline">Simple, personalised pricing.</h2>
+      <p class="section-sub" id="pricingSub">No hidden costs. No commissions. 24/7 Priority Care included on every plan.</p>
     </div>
     <div class="pricing-generic">
-      <div class="pricing-generic-tag">Personalised fees</div>
-      <h3>Plans starting from £39/month — with payment fees from 0.6%.</h3>
-      <p>We work with each beauty business individually to find the right plan for your volume and setup. Book a free call and we'll put together a personalised quote tailored to how your business runs.</p>
+      <div class="pricing-generic-tag" id="pricingTag">Personalised fees</div>
+      <h3 id="pricingAmount">Plans starting from £39/month — with payment fees from 0.6%.</h3>
+      <p id="pricingBody">We work with each beauty business individually to find the right plan for your volume and setup. Book a free call and we'll put together a personalised quote tailored to how your business runs.</p>
       <div class="pricing-generic-points">
         <div class="pricing-point">
           <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="#1E1C1C" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
-          Transparent pricing — what you see is what you pay
+          <span id="pp1">Transparent pricing — what you see is what you pay</span>
         </div>
         <div class="pricing-point">
           <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="#1E1C1C" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
-          No setup fees, no long-term contracts
+          <span id="pp2">No setup fees, no long-term contracts</span>
         </div>
         <div class="pricing-point">
           <svg width="16" height="16" fill="none" viewBox="0 0 24 24" stroke="#1E1C1C" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
-          24/7 Priority Care included on every plan
+          <span id="pp3">24/7 Priority Care included on every plan</span>
         </div>
       </div>
-      <div class="pricing-generic-note">Exact fees are confirmed on your free demo call based on your business type and transaction volume.</div>
+      <div class="pricing-generic-note" id="pricingNote">Exact fees are confirmed on your free demo call based on your business type and transaction volume.</div>
     </div>
   </div>
 </section>
@@ -640,34 +634,34 @@ font-size: 0.8rem;
 <!-- ── BOOKING ── -->
 <section class="booking-section" id="book">
   <div class="booking-inner">
-    <div class="section-label">Ready to talk?</div>
+    <div class="section-label" id="bookLabel">Ready to talk?</div>
     <h2 class="section-title" id="bookingTitle">Book your free call.</h2>
-    <p class="section-sub">No pressure, no commitment. Just a quick 30-minute chat to see if SumUp is the right fit for your business.</p>
+    <p class="section-sub" id="bookingSectionSub">No pressure, no commitment. Just a quick 30-minute chat to see if SumUp is the right fit for your business.</p>
     <br />
 
     <!-- DIRECT REP MODE -->
     <div class="direct-rep-box" id="directRepBox" style="display:none;">
       <div class="direct-rep-avatar" id="directRepAvatar"></div>
       <div class="direct-rep-name" id="directRepName"></div>
-      <div class="direct-rep-role">SumUp Beauty Specialist</div>
+      <div class="direct-rep-role" id="directRepRole">SumUp Beauty Specialist</div>
       <a href="#" class="book-btn" id="directBookLink" target="_blank" rel="noopener">
         <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
-        Book your free 30-min call
+        <span id="directBookBtnText">Book your free 30-min call</span>
       </a>
-      <p class="booking-note">Free cancellation anytime · No sign-in required</p>
+      <p class="booking-note" id="directBookNote">Free cancellation anytime · No sign-in required</p>
     </div>
 
     <!-- DEFAULT MODE -->
     <div class="rep-selector" id="repSelector">
-      <div class="rep-selector-label">Choose your SumUp representative</div>
+      <div class="rep-selector-label" id="repSelectorLabel">Choose your SumUp representative</div>
       <div class="rep-grid" id="repGrid"></div>
       <div class="booking-cta-area" id="ctaArea">
-        <p class="rep-intro">Book a call with <strong id="repNameDisplay"></strong></p>
+        <p class="rep-intro" id="repIntroText">Book a call with <strong id="repNameDisplay"></strong></p>
         <a href="#" class="book-btn" id="bookLink" target="_blank" rel="noopener">
           <svg width="18" height="18" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"/><line x1="16" y1="2" x2="16" y2="6"/><line x1="8" y1="2" x2="8" y2="6"/><line x1="3" y1="10" x2="21" y2="10"/></svg>
-          Book your free 30-min call
+          <span id="bookBtnText">Book your free 30-min call</span>
         </a>
-        <p class="booking-note">Free cancellation anytime · No sign-in required</p>
+        <p class="booking-note" id="bookNote">Free cancellation anytime · No sign-in required</p>
       </div>
       <div class="no-rep-hint" id="noRepHint">Select a representative above to book</div>
     </div>
@@ -681,18 +675,219 @@ font-size: 0.8rem;
 </footer>
 
 <script>
+// ─────────────────────────────────────────────
+// REPS — add lang + currency to each rep
+// ─────────────────────────────────────────────
 const reps = [
-  { name: "Christian", slug: "christian", initials: "CJ", color: "#FF61F2", photo: "christian.jpg", link: "https://calendar.app.google/foUdP9FUMHVUCXAb6" },
-  { name: "Edoardo",   slug: "edoardo",   initials: "ET", color: "#F9C300", photo: "edoardo.jpg",   link: "https://calendar.app.google/dWPVQy2BuwdwJmqy7" },
-  { name: "Gareth",    slug: "gareth",    initials: "GD", color: "#FF61F2", photo: "gareth.jpg",    link: "https://calendar.app.google/8f7hQkr5a2H5rit7A" },
-  { name: "Miriam",    slug: "miriam",    initials: "MK", color: "#F9C300", photo: "miriam.png",    link: "https://calendar.app.google/tGkiahEBtet1HLsU7" },
-  { name: "Shane",     slug: "shane",     initials: "SO", color: "#FF61F2", photo: "shane.png",     link: "https://calendar.app.google/Bary3iiw8PoEre7t7" },
+  {
+    name: "Christian", slug: "christian", initials: "CJ", color: "#FF61F2",
+    photo: "christian.jpg", link: "https://calendar.app.google/foUdP9FUMHVUCXAb6",
+    lang: "en", currency: "£"
+  },
+  {
+    name: "Edoardo", slug: "edoardo", initials: "ET", color: "#F9C300",
+    photo: "edoardo.jpg", link: "https://calendar.app.google/dWPVQy2BuwdwJmqy7",
+    lang: "it", currency: "€"
+  },
+  {
+    name: "Gareth", slug: "gareth", initials: "GD", color: "#FF61F2",
+    photo: "gareth.jpg", link: "https://calendar.app.google/8f7hQkr5a2H5rit7A",
+    lang: "en", currency: "£"
+  },
+  {
+    name: "Miriam", slug: "miriam", initials: "MK", color: "#F9C300",
+    photo: "miriam.png", link: "https://calendar.app.google/tGkiahEBtet1HLsU7",
+    lang: "de", currency: "€"
+  },
+  {
+    name: "Shane", slug: "shane", initials: "SO", color: "#FF61F2",
+    photo: "shane.png", link: "https://calendar.app.google/Bary3iiw8PoEre7t7",
+    lang: "en", currency: "£"
+  },
 ];
 
-const params   = new URLSearchParams(window.location.search);
-const repSlug  = (params.get('rep') || '').toLowerCase().trim();
+// ─────────────────────────────────────────────
+// TRANSLATIONS
+// ─────────────────────────────────────────────
+const t = {
+  en: {
+    navCta: "Book a free demo →",
+    repHey: (name) => `Hey, I'm ${name} 👋`,
+    repHeadline: "Your personal SumUp Beauty Specialist.",
+    repBody: "I've put together this page just for you, so you can explore SumUp at your own pace. Take a look, check the pricing, and book a call whenever you're ready.",
+    repCtaText: "Book a free demo",
+    repRole: "SumUp Beauty Specialist",
+    bookingLabel: "Core feature",
+    bookingHeadline: "Smart bookings that run themselves.",
+    bookingSub: "No-shows cost beauty businesses thousands every year. SumUp's booking system puts you back in control — automatically.",
+    bp1Title: "Online scheduling 24/7",
+    bp1Body: "Clients book themselves at any time — no back-and-forth messages.",
+    bp2Title: "Automated reminders",
+    bp2Body: "SMS and email reminders sent automatically to reduce no-shows.",
+    bp3Title: "Deposits & cancellation fees",
+    bp3Body: "Require upfront deposits and charge for late cancellations automatically.",
+    bp4Title: "Your own booking page",
+    bp4Body: "A branded page clients can share and save, no app download needed.",
+    featuresLabel: "And there's more",
+    featuresHeadline: "Everything else your business needs.",
+    featuresSub: "SumUp goes beyond bookings — giving you the full toolkit to run, grow and get paid.",
+    f1Title: "POS & Payments", f1Body: "Card, Apple Pay, Google Pay — all at competitive rates with next-day payouts.",
+    f2Title: "Loyalty", f2Body: "Points and stamp programmes to turn one-time visitors into regulars.",
+    f3Title: "Gift Cards", f3Body: "Digital gift cards that bring in new customers at zero extra cost.",
+    f4Title: "Cash Advance", f4Body: "Funding based on your sales — repaid automatically as you trade.",
+    demoLabel: "Try it yourself",
+    demoHeadline: "Explore the live demo account.",
+    demoSub: "Get hands-on with SumUp. Click through the demo and see how it works for a beauty business like yours — no sign-in needed.",
+    demoStripText: "Open the demo account",
+    demoStripSub: "Explore the platform at your own pace",
+    pricingLabel: "Pricing",
+    pricingHeadline: "Simple, personalised pricing.",
+    pricingSub: "No hidden costs. No commissions. 24/7 Priority Care included on every plan.",
+    pricingTag: "Personalised fees",
+    pricingAmount: (c) => `Plans starting from ${c}39/month — with payment fees from 0.6%.`,
+    pricingBody: (c) => `We work with each beauty business individually to find the right plan for your volume and setup. Book a free call and we'll put together a personalised quote tailored to how your business runs.`,
+    pp1: "Transparent pricing — what you see is what you pay",
+    pp2: "No setup fees, no long-term contracts",
+    pp3: "24/7 Priority Care included on every plan",
+    pricingNote: "Exact fees are confirmed on your free demo call based on your business type and transaction volume.",
+    bookLabel: "Ready to talk?",
+    bookingTitle: (name) => name ? `Book your free call with ${name}.` : "Book your free call.",
+    bookingSectionSub: "No pressure, no commitment. Just a quick 30-minute chat to see if SumUp is the right fit for your business.",
+    directRepName: (name) => `Book with ${name}`,
+    directRepRole: "SumUp Beauty Specialist",
+    directBookBtnText: "Book your free 30-min call",
+    directBookNote: "Free cancellation anytime · No sign-in required",
+    repSelectorLabel: "Choose your SumUp representative",
+    repIntroText: "Book a call with",
+    bookBtnText: "Book your free 30-min call",
+    bookNote: "Free cancellation anytime · No sign-in required",
+    noRepHint: "Select a representative above to book",
+  },
+  de: {
+    navCta: "Kostenlose Demo buchen →",
+    repHey: (name) => `Hallo, ich bin ${name} 👋`,
+    repHeadline: "Deine persönliche SumUp Beauty Spezialistin.",
+    repBody: "Ich habe diese Seite speziell für dich zusammengestellt, damit du SumUp in deinem eigenen Tempo entdecken kannst. Schau dich um, prüf die Preise und buche ein Gespräch, wann immer du bereit bist.",
+    repCtaText: "Kostenlose Demo buchen",
+    repRole: "SumUp Beauty Spezialistin",
+    bookingLabel: "Kernfunktion",
+    bookingHeadline: "Smarte Buchungen, die sich selbst verwalten.",
+    bookingSub: "Nichterscheinen kostet Beauty-Businesses jedes Jahr Tausende. Das Buchungssystem von SumUp gibt dir die Kontrolle zurück — automatisch.",
+    bp1Title: "Online-Buchung rund um die Uhr",
+    bp1Body: "Kunden buchen selbst — jederzeit, ohne langes Hin-und-Her.",
+    bp2Title: "Automatische Erinnerungen",
+    bp2Body: "SMS- und E-Mail-Erinnerungen werden automatisch verschickt, um Nichterscheinen zu reduzieren.",
+    bp3Title: "Anzahlungen & Stornierungsgebühren",
+    bp3Body: "Verlange Anzahlungen im Voraus und berechne Stornierungsgebühren automatisch.",
+    bp4Title: "Deine eigene Buchungsseite",
+    bp4Body: "Eine gebrandete Seite, die Kunden teilen und speichern können — kein App-Download nötig.",
+    featuresLabel: "Und noch mehr",
+    featuresHeadline: "Alles, was dein Business braucht.",
+    featuresSub: "SumUp geht über Buchungen hinaus — und gibt dir das komplette Werkzeug zum Verwalten, Wachsen und Kassieren.",
+    f1Title: "Kasse & Zahlungen", f1Body: "Karte, Apple Pay, Google Pay — zu wettbewerbsfähigen Konditionen mit Auszahlung am nächsten Tag.",
+    f2Title: "Treueprogramm", f2Body: "Punkte- und Stempelprogramme, um Einmalkunden zu Stammkunden zu machen.",
+    f3Title: "Geschenkgutscheine", f3Body: "Digitale Gutscheine, die neue Kunden ohne zusätzliche Kosten bringen.",
+    f4Title: "Sofortkredit", f4Body: "Finanzierung auf Basis deiner Umsätze — automatisch zurückgezahlt beim Handeln.",
+    demoLabel: "Selbst ausprobieren",
+    demoHeadline: "Demo-Konto erkunden.",
+    demoSub: "Teste SumUp direkt. Klick dich durch die Demo und sieh, wie es für ein Beauty-Business wie deins funktioniert — kein Login nötig.",
+    demoStripText: "Demo-Konto öffnen",
+    demoStripSub: "Die Plattform in deinem eigenen Tempo erkunden",
+    pricingLabel: "Preise",
+    pricingHeadline: "Einfache, individuelle Preise.",
+    pricingSub: "Keine versteckten Kosten. Keine Provisionen. 24/7 Priority Care in jedem Tarif enthalten.",
+    pricingTag: "Individuelle Konditionen",
+    pricingAmount: (c) => `Tarife ab ${c}39/Monat — mit Zahlungsgebühren ab 0,6 %.`,
+    pricingBody: () => `Wir arbeiten mit jedem Beauty-Business individuell zusammen, um den richtigen Tarif für dein Volumen und Setup zu finden. Buche ein kostenloses Gespräch und wir erstellen dir ein individuelles Angebot.`,
+    pp1: "Transparente Preise — du zahlst genau das, was du siehst",
+    pp2: "Keine Einrichtungsgebühren, keine Langzeitverträge",
+    pp3: "24/7 Priority Care in jedem Tarif enthalten",
+    pricingNote: "Genaue Konditionen werden im kostenlosen Demo-Gespräch basierend auf deinem Geschäftstyp und Transaktionsvolumen bestätigt.",
+    bookLabel: "Bereit zum Gespräch?",
+    bookingTitle: (name) => name ? `Buche deinen kostenlosen Anruf mit ${name}.` : "Buche deinen kostenlosen Anruf.",
+    bookingSectionSub: "Kein Druck, keine Verpflichtung. Nur ein kurzes 30-minütiges Gespräch, um zu sehen, ob SumUp das Richtige für dein Business ist.",
+    directRepName: (name) => `Mit ${name} buchen`,
+    directRepRole: "SumUp Beauty Spezialistin",
+    directBookBtnText: "Kostenlosen 30-Min-Anruf buchen",
+    directBookNote: "Kostenlose Stornierung jederzeit · Keine Anmeldung erforderlich",
+    repSelectorLabel: "Wähle deinen SumUp-Ansprechpartner",
+    repIntroText: "Gespräch buchen mit",
+    bookBtnText: "Kostenlosen 30-Min-Anruf buchen",
+    bookNote: "Kostenlose Stornierung jederzeit · Keine Anmeldung erforderlich",
+    noRepHint: "Bitte oben einen Ansprechpartner auswählen",
+  },
+  it: {
+    navCta: "Prenota una demo gratuita →",
+    repHey: (name) => `Ciao, sono ${name} 👋`,
+    repHeadline: "Il tuo specialista SumUp Beauty personale.",
+    repBody: "Ho preparato questa pagina apposta per te, così puoi esplorare SumUp con i tuoi tempi. Dai un'occhiata, controlla i prezzi e prenota una chiamata quando sei pronto/a.",
+    repCtaText: "Prenota una demo gratuita",
+    repRole: "Specialista SumUp Beauty",
+    bookingLabel: "Funzionalità principale",
+    bookingHeadline: "Prenotazioni intelligenti che si gestiscono da sole.",
+    bookingSub: "Le mancate presenze costano alle attività beauty migliaia di euro ogni anno. Il sistema di prenotazione SumUp ti rimette in controllo — automaticamente.",
+    bp1Title: "Prenotazioni online 24/7",
+    bp1Body: "I clienti si prenotano da soli in qualsiasi momento — niente messaggi avanti e indietro.",
+    bp2Title: "Promemoria automatici",
+    bp2Body: "Promemoria via SMS ed e-mail inviati automaticamente per ridurre le mancate presenze.",
+    bp3Title: "Depositi e penali di cancellazione",
+    bp3Body: "Richiedi depositi anticipati e addebita automaticamente le penali per cancellazioni tardive.",
+    bp4Title: "La tua pagina di prenotazione",
+    bp4Body: "Una pagina brandizzata che i clienti possono condividere e salvare, senza scaricare app.",
+    featuresLabel: "E c'è molto altro",
+    featuresHeadline: "Tutto ciò di cui la tua attività ha bisogno.",
+    featuresSub: "SumUp va oltre le prenotazioni — offrendoti gli strumenti completi per gestire, crescere e incassare.",
+    f1Title: "POS e Pagamenti", f1Body: "Carta, Apple Pay, Google Pay — a tariffe competitive con accrediti il giorno successivo.",
+    f2Title: "Fidelizzazione", f2Body: "Programmi a punti e timbri per trasformare i clienti occasionali in abituali.",
+    f3Title: "Gift Card", f3Body: "Gift card digitali che portano nuovi clienti senza costi aggiuntivi.",
+    f4Title: "Anticipo in Contanti", f4Body: "Finanziamento basato sulle tue vendite — rimborsato automaticamente man mano che lavori.",
+    demoLabel: "Provalo tu stesso",
+    demoHeadline: "Esplora l'account demo live.",
+    demoSub: "Metti mano su SumUp. Naviga nella demo e scopri come funziona per un'attività beauty come la tua — nessun accesso richiesto.",
+    demoStripText: "Apri l'account demo",
+    demoStripSub: "Esplora la piattaforma con i tuoi tempi",
+    pricingLabel: "Prezzi",
+    pricingHeadline: "Prezzi semplici e personalizzati.",
+    pricingSub: "Nessun costo nascosto. Nessuna commissione. Assistenza prioritaria 24/7 inclusa in ogni piano.",
+    pricingTag: "Tariffe personalizzate",
+    pricingAmount: (c) => `Piani a partire da ${c}39/mese — con commissioni sui pagamenti dall'0,6%.`,
+    pricingBody: () => `Lavoriamo con ogni attività beauty individualmente per trovare il piano giusto in base al tuo volume e alla tua configurazione. Prenota una chiamata gratuita e ti prepareremo un preventivo personalizzato.`,
+    pp1: "Prezzi trasparenti — paghi esattamente quello che vedi",
+    pp2: "Nessun costo di attivazione, nessun contratto a lungo termine",
+    pp3: "Assistenza prioritaria 24/7 inclusa in ogni piano",
+    pricingNote: "Le tariffe esatte vengono confermate durante la chiamata demo gratuita in base al tipo di attività e al volume delle transazioni.",
+    bookLabel: "Pronto a parlare?",
+    bookingTitle: (name) => name ? `Prenota la tua chiamata gratuita con ${name}.` : "Prenota la tua chiamata gratuita.",
+    bookingSectionSub: "Nessuna pressione, nessun impegno. Solo una breve chiacchierata di 30 minuti per vedere se SumUp fa al caso tuo.",
+    directRepName: (name) => `Prenota con ${name}`,
+    directRepRole: "Specialista SumUp Beauty",
+    directBookBtnText: "Prenota la tua chiamata gratuita di 30 min",
+    directBookNote: "Cancellazione gratuita in qualsiasi momento · Nessun accesso richiesto",
+    repSelectorLabel: "Scegli il tuo rappresentante SumUp",
+    repIntroText: "Prenota una chiamata con",
+    bookBtnText: "Prenota la tua chiamata gratuita di 30 min",
+    bookNote: "Cancellazione gratuita in qualsiasi momento · Nessun accesso richiesto",
+    noRepHint: "Seleziona un rappresentante qui sopra per prenotare",
+  }
+};
+
+// ─────────────────────────────────────────────
+// HELPERS
+// ─────────────────────────────────────────────
+const params  = new URLSearchParams(window.location.search);
+const repSlug = (params.get('rep') || '').toLowerCase().trim();
 const matchRep = reps.find(r => r.slug === repSlug);
 
+// Pick language: from matched rep, fallback to 'en'
+const lang = (matchRep && t[matchRep.lang]) ? matchRep.lang : 'en';
+const tr = t[lang];
+const currency = matchRep ? matchRep.currency : '£';
+
+function setText(id, val) {
+  const el = document.getElementById(id);
+  if (el && val !== undefined) el.textContent = val;
+}
+
 function setAvatar(el, rep) {
   if (rep.photo) {
     el.innerHTML = `<img src="${rep.photo}" alt="${rep.name}" style="width:100%;height:100%;object-fit:cover;display:block;" />`;
@@ -703,26 +898,74 @@ function setAvatar(el, rep) {
   }
 }
 
+// ─────────────────────────────────────────────
+// APPLY TRANSLATIONS TO STATIC TEXT
+// ─────────────────────────────────────────────
+setText('navCta', tr.navCta);
+setText('bookingLabel', tr.bookingLabel);
+setText('bookingHeadline', tr.bookingHeadline);
+setText('bookingSub', tr.bookingSub);
+setText('bp1Title', tr.bp1Title); setText('bp1Body', tr.bp1Body);
+setText('bp2Title', tr.bp2Title); setText('bp2Body', tr.bp2Body);
+setText('bp3Title', tr.bp3Title); setText('bp3Body', tr.bp3Body);
+setText('bp4Title', tr.bp4Title); setText('bp4Body', tr.bp4Body);
+setText('featuresLabel', tr.featuresLabel);
+setText('featuresHeadline', tr.featuresHeadline);
+setText('featuresSub', tr.featuresSub);
+setText('f1Title', tr.f1Title); setText('f1Body', tr.f1Body);
+setText('f2Title', tr.f2Title); setText('f2Body', tr.f2Body);
+setText('f3Title', tr.f3Title); setText('f3Body', tr.f3Body);
+setText('f4Title', tr.f4Title); setText('f4Body', tr.f4Body);
+setText('demoLabel', tr.demoLabel);
+setText('demoHeadline', tr.demoHeadline);
+setText('demoSub', tr.demoSub);
+setText('demoStripText', tr.demoStripText);
+setText('demoStripSub', tr.demoStripSub);
+setText('pricingLabel', tr.pricingLabel);
+setText('pricingHeadline', tr.pricingHeadline);
+setText('pricingSub', tr.pricingSub);
+setText('pricingTag', tr.pricingTag);
+setText('pricingAmount', tr.pricingAmount(currency));
+setText('pricingBody', tr.pricingBody(currency));
+setText('pp1', tr.pp1); setText('pp2', tr.pp2); setText('pp3', tr.pp3);
+setText('pricingNote', tr.pricingNote);
+setText('bookLabel', tr.bookLabel);
+setText('bookingSectionSub', tr.bookingSectionSub);
+setText('repSelectorLabel', tr.repSelectorLabel);
+setText('repIntroText', tr.repIntroText);
+setText('bookBtnText', tr.bookBtnText);
+setText('bookNote', tr.bookNote);
+setText('noRepHint', tr.noRepHint);
+setText('directBookNote', tr.directBookNote);
+setText('directBookBtnText', tr.directBookBtnText);
+
+// ─────────────────────────────────────────────
+// REP-SPECIFIC BEHAVIOUR
+// ─────────────────────────────────────────────
 if (matchRep) {
-  // Show rep intro banner
+  // Rep intro banner
   document.getElementById('repIntroBanner').classList.add('visible');
   setAvatar(document.getElementById('repAvatarHero'), matchRep);
-  document.getElementById('repHey').textContent = `Hey, I'm ${matchRep.name} 👋`;
-  document.getElementById('repIntroHeadline').textContent = `Your personal SumUp Beauty Specialist.`;
+  setText('repHey', tr.repHey(matchRep.name));
+  setText('repIntroHeadline', tr.repHeadline);
+  setText('repIntroBody', tr.repBody);
+  setText('repIntroCtaText', tr.repCtaText);
   document.getElementById('repIntroCta').href = matchRep.link;
 
-  // Booking: direct rep mode
+  // Booking section
+  setText('bookingTitle', tr.bookingTitle(matchRep.name));
+  setText('directRepName', tr.directRepName(matchRep.name));
+  setText('directRepRole', tr.directRepRole);
   document.getElementById('repSelector').style.display  = 'none';
   document.getElementById('directRepBox').style.display = 'flex';
   const avatarEl = document.getElementById('directRepAvatar');
   setAvatar(avatarEl, matchRep);
   avatarEl.style.borderRadius = '50%';
-  document.getElementById('directRepName').textContent = `Book with ${matchRep.name}`;
   document.getElementById('directBookLink').href = matchRep.link;
-  document.getElementById('bookingTitle').textContent = `Book your free call with ${matchRep.name}.`;
 
 } else {
-  // Default: rep selector
+  // Default: show rep selector (English, £)
+  setText('bookingTitle', tr.bookingTitle(null));
   const grid      = document.getElementById('repGrid');
   const ctaArea   = document.getElementById('ctaArea');
   const noRepHint = document.getElementById('noRepHint');
@@ -751,4 +994,4 @@ if (matchRep) {
 }
 </script>
 </body>
-</html>
+</html>