// Services, About, Careers pages

const SERVICES = [
  {
    id: 'involuntary',
    icon: 'car',
    titleKey: 'Involuntary Repossessions',
    bodyKey: `At JMAC, we specialize in involuntary repossessions with a focus on professionalism, compliance, and results. We understand that every recovery situation requires a careful balance of efficiency and legal responsibility. That's why our agents are highly trained to operate in full compliance with the Fair Debt Collection Practices Act, as well as all applicable state laws and statutes governing self-help repossessions. Our team is committed to conducting every assignment with integrity, ensuring that all recoveries are completed lawfully and without breach of peace.`,
  },
  {
    id: 'voluntary',
    icon: 'key',
    titleKey: 'Voluntary Repossessions',
    bodyKey: `We set the standard for voluntary repossessions by acting as a trusted, professional intermediary between lenders and borrowers. We make the process simple and stress-free through clear communication, flexible scheduling, and a commitment to treating every debtor with respect. Our team goes above and beyond to ensure each recovery is handled smoothly, efficiently, and on time. Utilizing flatbed transport for added safety and care, JMAC delivers a seamless voluntary repossession experience you can rely on.`,
  },
  {
    id: 'impound',
    icon: 'shield',
    titleKey: 'Impound Repossessions',
    bodyKey: `JMAC excels in impound repossessions by acting quickly and decisively when time — and money — matter most. We understand the challenges these recoveries present, from rising storage fees to complex release requirements, which is why we move fast to minimize costs on behalf of our clients. Our team has a seamless process for handling large bailout fees and coordinating directly with impound lots and repair facilities.`,
  },
  {
    id: 'post',
    icon: 'file',
    titleKey: 'Post Recovery',
    bodyKey: `Our post-recovery process is built on accuracy, security, and care. We provide detailed vehicle condition reports with clear, high-quality photos, along with comprehensive personal property inventories to ensure every asset is fully documented. All vehicles and belongings are stored in our secure facilities, protected by 24/7 surveillance and controlled gate access. Personal property is stored in organized, watertight and secure areas to keep items protected and accounted for. Releases to debtors and transporters are completed smoothly and efficiently, and by utilizing ClearData for scheduling and document handling, we maintain a fully paperless process — keeping everything simple, organized, and secure.`,
  },
  {
    id: 'locksmith',
    icon: 'wrench',
    titleKey: 'Locksmith Services',
    bodyKey: `We are proud to offer in-house locksmith services designed to save you time and money. Our skilled technicians provide fast, reliable solutions both in our facility and through fully mobile service in the field. By keeping locksmith services in-house, we eliminate delays and reduce costs — delivering quicker turnaround times when every minute counts.`,
  },
  {
    id: 'skip',
    icon: 'search',
    titleKey: 'Skip Tracing',
    bodyKey: `JMAC's in-house skip tracing uses top-tier software, allowing us to secure vehicles more efficiently. By identifying accurate, up-to-date information, we improve recovery success rates while reducing time in the field. All skip tracing is conducted in full compliance with applicable laws, with a strong commitment to protecting privacy at every step.`,
  },
];

