// Secondary pages: Services, Legal notices, Terms, Contact.

// Shared page header
function PageHero({ eyebrow, title, subtitle, theme }) {
  return (
    <section style={{
      padding: "54px 56px 40px",
      background: `linear-gradient(180deg, ${theme.primaryBg} 0%, ${theme.bg} 100%)`,
      borderBottom: "1px solid " + theme.border,
    }}>
      <div style={{ fontSize: 12, fontWeight: 600, textTransform: "uppercase", letterSpacing: 0.8, color: theme.primary, marginBottom: 10 }}>
        {eyebrow}
      </div>
      <h1 style={{
        fontFamily: theme.fontDisplay, fontSize: 48, fontWeight: 700, margin: "0 0 14px",
        color: theme.ink, letterSpacing: -1.2, textWrap: "balance", maxWidth: 820, lineHeight: 1.05,
      }}>{title}</h1>
      {subtitle && (
        <p style={{ fontSize: 16, color: theme.inkMuted, maxWidth: 680, lineHeight: 1.5, margin: 0 }}>{subtitle}</p>
      )}
    </section>
  );
}

function PageContainer({ children }) {
  return <div style={{ maxWidth: 960, margin: "0 auto", padding: "48px 56px 72px" }}>{children}</div>;
}

// --- SERVICES ---
function ServicesPage({ lang, theme, go }) {
  const content = {
    fr: {
      eyebrow: "Nos services",
      title: "Tout ce qu'il faut pour un départ serein.",
      sub: "De l'arrivée au parking au retour à votre terminal, chaque détail est pensé pour vous faire gagner du temps.",
      core: "Services inclus dans chaque réservation",
      coreList: [
        { icon: "shield", t: "Vidéosurveillance 24/7", d: "Enceintes surveillées en permanence, éclairage LED et accès sécurisé par badge." },
        { icon: "shuttle", t: "Navette gratuite", d: "Transfert vers les terminaux inclus, 24h/24 et 7j/7, toutes les 10 à 15 minutes." },
        { icon: "check", t: "Confirmation immédiate", d: "Reçu et QR code par email dès validation du paiement Stripe." },
        { icon: "clock", t: "Support 7j/7", d: "Une équipe disponible par téléphone et par chat avant, pendant et après votre séjour." },
      ],
      optional: "Services optionnels",
      optionalList: [
        { icon: "valet", t: "Voiturier au terminal", d: "Remise des clés à notre agent à votre dépose-minute, retour au même endroit." },
        { icon: "wash", t: "Lavage extérieur ou complet", d: "Retrouvez votre véhicule propre, sans détour par la station-service." },
        { icon: "ev", t: "Recharge véhicule électrique", d: "Bornes 22 kW sur sélection de parkings, recharge pendant votre voyage." },
        { icon: "shield", t: "Assurance Premium", d: "Protection renforcée en cas de dommage pendant votre absence." },
      ],
      pros: "Et toujours",
      prosList: [
        "Paiement 100 % sécurisé par Stripe avec 3D Secure",
        "Prix fixes, sans frais cachés ni supplément le jour J",
        "Partenaires audités : propreté, sécurité et qualité d'accueil",
        "Factures dématérialisées, TVA incluse, export comptable possible",
      ],
    },
    en: {
      eyebrow: "Our services",
      title: "Everything you need for a stress-free departure.",
      sub: "From arriving at the parking to returning to your terminal, every detail is designed to save you time.",
      core: "Included with every booking",
      coreList: [
        { icon: "shield", t: "24/7 CCTV", d: "Continuously monitored sites, LED lighting and badge-secured access." },
        { icon: "shuttle", t: "Free shuttle", d: "Free terminal transfer 24/7, every 10 to 15 minutes." },
        { icon: "check", t: "Instant confirmation", d: "Receipt and QR code by email as soon as your Stripe payment is validated." },
        { icon: "clock", t: "7-day support", d: "A team available by phone and chat before, during and after your stay." },
      ],
      optional: "Optional services",
      optionalList: [
        { icon: "valet", t: "Terminal valet", d: "Hand over your keys to our agent at the drop-off, meet us in the same spot on return." },
        { icon: "wash", t: "Exterior or full detailing", d: "Find your car clean — no detour via a gas-station wash." },
        { icon: "ev", t: "EV charging", d: "22 kW chargers at selected parkings, charge while you're away." },
        { icon: "shield", t: "Premium insurance", d: "Reinforced protection in case of damage during your absence." },
      ],
      pros: "And always",
      prosList: [
        "100% secure payment by Stripe with 3D Secure",
        "Flat prices, no hidden fees or on-the-day surcharge",
        "Audited partners: cleanliness, security, quality of welcome",
        "Paperless invoices, VAT included, accounting export available",
      ],
    },
  }[lang];

  return (
    <div style={{ background: theme.bg }}>
      <PageHero eyebrow={content.eyebrow} title={content.title} subtitle={content.sub} theme={theme}/>
      <PageContainer>
        <ServiceGroup title={content.core} items={content.coreList} theme={theme} primary/>
        <ServiceGroup title={content.optional} items={content.optionalList} theme={theme}/>

        <div style={{ marginTop: 48, padding: 28, borderRadius: 16, background: theme.subtle, border: "1px solid " + theme.border }}>
          <h3 style={{ fontFamily: theme.fontDisplay, fontSize: 20, fontWeight: 700, color: theme.ink, margin: "0 0 14px", letterSpacing: -0.4 }}>
            {content.pros}
          </h3>
          <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
            {content.prosList.map((item, i) => (
              <li key={i} style={{ display: "flex", alignItems: "flex-start", gap: 10, fontSize: 14, color: theme.ink, lineHeight: 1.5 }}>
                <span style={{ flexShrink: 0, marginTop: 2, color: theme.primary }}><Icon name="check" size={16} stroke={2.4}/></span>
                {item}
              </li>
            ))}
          </ul>
        </div>

        <CtaBanner go={go} theme={theme} lang={lang}/>
      </PageContainer>
      <Footer lang={lang} theme={theme}/>
    </div>
  );
}