const ServicesPage = ({ onNav, lang }) => (
  <main>
    <PageHero
      eyebrow={t('Capabilities', lang)}
      title={<>{t('Our', lang)} <span style={{ color: 'var(--amber-400)' }}>{t('services', lang)}</span></>}
      subtitle={t('A full-stack recovery operation. Every asset class. Every step of the process.', lang)}
      lang={lang}
    />
    <Section padY={72}>
      {/* anchor nav */}
      <div style={{
        display: 'flex', flexWrap: 'wrap', gap: 8,
        padding: '14px 0', marginBottom: 32,
        borderBottom: '1px solid var(--border-1)',
      }}>
        {SERVICES.map(s => (
          <a key={s.id} href={`#${s.id}`} style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '8px 14px', borderRadius: 999,
            background: 'var(--bg-subtle)', border: '1px solid var(--border-1)',
            fontSize: 12, fontWeight: 700, letterSpacing: '0.08em',
            textTransform: 'uppercase', color: 'var(--fg-1)',
            textDecoration: 'none',
          }}>
            <Icon name={s.icon} size={14} color="var(--blue-700)"/>
            {t(s.titleKey, lang)}
          </a>
        ))}
      </div>

      <div style={{ display: 'flex', flexDirection: 'column', gap: 56 }}>
        {SERVICES.map((s, i) => (
          <article key={s.id} id={s.id} className="jmac-svc-article" style={{
            display: 'grid', gridTemplateColumns: 'minmax(0, 180px) minmax(0, 1fr)',
            gap: 40, alignItems: 'start',
            paddingTop: i === 0 ? 0 : 16,
            borderTop: i === 0 ? 'none' : '1px solid var(--border-1)',
          }}>
            <div>
              <div className="jmac-svc-icon" style={{
                width: 96, height: 96, borderRadius: 4,
                background: 'var(--blue-900)', display: 'grid', placeItems: 'center',
                position: 'relative', overflow: 'hidden',
              }}>
                <Icon name={s.icon} size={44} color="var(--amber-400)"/>
                <div style={{
                  position: 'absolute', left: 0, right: 0, bottom: 0, height: 4,
                  background: 'var(--pattern-hazard)',
                }}/>
              </div>
              <div style={{
                marginTop: 14,
                fontFamily: 'var(--font-mono)', fontSize: 11,
                color: 'var(--fg-3)', letterSpacing: '0.08em',
              }}>
                0{i + 1} / 0{SERVICES.length}
              </div>
            </div>
            <div>
              <h2 style={{ fontSize: 'clamp(28px, 3vw, 40px)', marginBottom: 14 }}>{t(s.titleKey, lang)}</h2>
              <p style={{ fontSize: 17, lineHeight: 1.65, color: 'var(--fg-2)', maxWidth: 760 }}>
                {t(s.bodyKey, lang)}
              </p>
            </div>
          </article>
        ))}
      </div>

    </Section>
  </main>
);

const CTABand = ({ onNav, lang }) => (
  <div style={{
    marginTop: 80, padding: '48px 40px',
    background: 'var(--steel-900)', color: '#fff',
    borderRadius: 6, position: 'relative', overflow: 'hidden',
    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 32,
    flexWrap: 'wrap',
  }}>
    <div style={{
      position: 'absolute', right: 0, top: 0, bottom: 0, width: 200,
      background: 'var(--pattern-hazard)', opacity: 0.18,
    }}/>
    <div style={{ position: 'relative', maxWidth: 600 }}>
      <div style={{
        fontSize: 11, fontWeight: 700, letterSpacing: '0.16em',
        textTransform: 'uppercase', color: 'var(--amber-400)', marginBottom: 10,
      }}>{t('Ready to dispatch', lang)}</div>
      <div style={{
        fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 800,
        fontSize: 'clamp(28px, 3.6vw, 44px)', textTransform: 'uppercase',
        letterSpacing: '-0.01em', lineHeight: 1,
      }}>
        {t("Need a recovery? We're 24/7.", lang)}
      </div>
    </div>
    <div style={{ position: 'relative', display: 'flex', gap: 12 }}>
      <Button variant="accent" size="lg" onClick={() => onNav('home')}>
        {t('Book Appointment', lang)}
      </Button>
      <Button variant="onDark" size="lg" onClick={() => onNav('about')}>
        {t('About JMAC', lang)}
      </Button>
    </div>
  </div>
);