function ServiceGroup({ title, items, theme, primary }) {
  return (
    <section style={{ marginBottom: 40 }}>
      <h2 style={{ fontFamily: theme.fontDisplay, fontSize: 24, fontWeight: 700, color: theme.ink, margin: "0 0 20px", letterSpacing: -0.6 }}>{title}</h2>
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 16 }}>
        {items.map((s, i) => (
          <div key={i} style={{
            border: "1px solid " + theme.border, borderRadius: 14, padding: 22,
            background: theme.bg, display: "flex", gap: 14, alignItems: "flex-start",
          }}>
            <div style={{
              width: 40, height: 40, borderRadius: 10, flexShrink: 0,
              background: primary ? theme.primary : theme.primaryBg,
              color: primary ? "#fff" : theme.primary,
              display: "flex", alignItems: "center", justifyContent: "center",
            }}>
              <Icon name={s.icon} size={20}/>
            </div>
            <div>
              <div style={{ fontFamily: theme.fontDisplay, fontSize: 17, fontWeight: 600, color: theme.ink, marginBottom: 4 }}>{s.t}</div>
              <div style={{ fontSize: 14, color: theme.inkMuted, lineHeight: 1.5 }}>{s.d}</div>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

function CtaBanner({ go, theme, lang }) {
  return (
    <section style={{
      marginTop: 48,
      background: `linear-gradient(120deg, ${theme.ink} 0%, oklch(0.28 0.04 250) 100%)`,
      color: theme.bg, borderRadius: 20, padding: "36px 40px",
      display: "flex", justifyContent: "space-between", alignItems: "center", gap: 20, flexWrap: "wrap",
    }}>
      <h2 style={{ fontFamily: theme.fontDisplay, fontSize: 24, fontWeight: 700, margin: 0, letterSpacing: -0.5, maxWidth: 520, textWrap: "balance" }}>
        {lang === "fr" ? "Réservez votre place en moins de deux minutes." : "Book your spot in under two minutes."}
      </h2>
      <button onClick={() => go("home")} style={{
        background: theme.bg, color: theme.ink, border: "none", borderRadius: 12,
        padding: "13px 20px", fontSize: 15, fontWeight: 700, cursor: "pointer",
        display: "inline-flex", alignItems: "center", gap: 8,
      }}>
        {lang === "fr" ? "Lancer une recherche" : "Start a search"}
        <Icon name="arrow" size={16}/>
      </button>
    </section>
  );
}

// --- MENTIONS LÉGALES ---
function LegalPage({ lang, theme }) {
  const c = {
    fr: {
      eyebrow: "Informations légales",
      title: "Mentions légales",
      sub: "Informations obligatoires relatives à l'éditeur du site Parking Officiel.",
      sections: [
        { h: "Éditeur du site", body: "Parking Officiel SAS\n12 rue des Aviateurs, 95700 Roissy-en-France\nRCS Paris 912 345 678 — SIRET 912 345 678 00014\nTVA intracommunautaire : FR 42 912 345 678\nCapital social : 50 000 €\nDirecteur de la publication : Camille Dupuis" },
        { h: "Hébergement", body: "Le site est hébergé par OVHcloud SAS — 2 rue Kellermann, 59100 Roubaix — France. Téléphone : 09 72 10 10 07." },
        { h: "Propriété intellectuelle", body: "L'ensemble des contenus diffusés sur parking-officiel.fr (textes, images, marques, logos, bases de données) est la propriété exclusive de Parking Officiel SAS ou de ses partenaires. Toute reproduction, représentation ou diffusion, totale ou partielle, est interdite sans autorisation écrite préalable." },
        { h: "Données personnelles", body: "Les informations collectées lors d'une réservation sont nécessaires à l'exécution du contrat. Elles sont conservées pendant la durée légale et peuvent être consultées, modifiées ou supprimées en écrivant à privacy@parking-officiel.fr. Délégué à la Protection des Données : dpo@parking-officiel.fr." },
        { h: "Cookies", body: "Le site utilise des cookies de mesure d'audience et de fonctionnement. Vous pouvez ajuster votre consentement à tout moment via la page « Gestion des cookies » accessible en bas de site." },
        { h: "Médiateur de la consommation", body: "Conformément à l'article L.616-1 du Code de la consommation, le client peut recourir gratuitement au service de médiation CM2C — 14 rue Saint-Jean, 75017 Paris — cm2c.net." },
      ],
    },
    en: {
      eyebrow: "Legal information",
      title: "Legal notices",
      sub: "Mandatory information about the publisher of the Parking Officiel website.",
      sections: [
        { h: "Site publisher", body: "Parking Officiel SAS\n12 rue des Aviateurs, 95700 Roissy-en-France\nParis trade register 912 345 678 — SIRET 912 345 678 00014\nEU VAT: FR 42 912 345 678\nShare capital: €50,000\nPublication director: Camille Dupuis" },
        { h: "Hosting", body: "The site is hosted by OVHcloud SAS — 2 rue Kellermann, 59100 Roubaix — France. Phone: +33 9 72 10 10 07." },
        { h: "Intellectual property", body: "All content published on parking-officiel.fr (texts, images, trademarks, logos, databases) is the exclusive property of Parking Officiel SAS or its partners. Any reproduction, representation or distribution, in whole or in part, is forbidden without prior written consent." },
        { h: "Personal data", body: "Information collected during a booking is required for the execution of the contract. It is kept for the legal duration and can be consulted, modified or deleted by writing to privacy@parking-officiel.fr. Data Protection Officer: dpo@parking-officiel.fr." },
        { h: "Cookies", body: "The site uses audience-measurement and functional cookies. You may adjust your consent at any time via the \"Cookie settings\" link at the bottom of the site." },
        { h: "Consumer mediator", body: "Per article L.616-1 of the French Consumer Code, customers may freely use the mediation service CM2C — 14 rue Saint-Jean, 75017 Paris — cm2c.net." },
      ],
    },
  }[lang];

  return (
    <div style={{ background: theme.bg }}>
      <PageHero eyebrow={c.eyebrow} title={c.title} subtitle={c.sub} theme={theme}/>
      <PageContainer>
        <LongText sections={c.sections} theme={theme}/>
      </PageContainer>
      <Footer lang={lang} theme={theme}/>
    </div>
  );
}

// --- CGV ---
function TermsPage({ lang, theme }) {
  const c = {
    fr: {
      eyebrow: "Conditions générales",
      title: "Conditions générales de vente",
      sub: "Version en vigueur au 1er janvier 2026. Les présentes conditions régissent toute réservation effectuée sur parking-officiel.fr.",
      sections: [
        { h: "1. Objet", body: "Les présentes Conditions Générales de Vente régissent les relations contractuelles entre Parking Officiel SAS et toute personne physique ou morale (le « Client ») effectuant une réservation d'emplacement de stationnement proposé sur le site parking-officiel.fr." },
        { h: "2. Réservation", body: "La réservation est ferme et définitive dès la validation du paiement par Stripe. Un email de confirmation contenant le récapitulatif et un QR code est adressé au Client. Le Client s'engage à fournir des informations exactes, en particulier l'immatriculation du véhicule et le numéro de vol retour." },
        { h: "3. Prix", body: "Les prix sont indiqués en euros toutes taxes comprises. Ils incluent la navette vers les terminaux lorsque celle-ci est mentionnée. Les options (lavage, recharge, voiturier, assurance) sont facturées en sus selon les tarifs affichés au moment de la réservation." },
        { h: "4. Paiement", body: "Le paiement est intégralement prélevé à la réservation, via Stripe, avec authentification 3D Secure. Les moyens acceptés sont : Carte Bancaire, Visa, Mastercard, American Express, Apple Pay, Google Pay." },
        { h: "5. Modification et annulation", body: "Toute modification doit être effectuée depuis l'espace client. Aucune annulation n'ouvre droit à un remboursement automatique : pour toute demande, le Client est invité à contacter le service client à l'adresse support@parking-officiel.fr. Les options payées et non utilisées ne sont pas remboursables." },
        { h: "6. Responsabilité", body: "Le véhicule reste sous la garde du Client sur les parkings en libre-service. Une assurance Premium optionnelle peut être souscrite au moment de la réservation. Parking Officiel agit en qualité d'intermédiaire entre le Client et l'exploitant du parking." },
        { h: "7. Litiges", body: "Les présentes CGV sont soumises au droit français. Tout litige relève des tribunaux compétents du ressort du siège social de Parking Officiel SAS, sous réserve des dispositions d'ordre public applicables aux consommateurs." },
      ],
    },
    en: {
      eyebrow: "Terms & conditions",
      title: "General terms & conditions of sale",
      sub: "Effective from 1 January 2026. These terms govern any booking made on parking-officiel.fr.",
      sections: [
        { h: "1. Purpose", body: "These General Terms & Conditions of Sale govern the contractual relationship between Parking Officiel SAS and any individual or legal entity (the \"Customer\") booking a parking spot offered on parking-officiel.fr." },
        { h: "2. Booking", body: "The booking is firm and final upon validation of payment by Stripe. A confirmation email with a summary and a QR code is sent to the Customer. The Customer agrees to provide accurate information, in particular the vehicle registration and the return flight number." },
        { h: "3. Prices", body: "Prices are stated in euros including all taxes. They include the terminal shuttle when mentioned. Extras (wash, EV charging, valet, insurance) are billed on top of the displayed rates at booking time." },
        { h: "4. Payment", body: "Payment is charged in full at booking, via Stripe, with 3D Secure authentication. Accepted methods: credit card, Visa, Mastercard, American Express, Apple Pay, Google Pay." },
        { h: "5. Changes & cancellations", body: "Any change must be made from the customer area. Cancellations are not automatically refunded: please contact customer care at support@parking-officiel.fr. Paid but unused extras are non-refundable." },
        { h: "6. Liability", body: "The vehicle remains under the Customer's responsibility in self-park facilities. An optional Premium insurance may be subscribed at booking. Parking Officiel acts as an intermediary between the Customer and the parking operator." },
        { h: "7. Disputes", body: "These terms are governed by French law. Any dispute shall fall under the jurisdiction of the courts of the registered office of Parking Officiel SAS, subject to mandatory consumer provisions." },
      ],
    },
  }[lang];

  return (
    <div style={{ background: theme.bg }}>
      <PageHero eyebrow={c.eyebrow} title={c.title} subtitle={c.sub} theme={theme}/>
      <PageContainer>
        <LongText sections={c.sections} theme={theme}/>
      </PageContainer>
      <Footer lang={lang} theme={theme}/>
    </div>
  );
}

function LongText({ sections, theme }) {
  return (
    <div style={{ display: "grid", gridTemplateColumns: "220px 1fr", gap: 40, alignItems: "start" }}>
      {/* anchor nav */}
      <nav style={{ position: "sticky", top: 96, display: "flex", flexDirection: "column", gap: 8, fontSize: 13 }}>
        {sections.map((s, i) => (
          <a key={i} href={`#s-${i}`} style={{
            color: theme.inkMuted, textDecoration: "none",
            paddingLeft: 10, borderLeft: "2px solid " + theme.border,
            paddingTop: 4, paddingBottom: 4,
          }}>{s.h}</a>
        ))}
      </nav>

      <div>
        {sections.map((s, i) => (
          <section key={i} id={`s-${i}`} style={{
            marginBottom: 32, paddingBottom: 28, borderBottom: i === sections.length - 1 ? "none" : "1px solid " + theme.border,
          }}>
            <h2 style={{ fontFamily: theme.fontDisplay, fontSize: 22, fontWeight: 700, color: theme.ink, margin: "0 0 12px", letterSpacing: -0.4 }}>{s.h}</h2>
            <p style={{ fontSize: 15, color: theme.ink, lineHeight: 1.7, margin: 0, whiteSpace: "pre-wrap" }}>{s.body}</p>
          </section>
        ))}
      </div>
    </div>
  );
}

// --- CONTACT ---
function ContactPage({ lang, theme }) {
  const [form, setForm] = React.useState({ name: "", email: "", subject: "booking", message: "", ref: "" });
  const [sent, setSent] = React.useState(false);

  const c = {
    fr: {
      eyebrow: "Nous contacter",
      title: "Une question ? Nous répondons en moins de 2 heures.",
      sub: "Notre équipe est disponible 7 jours sur 7 pour vous accompagner avant, pendant et après votre séjour.",
      phone: "Téléphone", phoneV: "+33 1 23 45 67 89", phoneD: "Lun–Dim, 7h–22h",
      email: "Email", emailV: "support@parking-officiel.fr", emailD: "Réponse sous 2h en semaine",
      address: "Adresse", addressV: "12 rue des Aviateurs, 95700 Roissy-en-France", addressD: "Siège administratif",
      formTitle: "Écrivez-nous",
      name: "Nom complet", mail: "Adresse email", ref: "Référence de réservation (optionnel)",
      subject: "Sujet", msg: "Votre message",
      subjects: [
        { id: "booking", label: "Question sur une réservation" },
        { id: "payment", label: "Paiement et facturation" },
        { id: "refund", label: "Annulation ou remboursement" },
        { id: "partnership", label: "Partenariat parking" },
        { id: "other", label: "Autre sujet" },
      ],
      send: "Envoyer le message",
      sentT: "Message envoyé !",
      sentD: "Nous revenons vers vous très vite. Pensez à vérifier vos spams.",
      hours: "Heures d'ouverture", weekdays: "Lundi – Vendredi", weekend: "Samedi – Dimanche",
      weekdaysH: "7h00 – 22h00", weekendH: "8h00 – 20h00",
    },
    en: {
      eyebrow: "Contact us",
      title: "A question? We reply in less than 2 hours.",
      sub: "Our team is available 7 days a week to support you before, during and after your stay.",
      phone: "Phone", phoneV: "+33 1 23 45 67 89", phoneD: "Mon–Sun, 7am–10pm",
      email: "Email", emailV: "support@parking-officiel.fr", emailD: "Replies within 2h on weekdays",
      address: "Address", addressV: "12 rue des Aviateurs, 95700 Roissy-en-France", addressD: "Administrative office",
      formTitle: "Write to us",
      name: "Full name", mail: "Email address", ref: "Booking reference (optional)",
      subject: "Subject", msg: "Your message",
      subjects: [
        { id: "booking", label: "Question about a booking" },
        { id: "payment", label: "Payment & invoicing" },
        { id: "refund", label: "Cancellation or refund" },
        { id: "partnership", label: "Parking partnership" },
        { id: "other", label: "Other" },
      ],
      send: "Send message",
      sentT: "Message sent!",
      sentD: "We'll get back to you shortly. Please check your spam folder.",
      hours: "Opening hours", weekdays: "Monday – Friday", weekend: "Saturday – Sunday",
      weekdaysH: "7:00am – 10:00pm", weekendH: "8:00am – 8:00pm",
    },
  }[lang];

  const onSubmit = (e) => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;
    setSent(true);
  };

  return (
    <div style={{ background: theme.bg }}>
      <PageHero eyebrow={c.eyebrow} title={c.title} subtitle={c.sub} theme={theme}/>
      <PageContainer>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 40, alignItems: "start" }}>
          {/* Left: contact info */}
          <div>
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <ContactBlock icon="clock" title={c.phone} value={c.phoneV} desc={c.phoneD} theme={theme} primary/>
              <ContactBlock icon="check" title={c.email} value={c.emailV} desc={c.emailD} theme={theme}/>
              <ContactBlock icon="pin" title={c.address} value={c.addressV} desc={c.addressD} theme={theme}/>
            </div>

            <div style={{ marginTop: 28, padding: 22, borderRadius: 14, background: theme.subtle, border: "1px solid " + theme.border }}>
              <h3 style={{ fontFamily: theme.fontDisplay, fontSize: 17, fontWeight: 700, color: theme.ink, margin: "0 0 14px", letterSpacing: -0.3 }}>{c.hours}</h3>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14, color: theme.ink, padding: "8px 0", borderBottom: "1px solid " + theme.border }}>
                <span>{c.weekdays}</span><span style={{ fontWeight: 600 }}>{c.weekdaysH}</span>
              </div>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 14, color: theme.ink, padding: "8px 0" }}>
                <span>{c.weekend}</span><span style={{ fontWeight: 600 }}>{c.weekendH}</span>
              </div>
            </div>
          </div>

          {/* Right: form */}
          <div style={{ border: "1px solid " + theme.border, borderRadius: 16, padding: 28, background: theme.bg }}>
            <h2 style={{ fontFamily: theme.fontDisplay, fontSize: 22, fontWeight: 700, color: theme.ink, margin: "0 0 20px", letterSpacing: -0.4 }}>{c.formTitle}</h2>

            {sent ? (
              <div style={{ textAlign: "center", padding: "40px 10px" }}>
                <div style={{
                  width: 60, height: 60, borderRadius: "50%",
                  background: "oklch(0.94 0.07 150)", color: "oklch(0.45 0.15 150)",
                  display: "inline-flex", alignItems: "center", justifyContent: "center", marginBottom: 16,
                }}>
                  <Icon name="check" size={28} stroke={2.5}/>
                </div>
                <div style={{ fontFamily: theme.fontDisplay, fontSize: 20, fontWeight: 700, color: theme.ink, marginBottom: 6 }}>{c.sentT}</div>
                <div style={{ fontSize: 14, color: theme.inkMuted }}>{c.sentD}</div>
              </div>
            ) : (
              <form onSubmit={onSubmit} style={{ display: "flex", flexDirection: "column", gap: 14 }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 12 }}>
                  <Field label={c.name} value={form.name} onChange={(v) => setForm({ ...form, name: v })} theme={theme}/>
                  <Field label={c.mail} type="email" value={form.email} onChange={(v) => setForm({ ...form, email: v })} theme={theme}/>
                </div>
                <Field label={c.ref} value={form.ref} onChange={(v) => setForm({ ...form, ref: v })} theme={theme} placeholder="APK-XXXX-XXXX"/>
                <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <span style={{ fontSize: 12, fontWeight: 600, color: theme.inkMuted }}>{c.subject}</span>
                  <select value={form.subject} onChange={(e) => setForm({ ...form, subject: e.target.value })} style={{
                    border: "1px solid " + theme.border, borderRadius: 10, padding: "11px 13px",
                    fontFamily: "inherit", fontSize: 14, color: theme.ink, background: theme.bg, outline: "none",
                  }}>
                    {c.subjects.map(s => <option key={s.id} value={s.id}>{s.label}</option>)}
                  </select>
                </label>
                <label style={{ display: "flex", flexDirection: "column", gap: 6 }}>
                  <span style={{ fontSize: 12, fontWeight: 600, color: theme.inkMuted }}>{c.msg}</span>
                  <textarea value={form.message} onChange={(e) => setForm({ ...form, message: e.target.value })} rows={5} style={{
                    border: "1px solid " + theme.border, borderRadius: 10, padding: "11px 13px",
                    fontFamily: "inherit", fontSize: 14, color: theme.ink, background: theme.bg, outline: "none", resize: "vertical",
                  }}/>
                </label>
                <button type="submit" style={{
                  background: theme.primary, color: "#fff", border: "none", borderRadius: 12,
                  padding: "13px 22px", fontSize: 15, fontWeight: 700, cursor: "pointer", marginTop: 4,
                  display: "inline-flex", alignItems: "center", justifyContent: "center", gap: 8,
                }}>
                  {c.send} <Icon name="arrow" size={16}/>
                </button>
              </form>
            )}
          </div>
        </div>
      </PageContainer>
      <Footer lang={lang} theme={theme}/>
    </div>
  );
}