const AboutPage = ({ onNav, lang }) => (
  <main>
    <PageHero
      eyebrow={t('About JMAC', lang)}
      title={<>{t('A decade of trusted', lang)} <span style={{ color: 'var(--amber-400)' }}>{t('recovery', lang)}</span></>}
      subtitle={t('Backed by a proven track record with major lenders and forwarders for over a decade.', lang)}
      lang={lang}
    />
    <Section padY={80}>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 64,
        alignItems: 'start',
      }}>
        <div>
          <Eyebrow>{t('Who we are', lang)}</Eyebrow>
          <h2 style={{ marginTop: 14, marginBottom: 22, fontSize: 'clamp(30px, 3.4vw, 44px)' }}>
            {t('Your trusted partner in asset recovery.', lang)}
          </h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 18, color: 'var(--fg-2)', fontSize: 16.5, lineHeight: 1.65 }}>
            <p>
              {t('JMAC is your trusted partner when it comes to asset recovery, backed by a proven track record with major lenders and forwarders for over a decade. We specialize in recovering a wide range of assets — including all vehicles, motorcycles, boats, campers, heavy equipment, and even aircraft — delivering consistent, reliable results.', lang)}
            </p>
            <p>
              {t("When you partner with JMAC, you're choosing a company that prioritizes compliance, accountability, and professional execution. Through proven strategies, advanced technology, and real-time communication, we maximize recovery rates while minimizing risk — making JMAC a trusted leader in the repossession industry.", lang)}
            </p>
          </div>
        </div>
        <div style={{
          background: 'var(--bg-subtle)', border: '1px solid var(--border-1)',
          borderRadius: 6, padding: 32,
        }}>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24 }}>
            {[
              ['Vehicles', 'car'],
              ['Motorcycles', 'car'],
              ['Boats', 'boat'],
              ['Campers', 'truck'],
              ['Heavy equipment', 'truck'],
              ['Aircraft', 'shield'],
            ].map(([label, icon]) => (
              <div key={label} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                padding: '14px 16px', background: '#fff',
                border: '1px solid var(--border-1)', borderRadius: 4,
              }}>
                <Icon name={icon} size={22} color="var(--blue-700)"/>
                <span style={{ fontSize: 14, fontWeight: 600 }}>{t(label, lang)}</span>
              </div>
            ))}
          </div>
          <div style={{
            marginTop: 24, padding: 18,
            background: 'var(--blue-900)', color: '#fff', borderRadius: 4,
          }}>
            <div style={{
              fontSize: 11, fontWeight: 700, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: 'var(--amber-400)', marginBottom: 10,
            }}>{t('States we service', lang)}</div>
            <div style={{
              fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 700,
              fontSize: 28, textTransform: 'uppercase', letterSpacing: '0.04em',
            }}>
              MA · NH · VT · RI · GA · FL
            </div>
          </div>
        </div>
      </div>
    </Section>

    {/* Our people */}
    <Section dark padY={80} style={{ background: 'var(--blue-900)' }}>
      <div style={{
        display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 64, alignItems: 'center',
      }}>
        <div>
          <Eyebrow color="var(--amber-400)">{t('Our people', lang)}</Eyebrow>
          <h2 style={{
            marginTop: 14, marginBottom: 22, fontSize: 'clamp(30px, 3.4vw, 44px)',
            color: '#fff',
          }}>
            {t('Our greatest asset.', lang)}
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.85)', fontSize: 16.5, lineHeight: 1.65 }}>
            {t('We hire only the best and foster a positive, team-driven workplace where employees take pride in what they do. Every team member is treated with the utmost respect, and we stand behind our people no matter what life throws at them. This strong culture of support and professionalism translates directly into the high-quality service our clients expect and trust.', lang)}
          </p>
        </div>
        <div>
          <Eyebrow color="var(--amber-400)">{t('Our fleet', lang)}</Eyebrow>
          <h2 style={{
            marginTop: 14, marginBottom: 22, fontSize: 'clamp(30px, 3.4vw, 44px)',
            color: '#fff',
          }}>
            {t('Built for the job.', lang)}
          </h2>
          <p style={{ color: 'rgba(255,255,255,0.85)', fontSize: 16.5, lineHeight: 1.65 }}>
            {t('We operate a modern, well-maintained fleet designed for performance, reliability, and operator comfort. Our late-model tow trucks are fully equipped with the tools and advanced technology needed to execute every recovery efficiently and safely. Supported by our in-house maintenance facility, we ensure all equipment is kept in top condition — minimizing downtime and maximizing success in the field.', lang)}
          </p>
        </div>
      </div>
    </Section>

  </main>
);