function ContactBlock({ icon, title, value, desc, theme, primary }) {
  return (
    <div style={{ display: "flex", gap: 14, alignItems: "flex-start", padding: 18, border: "1px solid " + theme.border, borderRadius: 14 }}>
      <div style={{
        width: 44, height: 44, borderRadius: 12, flexShrink: 0,
        background: primary ? theme.primary : theme.primaryBg,
        color: primary ? "#fff" : theme.primary,
        display: "flex", alignItems: "center", justifyContent: "center",
      }}>
        <Icon name={icon} size={22}/>
      </div>
      <div style={{ minWidth: 0, flex: 1 }}>
        <div style={{ fontSize: 12, fontWeight: 600, color: theme.inkMuted, textTransform: "uppercase", letterSpacing: 0.5, marginBottom: 4 }}>{title}</div>
        <div style={{ fontFamily: theme.fontDisplay, fontSize: 17, fontWeight: 600, color: theme.ink, letterSpacing: -0.2, lineHeight: 1.3, wordBreak: "break-word" }}>{value}</div>
        <div style={{ fontSize: 13, color: theme.inkMuted, marginTop: 8 }}>{desc}</div>
      </div>
    </div>
  );
}

Object.assign(window, { ServicesPage, LegalPage, TermsPage, ContactPage });