const CareersPage = ({ onNav, lang }) => {
  const [form, setForm] = React.useState({
    name: '', email: '', phone: '', position: 'Recovery Agent',
    experience: '', message: '', resume: '',
  });
  const [submitted, setSubmitted] = React.useState(false);

  const positions = [
    'Recovery Agent', 'Spotter Car Driver', 'Lot Attendant', 'Customer Service',
  ];

  return (
    <main>
      <PageHero
        eyebrow={t('Careers at JMAC', lang)}
        title={<>{t('Build a career,', lang)}<br/><span style={{ color: 'var(--amber-400)' }}>{t('not just a job.', lang)}</span></>}
        subtitle={t('As a family-run business, we take pride in our operation. We offer a positive work environment where hard work is recognized, growth opportunities are real, and employees are treated with respect.', lang)}
        lang={lang}
      />
      <Section padY={72}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))', gap: 64, alignItems: 'start' }}>
          <div>
            <Eyebrow>{t('Why JMAC', lang)}</Eyebrow>
            <h2 style={{ marginTop: 14, marginBottom: 24, fontSize: 'clamp(30px, 3.4vw, 40px)' }}>
              {t('A place to grow.', lang)}
            </h2>
            <p style={{ color: 'var(--fg-2)', fontSize: 16, lineHeight: 1.65, marginBottom: 28 }}>
              {t('With modern equipment, strong leadership, and a commitment to safety and compliance, JMAC is a place where you can build a rewarding and long-term career.', lang)}
            </p>
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'flex', flexDirection: 'column', gap: 14 }}>
              {[
                ['trophy', 'Hard work is recognized'],
                ['truck',  'Modern, well-maintained fleet'],
                ['shield', 'Safety & compliance first'],
                ['user',   'Family-run, employee-respected'],
              ].map(([icon, label]) => (
                <li key={label} style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                  <span style={{
                    width: 36, height: 36, borderRadius: 4, display: 'grid', placeItems: 'center',
                    background: 'var(--blue-50)', border: '1px solid var(--blue-200)',
                  }}>
                    <Icon name={icon} size={18} color="var(--blue-700)"/>
                  </span>
                  <span style={{ fontSize: 15, fontWeight: 600 }}>{t(label, lang)}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Form */}
          <div style={{
            background: '#fff', border: '1px solid var(--border-1)',
            borderRadius: 6, padding: 32, boxShadow: 'var(--shadow-2)',
          }}>
            <div style={{
              padding: '14px 18px', marginBottom: 24,
              background: 'var(--steel-900)', color: '#fff', borderRadius: 4,
              display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            }}>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.16em', color: 'var(--amber-400)' }}>
                  {t('APPLICATION', lang)}
                </div>
                <div style={{
                  fontFamily: 'var(--font-display)', fontStyle: 'italic', fontWeight: 700,
                  fontSize: 22, textTransform: 'uppercase', marginTop: 2,
                }}>
                  {submitted ? t('Application received', lang) : t('Apply now', lang)}
                </div>
              </div>
              <Icon name="file" size={22} color="var(--amber-400)"/>
            </div>

            {submitted ? (
              <div style={{ padding: '24px 0', textAlign: 'center' }}>
                <div style={{
                  width: 64, height: 64, borderRadius: 999, background: 'var(--success-500)',
                  margin: '0 auto', display: 'grid', placeItems: 'center',
                }}>
                  <Icon name="check" size={32} color="#fff" strokeWidth={2.5}/>
                </div>
                <h3 style={{ marginTop: 18, fontSize: 24 }}>{t('Thanks,', lang)} {form.name.split(' ')[0] || (lang === 'es' ? 'amigo' : 'there')}.</h3>
                <p style={{ marginTop: 8, color: 'var(--fg-2)' }}>
                  {t('Our team will review your application and reach out at', lang)} <strong>{form.email}</strong>.
                </p>
                <Button variant="ghost" onClick={() => { setSubmitted(false); setForm({ name: '', email: '', phone: '', position: 'Recovery Agent', experience: '', message: '', resume: '' }); }}
                        style={{ marginTop: 20 }}>
                  {t('Submit another', lang)}
                </Button>
              </div>
            ) : (
              <form action="https://formsubmit.co/info@jmacrepo.com"
                    method="POST" encType="multipart/form-data"
                    style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
                <input type="hidden" name="_subject" value="New JMAC Careers Application"/>
                <input type="hidden" name="_template" value="table"/>
                <input type="hidden" name="_captcha" value="false"/>
                <input type="hidden" name="_next" value="https://jmac-website.vercel.app/?applied=1"/>
                <input type="hidden" name="_autoresponse" value="Thanks for applying to JMAC Asset Recovery — our team will review your application and be in touch."/>
                <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))', gap: 14 }}>
                  <Field name="name" required label={t('Full name', lang)} value={form.name} onChange={v => setForm({ ...form, name: v })}/>
                  <Field name="phone" type="tel" required label={t('Phone', lang)} value={form.phone} onChange={v => setForm({ ...form, phone: v })}/>
                </div>
                <Field name="email" type="email" required label={t('Email', lang)} value={form.email} onChange={v => setForm({ ...form, email: v })}/>
                <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <span style={labelSt}>{t('Position', lang)}</span>
                  <select name="position" value={form.position} onChange={e => setForm({ ...form, position: e.target.value })} style={{
                    padding: '11px 12px', border: '1px solid var(--border-2)', borderRadius: 4,
                    fontFamily: 'var(--font-body)', fontSize: 14, background: '#fff',
                  }}>
                    {positions.map(p => <option key={p} value={p}>{t(p, lang)}</option>)}
                  </select>
                </label>
                <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <span style={labelSt}>{t('Years of experience', lang)}</span>
                  <select name="experience" value={form.experience} onChange={e => setForm({ ...form, experience: e.target.value })} style={{
                    padding: '11px 12px', border: '1px solid var(--border-2)', borderRadius: 4,
                    fontFamily: 'var(--font-body)', fontSize: 14, background: '#fff',
                  }}>
                    <option value="">{t('Select…', lang)}</option>
                    <option>{t('None — entry level', lang)}</option>
                    <option>{t('1–2 years', lang)}</option>
                    <option>{t('3–5 years', lang)}</option>
                    <option>{t('6–10 years', lang)}</option>
                    <option>{t('10+ years', lang)}</option>
                  </select>
                </label>
                <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <span style={labelSt}>{t('Tell us about yourself', lang)}</span>
                  <textarea name="message" value={form.message} onChange={e => setForm({ ...form, message: e.target.value })} rows={4} style={{
                    padding: '11px 12px', border: '1px solid var(--border-2)', borderRadius: 4,
                    fontFamily: 'var(--font-body)', fontSize: 14, resize: 'vertical', outline: 'none',
                  }}/>
                </label>
                <label style={{ display: 'flex', flexDirection: 'column', gap: 6 }}>
                  <span style={labelSt}>{t('Resume (PDF or DOC)', lang)}</span>
                  <div style={{
                    padding: '14px 16px', border: '1.5px dashed var(--border-2)', borderRadius: 4,
                    display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 12,
                    background: 'var(--bg-subtle)',
                  }}>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
                      <Icon name="upload" size={20} color="var(--blue-700)"/>
                      <span style={{ fontSize: 14, color: form.resume ? 'var(--fg-1)' : 'var(--fg-3)' }}>
                        {form.resume || t('Click to upload or drag & drop', lang)}
                      </span>
                    </div>
                    <input type="file" name="resume" accept=".pdf,.doc,.docx"
                           onChange={e => setForm({ ...form, resume: e.target.files[0]?.name || '' })}
                           style={{ display: 'none' }} id="resume-upload"/>
                    <label htmlFor="resume-upload" style={{
                      padding: '8px 14px', borderRadius: 4, cursor: 'pointer',
                      background: 'var(--blue-700)', color: '#fff',
                      fontSize: 12, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase',
                    }}>
                      {t('Browse', lang)}
                    </label>
                  </div>
                </label>
                <Button variant="accent" size="lg" type="submit" style={{ marginTop: 8, justifyContent: 'center' }}>
                  {t('Submit Application', lang)} <Icon name="arrow" size={14}/>
                </Button>
              </form>
            )}
          </div>
        </div>
      </Section>
    </main>
  );
};

const PrivacyPage = ({ onNav, lang }) => (
  <main>
    <PageHero
      eyebrow="Legal"
      title={<>Privacy Policy <span style={{ color: 'var(--amber-400)' }}>&amp;</span> Terms</>}
      subtitle="Effective immediately and applicable to all users of this website."
      onBack={() => onNav('home')}
      lang={lang}
    />
    <Section padY={64} narrow>
      <article style={{
        display: 'flex', flexDirection: 'column', gap: 22,
        fontSize: 16, lineHeight: 1.7, color: 'var(--fg-2)',
      }}>
        <h2 style={{ fontSize: 'clamp(24px, 3vw, 32px)', marginBottom: 4 }}>Privacy Policy &amp; Terms and Conditions</h2>
        <p>
          By accessing or using this website, you agree to the following Privacy Policy and Terms &amp; Conditions. JMAC Recovery (&ldquo;JMAC,&rdquo; &ldquo;we,&rdquo; &ldquo;our,&rdquo; or &ldquo;us&rdquo;) may collect personal information including your name, phone number, email address, vehicle information, VIN, IP address, browser data, and other information voluntarily submitted through forms, appointment requests, or website interactions. Information collected may be used to provide services, verify identity, schedule appointments, communicate regarding vehicle or property redemption, improve website functionality, maintain security, comply with legal obligations, and support business operations. We may use cookies, analytics tools, tracking pixels, and related technologies to improve user experience and monitor website traffic. Information may be shared with lenders, forwarding companies, vendors, service providers, law enforcement, regulatory agencies, or legal authorities when necessary to complete services, comply with legal requirements, protect company interests, or enforce our policies. We do not sell personal information.
        </p>
        <p>
          All appointments, including vehicle or property redemption appointments, are subject to lender authorization, identity verification, fee payment requirements, and company approval. JMAC reserves the right to deny, reschedule, or cancel appointments or services at any time. Users are responsible for providing accurate information when booking appointments or communicating with our company. Payments accepted for redemption services may be limited to approved forms of payment as disclosed during scheduling or confirmation. A valid government-issued photo ID and any required documentation must be presented during redemption or release appointments.
        </p>
        <p>
          All website content, logos, branding, text, graphics, and materials are the property of JMAC and may not be copied, reproduced, or distributed without written permission. Use of this website for unlawful activity, interference with operations, unauthorized access attempts, harassment, or fraudulent conduct is strictly prohibited. JMAC makes reasonable efforts to maintain accurate website information but does not guarantee that all information, pricing, appointment availability, or service details are error-free, complete, or current. Services and website functionality are provided &ldquo;as is&rdquo; without warranties of any kind, express or implied.
        </p>
        <p>
          To the fullest extent permitted by law, JMAC shall not be liable for any direct, indirect, incidental, consequential, or special damages arising from the use of this website, scheduling systems, communications, or services. Users agree to indemnify and hold harmless JMAC, its employees, affiliates, contractors, and agents from claims, liabilities, damages, or expenses arising from misuse of the website or violation of these terms. These terms shall be governed by the laws of the Commonwealth of Massachusetts and applicable federal law. JMAC reserves the right to update or modify this Privacy Policy and Terms &amp; Conditions at any time without prior notice. Continued use of the website constitutes acceptance of any revised terms.
        </p>
        <p>
          For questions regarding this Privacy Policy or Terms &amp; Conditions, contact us at <a href="mailto:info@jmacrepo.com" style={{ color: 'var(--brand-primary)', textDecoration: 'underline' }}>info@jmacrepo.com</a> or <a href="tel:+19786748300" style={{ color: 'var(--brand-primary)', textDecoration: 'underline' }}>978-674-8300</a>.
        </p>

        <h2 style={{ fontSize: 'clamp(24px, 3vw, 32px)', marginTop: 24, marginBottom: 4 }}>SMS Privacy Policy</h2>
        <p>
          By providing your phone number to JMAC, you consent to receive SMS text messages related to appointment scheduling, appointment reminders, account updates, vehicle or property redemption information, service notifications, and customer support communications. Message frequency may vary. Standard message and data rates may apply depending on your mobile carrier and plan. Consent to receive SMS messages is not a condition of purchase or service. You may opt out of receiving text messages at any time by replying STOP to any message. For assistance, reply HELP or contact us at <a href="mailto:info@jmacrepo.com" style={{ color: 'var(--brand-primary)', textDecoration: 'underline' }}>info@jmacrepo.com</a> or <a href="tel:+19786748300" style={{ color: 'var(--brand-primary)', textDecoration: 'underline' }}>978-674-8300</a>. We do not sell, rent, or share SMS consent or phone numbers with third parties or affiliates for marketing purposes. SMS information is used solely for business communications related to services requested or provided by JMAC.
        </p>

        <div style={{
          marginTop: 28, paddingTop: 20,
          borderTop: '1px solid var(--border-1)',
          fontSize: 14, color: 'var(--fg-3)',
        }}>
          <strong style={{ color: 'var(--fg-2)', fontWeight: 700, letterSpacing: '0.04em' }}>Operations:</strong>{' '}
          JMAC Distribution LLC
        </div>
      </article>
    </Section>
  </main>
);

Object.assign(window, { ServicesPage, AboutPage, CareersPage, PrivacyPage });