/* global React, SiteHeader, Footer, Reveal, Icon */
const { useState: useStateL } = React;

// ============================================================
// PRIVACY POLICY
// ============================================================
function PrivacyPage() {
  return (
    <div className="page-enter theme-consult" data-screen-label="Privacy Policy">
      <SiteHeader current="" theme="consult" />
      <LegalHeader
        eyebrow="Legal · Privacy"
        title="Privacy Policy"
        updated="Last modified: August 2024"
        crumbs={[{ label: "Sinux Group", href: "#/" }, { label: "Privacy Policy" }]}
      />

      <section className="section-py">
        <div className="container">
          <div className="editorial-two-col">
            <div>
              <TocSidebar
                items={[
                  { id: "intro", label: "Introduction" },
                  { id: "grounds", label: "Grounds for Data Collection" },
                  { id: "what", label: "What We Collect" },
                  { id: "how-receive", label: "How We Receive Information" },
                  { id: "how-use", label: "How We Use Information" },
                  { id: "rights", label: "User Rights" },
                  { id: "retention", label: "Retention" },
                  { id: "cookies", label: "Cookies" },
                  { id: "third-party", label: "Third-Party Collection" },
                  { id: "safeguard", label: "How We Safeguard" },
                  { id: "eea", label: "Transfer Outside EEA" },
                  { id: "ads", label: "Advertisements" },
                  { id: "marketing", label: "Marketing" },
                  { id: "corp", label: "Corporate Transactions" },
                  { id: "minors", label: "Minors" },
                  { id: "updates", label: "Updates" },
                  { id: "contact", label: "How to Contact Us" },
                ]}
              />
            </div>
            <div className="legal-body">
              <Section id="intro">
                <p className="lede" style={{ marginBottom: 16 }}>
                  This Privacy Policy outlines <strong>Sinux Consulting</strong> ("we", "our" or "the Company")
                  practices with respect to information collected from users who access our website at{" "}
                  <a href="/consulting">https://sinuxgroup.com/consulting</a> ("Site"), or
                  otherwise share personal information with us (collectively: "Users").
                </p>
              </Section>

              <Section id="grounds" title="Grounds for Data Collection">
                <p>
                  Processing of your personal information (meaning, any information which may potentially
                  allow your identification with reasonable means; hereinafter "Personal Information") is
                  necessary for the performance of our contractual obligations towards you and providing
                  you with our services, to protect our legitimate interests and for compliance with legal
                  and financial regulatory obligations to which we are subject.
                </p>
                <p>
                  When you use the Site, you consent to the collection, storage, use, disclosure and other
                  uses of your Personal Information as described in this Privacy Policy.
                </p>
                <p>
                  We encourage our Users to carefully read the Privacy Policy and use it to make informed
                  decisions.
                </p>
              </Section>

              <Section id="what" title="What Information We Collect?">
                <ul className="legal-list">
                  <li><strong>Non-personal Information:</strong> Un-identified and non-identifiable
                  information which may be collected via use of the Site (e.g. device, browser, language,
                  usage data).</li>
                  <li><strong>Personal Information:</strong> Individually identifiable data such as IP
                  address, geolocation, device details, and information you voluntarily provide when using
                  our services.</li>
                </ul>
              </Section>

              <Section id="how-receive" title="How Do We Receive Information About You?">
                <ul className="legal-list">
                  <li>When you voluntarily provide personal details (e.g., registering on our Site).</li>
                  <li>When you use or access our Site in connection with services.</li>
                  <li>From third party providers, services, and public registers.</li>
                </ul>
              </Section>

              <Section id="how-use" title="How We Use Information">
                <ul className="legal-list">
                  <li>Communicating with you regarding services, updates, and support.</li>
                  <li>Providing advertisements and marketing relevant to you.</li>
                  <li>Conducting analytics and research to improve our Site.</li>
                  <li>Sharing information with trusted third-party providers for hosting, analytics, and support.</li>
                </ul>
              </Section>

              <Section id="rights" title="User Rights">
                <ul className="legal-list">
                  <li>Access and receive confirmation of your personal information.</li>
                  <li>Receive a copy of your data in machine-readable format.</li>
                  <li>Request rectification or erasure of your data.</li>
                  <li>Object to or restrict processing of your data.</li>
                  <li>Lodge a complaint with a supervisory authority.</li>
                </ul>
              </Section>

              <Section id="retention" title="Retention">
                <p>
                  We will retain your personal information as long as necessary to provide services and
                  comply with legal obligations. Data no longer required will be safely deleted.
                </p>
              </Section>

              <Section id="cookies" title="Cookies">
                <p>
                  We and our trusted partners use cookies to enhance site performance, remember preferences,
                  and serve relevant ads. You may disable cookies, but some features may not function properly.
                </p>
              </Section>

              <Section id="third-party" title="Third-Party Collection">
                <p>
                  Our policy only applies to information collected by us. Other third parties may have their
                  own privacy policies, which we encourage you to review.
                </p>
              </Section>

              <Section id="safeguard" title="How We Safeguard Your Information">
                <p>
                  We implement industry-standard security measures to protect your information. However, no
                  method of transmission or storage is 100% secure.
                </p>
              </Section>

              <Section id="eea" title="Transfer of Data Outside EEA">
                <p>
                  Some data may be transferred outside the EEA to trusted providers in jurisdictions with
                  adequate protections.
                </p>
              </Section>

              <Section id="ads" title="Advertisements">
                <p>
                  We may use third-party advertising technologies to show ads based on your site usage. You
                  can opt out via <a href="http://optout.networkadvertising.org/#!/" target="_blank" rel="noreferrer">NAI</a>{" "}
                  or <a href="http://optout.aboutads.info/#!/" target="_blank" rel="noreferrer">DAA</a>.
                </p>
              </Section>

              <Section id="marketing" title="Marketing">
                <p>We may send promotional offers we believe are relevant. You may unsubscribe at any time.</p>
              </Section>

              <Section id="corp" title="Corporate Transactions">
                <p>
                  In case of a merger, acquisition, or sale, your information may be transferred as part of
                  that transaction.
                </p>
              </Section>

              <Section id="minors" title="Minors">
                <p>The Site is not directed to children. We do not knowingly collect data from minors.</p>
              </Section>

              <Section id="updates" title="Updates to This Privacy Policy">
                <p>
                  We reserve the right to amend this policy. Updates will be effective immediately upon posting.
                </p>
              </Section>

              <Section id="contact" title="How to Contact Us">
                <p>If you have questions, please contact us at:</p>
                <ContactCard />
              </Section>
            </div>
          </div>
        </div>
      </section>

      <Footer variant="consult" />
    </div>
  );
}

// ============================================================
// TERMS & CONDITIONS
// ============================================================
function TermsPage() {
  const tabs = [
    { id: "general", label: "General Clients" },
    { id: "maintenance", label: "Maintenance & Recurring" },
    { id: "us", label: "US Subscription" },
  ];
  const [active, setActive] = useStateL("general");

  return (
    <div className="page-enter theme-consult" data-screen-label="Terms & Conditions">
      <SiteHeader current="" theme="consult" />
      <LegalHeader
        eyebrow="Legal · Terms"
        title="Terms & Conditions"
        updated="Last modified: February 2026"
        crumbs={[{ label: "Sinux Group", href: "#/" }, { label: "Terms & Conditions" }]}
      />

      {/* Tabs */}
      <div className="sub-nav" style={{ top: 72 }}>
        <div className="inner">
          {tabs.map((t) => (
            <a
              key={t.id}
              href={`#${t.id}`}
              onClick={(e) => { e.preventDefault(); setActive(t.id); }}
              className={active === t.id ? "active" : ""}
            >
              {t.label}
            </a>
          ))}
        </div>
      </div>

      <section className="section-py">
        <div className="container">
          {active === "general" && <GeneralTerms />}
          {active === "maintenance" && <MaintenanceTerms />}
          {active === "us" && <USTerms />}
        </div>
      </section>

      <Footer variant="consult" />
    </div>
  );
}

// ============================================================
// TERMS SUB-SECTIONS
// ============================================================
function GeneralTerms() {
  return (
    <div className="editorial-two-col">
      <div>
        <TocSidebar
          items={[
            { id: "g1", label: "1. General" },
            { id: "g2", label: "2. Quotations" },
            { id: "g3", label: "3. Invoicing & Payment" },
            { id: "g4", label: "4. Scope of Work" },
            { id: "g5", label: "5. Refunds & Cancellations" },
            { id: "g6", label: "6. Liability & Warranty" },
            { id: "g7", label: "7. Confidentiality" },
            { id: "g8", label: "8. Intellectual Property" },
            { id: "g9", label: "9. Force Majeure" },
            { id: "g10", label: "10. Governing Law" },
          ]}
        />
      </div>
      <div className="legal-body">
        <h2 className="h3" style={{ marginBottom: 12, fontSize: "clamp(20px,2.4vw,28px)" }}>General Clientele — Terms and Conditions</h2>
        <p className="text-muted" style={{ marginBottom: 28 }}>
          These Terms & Conditions ("T&Cs") govern the supply of services by <strong>Sinux Consulting</strong> to the Client.
        </p>

        <Section id="g1" title="1. General">
          <p><strong>1.1</strong> These T&Cs govern the supply of services by <strong>Sinux Consulting</strong> to the Client.</p>
          <p>For clarity, references to services, deliverables, or work performed by <strong>Sinux Consulting</strong> include <strong>digital solutions and digital deliverables</strong>, including but not limited to websites, web applications, software platforms, mobile applications, internal tools, and any related digital systems or services provided by <strong>Sinux Consulting</strong>.</p>
          <p><strong>1.2</strong> By making payment on any invoice, quotation, or payment request issued by Sinux Consulting, the Client confirms acceptance of and agreement to be legally bound by these T&Cs.</p>
        </Section>

        <Section id="g2" title="2. Quotations">
          <p><strong>2.1</strong> All quotations provided by Sinux Consulting are valid for <strong>14 days</strong> from the date of issuance unless otherwise specified.</p>
          <p><strong>2.2</strong> Prices in the quotation are subject to change based on project requirements, additional services requested, or external factors that may affect costs.</p>
          <p><strong>2.3</strong> Any modifications to the quoted work may result in a price adjustment and a revised quotation.</p>
        </Section>

        <Section id="g3" title="3. Invoicing & Payment">
          <p><strong>3.1</strong> Payment is due within the stipulated date stated in the invoice. Payment terms may vary depending on the specific service provided.</p>
          <p><strong>3.2</strong> Late payments shall incur a penalty fee of <strong>1.5% per month (18% per annum)</strong> or the maximum rate allowed under applicable Malaysian law.</p>
          <p><strong>3.3</strong> All payments must be made in the currency specified in the invoice or as previously discussed and agreed upon in writing.</p>
          <p><strong>3.4</strong> A <strong>5% surcharge</strong> will be applied to all invoices paid via Stripe or other online payment gateways to account for processing and international transaction fees.</p>
          <p><strong>3.5</strong> For bank transfers, the Client is responsible for covering all transfer fees and ensuring that Sinux Consulting receives the full invoiced amount (nett). Any shortfall due to bank charges, intermediary fees, or foreign exchange deductions shall be treated as a pending balance and must be cleared by the Client within <strong>7 days</strong> of notification.</p>
          <p><strong>3.6</strong> Invoices are considered fully settled only when the total nett amount stated has been received in full by Sinux Consulting, free of deductions or intermediary charges.</p>
        </Section>

        <Section id="g4" title="4. Scope of Work & Digital Deliverables">
          <p><strong>4.1</strong> The scope of work and digital deliverables shall be defined in the quotation, invoice, or written communication issued by Sinux Consulting prior to commencement of work.</p>
          <p><strong>4.2</strong> These Terms & Conditions apply to all one-off services and digital solutions provided by Sinux Consulting. Maintenance and recurring services shall be governed separately under the "Maintenance & Recurring Services – Terms & Conditions Addendum".</p>
          <p><strong>4.3</strong> Additional requests beyond the defined scope shall be subject to a separate quotation and additional charges.</p>
          <p><strong>4.4</strong> Digital deliverables shall be provided in accordance with the communicated timeline unless delays occur due to unforeseen circumstances beyond Sinux Consulting's control.</p>
          <p><strong>4.5</strong> Upon receipt of payment, the Client shall complete onboarding requirements and provide all necessary information, content, access credentials, branding materials, and formal requirements within <strong>twenty-one (21) calendar days</strong>, unless otherwise agreed in writing. If the Client fails to provide the required onboarding materials within this period, Sinux Consulting may proceed with development based on the information and direction available at the time.</p>
          <p>Any structural changes, content revisions, or requirement modifications submitted after development has commenced may be treated as additional scope and subject to separate quotation, additional charges, or inclusion under an active maintenance plan (if applicable). Failure to complete onboarding within the stated period shall not delay project timelines, development schedules, or invoicing obligations.</p>
        </Section>

        <Section id="g5" title="5. Refunds & Cancellations">
          <p><strong>5.1</strong> Cancellations after confirmation of an order shall be subject to a cancellation fee of up to <strong>5% of the total contract value</strong>, as permitted under the Malaysian Consumer Protection Act 1999.</p>
          <p><strong>5.2</strong> No refunds shall be provided for services already rendered.</p>
          <p><strong>5.3</strong> Any disputes regarding delivered digital deliverables or services must be raised within <strong>14 days</strong> of receipt.</p>
        </Section>

        <Section id="g6" title="6. Liability & Warranty">
          <p><strong>6.1</strong> Sinux Consulting primarily provides services and digital solutions, and shall not be liable for any indirect, incidental, or consequential damages arising from the use of its services or digital deliverables.</p>
          <p><strong>6.2</strong> Any defects or issues must be reported within <strong>14 days</strong> of receipt, and corrections shall be made at the sole discretion of Sinux Consulting.</p>
        </Section>

        <Section id="g7" title="7. Confidentiality">
          <p><strong>7.1</strong> Both parties agree to maintain the confidentiality of all proprietary information shared during the course of the business relationship.</p>
        </Section>

        <Section id="g8" title="8. Intellectual Property">
          <p><strong>8.1</strong> All intellectual property, including all digital deliverables, shall remain the property of Sinux Consulting until full payment is received.</p>
          <p><strong>8.2</strong> Upon full payment, the Client is granted a <strong>non-exclusive, non-transferable</strong> right to use the digital deliverables.</p>
        </Section>

        <Section id="g9" title="9. Force Majeure">
          <p><strong>9.1</strong> Sinux Consulting shall not be held responsible for delays or failures in performance due to unforeseen circumstances beyond its control, including but not limited to natural disasters, strikes, pandemics, or government regulations.</p>
        </Section>

        <Section id="g10" title="10. Governing Law">
          <p><strong>10.1</strong> These Terms & Conditions shall be governed by and interpreted in accordance with the <strong>laws of Malaysia</strong>.</p>
          <p><strong>10.2</strong> Any disputes arising under these T&Cs shall be resolved in the appropriate courts of Malaysia.</p>
        </Section>

        <ContactCard />
      </div>
    </div>
  );
}

function MaintenanceTerms() {
  return (
    <div className="editorial-two-col">
      <div>
        <TocSidebar
          items={[
            { id: "m1", label: "1. Scope of Maintenance" },
            { id: "m2", label: "2. Acceptance & Billing" },
            { id: "m3", label: "3. Suspension of Services" },
            { id: "m4", label: "4. Termination & Notice" },
            { id: "m5", label: "5. Relationship to Main T&Cs" },
          ]}
        />
      </div>
      <div className="legal-body">
        <h2 className="h3" style={{ marginBottom: 12, fontSize: "clamp(20px,2.4vw,28px)" }}>Maintenance & Recurring Services — T&Cs Addendum</h2>
        <p className="text-muted" style={{ marginBottom: 28 }}>
          This Addendum governs maintenance or recurring services provided by Sinux Consulting.
        </p>

        <Section id="m1" title="1. Scope of Maintenance Services">
          <p><strong>1.1</strong> Maintenance or recurring services may include, but are not limited to:</p>
          <ul className="legal-list">
            <li>Website or application updates</li>
            <li>Hosting and infrastructure management</li>
            <li>Bug fixes and minor enhancements</li>
            <li>Monitoring, backups, or security updates</li>
            <li>Ongoing technical support</li>
          </ul>
          <p><strong>1.2</strong> The scope, inclusions, and limitations of any maintenance or recurring service shall be defined in the invoice, service description, or written communication issued by Sinux Consulting.</p>
          <p><strong>1.3</strong> Any work outside the defined maintenance scope shall be quoted and billed separately.</p>
        </Section>

        <Section id="m2" title="2. Acceptance & Billing">
          <p><strong>2.1</strong> By making payment for any maintenance or recurring service, the Client agrees to be legally bound by this Addendum and the General Clientele — Terms & Conditions.</p>
          <p><strong>2.2</strong> Maintenance services are billed on a monthly, quarterly, or annual basis, as specified in the invoice or payment request.</p>
          <p><strong>2.3</strong> Billing shall commence on the date stated in the invoice or payment confirmation.</p>
        </Section>

        <Section id="m3" title="3. Suspension of Services">
          <p><strong>3.1</strong> Sinux Consulting reserves the right to suspend maintenance or recurring services if payment is overdue beyond <strong>14 days</strong>.</p>
          <p><strong>3.2</strong> Suspension of services does not waive the Client's obligation to settle outstanding amounts.</p>
          <p><strong>3.3</strong> Reactivation of suspended services may be subject to administrative or reinstatement fees.</p>
        </Section>

        <Section id="m4" title="4. Termination & Notice Period">
          <p><strong>4.1</strong> Either party may terminate a maintenance or recurring service by providing <strong>written notice</strong>, subject to the following notice periods:</p>
          <ul className="legal-list">
            <li><strong>60 days' notice</strong> for Clients on maintenance services for <strong>less than 6 months</strong></li>
            <li><strong>30 days' notice</strong> for Clients on maintenance services for <strong>6 months or more</strong></li>
          </ul>
          <p><strong>4.2</strong> Fees for the active notice period remain payable and are <strong>non-refundable</strong>.</p>
          <p><strong>4.3</strong> Termination does not affect any outstanding payments or obligations incurred prior to termination.</p>
        </Section>

        <Section id="m5" title="5. Relationship to Main Terms & Conditions">
          <p><strong>5.1</strong> This Addendum forms part of and should be read together with the General Clientele — Terms & Conditions.</p>
          <p><strong>5.2</strong> In the event of a conflict, this Addendum shall apply only to maintenance and recurring services.</p>
        </Section>

        <ContactCard />
      </div>
    </div>
  );
}

function USTerms() {
  return (
    <div className="editorial-two-col">
      <div>
        <TocSidebar
          items={[
            { id: "u1", label: "Mutual Responsibilities" },
            { id: "u2", label: "Services Description" },
            { id: "u3", label: "Additional Services & Charges" },
            { id: "u4", label: "Scope & Limitations" },
            { id: "u5", label: "Subscription Inclusions" },
            { id: "u6", label: "Content and Assets" },
            { id: "u7", label: "Domain & Hosting" },
            { id: "u8", label: "Intellectual Property" },
            { id: "u9", label: "Updates & Change Requests" },
            { id: "u10", label: "Payment Terms" },
            { id: "u11", label: "Cancellation" },
            { id: "u12", label: "Limitation of Liability" },
            { id: "u13", label: "Governing Law" },
          ]}
        />
      </div>
      <div className="legal-body">
        <h2 className="h3" style={{ marginBottom: 12, fontSize: "clamp(20px,2.4vw,28px)" }}>US Subscription Clientele — Terms and Conditions</h2>
        <p className="text-muted" style={{ marginBottom: 28 }}>
          By hiring <strong>Sinux Consulting</strong>, you agree to the following terms on behalf of your company or organization.
          This agreement covers the design, development, and maintenance of a website and related services on a
          <strong> 12-month commitment, automatically renewable</strong>. If you do not agree to abide by these terms, please do not use our services.
        </p>

        <Section id="u1" title="Mutual Responsibilities">
          <h4 className="h4" style={{ marginTop: 12, marginBottom: 8 }}>Client Responsibilities</h4>
          <ul className="legal-list">
            <li>Provide all necessary text, images, and business information in the requested format and on time.</li>
            <li>Review work promptly, give timely feedback, and provide sign-off approvals.</li>
            <li>Comply with the agreed payment schedule and surcharges.</li>
          </ul>
          <h4 className="h4" style={{ marginTop: 20, marginBottom: 8 }}>Sinux Consulting Responsibilities</h4>
          <ul className="legal-list">
            <li>Deliver professional services in a timely and responsive manner.</li>
            <li>Maintain the confidentiality of all client information.</li>
            <li>Provide updates and support as described, while not being held responsible for delays caused by late content or approvals.</li>
          </ul>
        </Section>

        <Section id="u2" title="Services Description">
          <p>Our services include, but are not limited to:</p>
          <ul className="legal-list">
            <li>Website design, layout, and functionality development</li>
            <li>Ongoing text, image, and promotional updates</li>
            <li>Local SEO, Google Business Profile setup, and optimization</li>
            <li>Hosting, SSL certificate, analytics reporting, and support</li>
            <li>Accessibility tools and a standard privacy policy template (non-legal)</li>
            <li>One campaign landing page (e.g., Facebook or Google Ads)</li>
          </ul>
        </Section>

        <Section id="u3" title="Additional Services & Charges">
          <ul className="legal-list">
            <li><strong>Physical location landing pages:</strong> $75/month per location</li>
            <li><strong>Service area expansion pages:</strong> $50/month per area</li>
            <li><strong>Franchise microsites:</strong> $150/month per microsite (up to 6 pages)</li>
            <li><strong>Blog posts (fully written):</strong> $50/month per blog</li>
            <li><strong>Advanced custom work (outside scope):</strong> $100/hour</li>
          </ul>
          <p>These charges are added on top of your base subscription of <strong>$499/month</strong>, which covers the core website package. All add-ons will be billed monthly.</p>
        </Section>

        <Section id="u4" title="Project Scope and Limitations">
          <ul className="legal-list">
            <li>Testing will be done on current versions of all major browsers (Apple, Google, Microsoft, Mozilla).</li>
            <li>We do not test on outdated browsers (e.g., Internet Explorer 6/7) unless specifically requested. Additional coding for such support will be charged hourly.</li>
            <li>Custom plug-ins, third-party scripts, or external databases may incur extra charges — we will notify you before proceeding.</li>
          </ul>
        </Section>

        <Section id="u5" title="Subscription Inclusions">
          <p>Each active subscription includes:</p>
          <ul className="legal-list">
            <li>A custom-built, responsive website (up to 25 pages; additional pages billable)</li>
            <li>Local and organic SEO</li>
            <li>Hosting & SSL certificate</li>
            <li>Google Business Profile setup & optimization</li>
            <li>Ongoing support, performance monitoring, and basic updates</li>
            <li>Privacy Policy and Accessibility Statement templates (non-legal)</li>
            <li>Website accessibility tools</li>
            <li>One landing page for external campaigns (e.g., Google Ads, Facebook)</li>
          </ul>
        </Section>

        <Section id="u6" title="Content and Assets">
          <h4 className="h4" style={{ marginTop: 12, marginBottom: 8 }}>Text Content</h4>
          <ul className="legal-list">
            <li>We will prepare initial content for up to 15 pages (home, service, and service area pages) if not provided.</li>
            <li>Client must review and approve content before launch.</li>
            <li>After launch, clients are responsible for providing original content for updates. Blog writing is only included if the Blog Add-On is subscribed.</li>
          </ul>
          <h4 className="h4" style={{ marginTop: 20, marginBottom: 8 }}>Photographs</h4>
          <ul className="legal-list">
            <li>Clients may provide high-quality digital photos.</li>
            <li>Where necessary, stock photos will be used.</li>
          </ul>
        </Section>

        <Section id="u7" title="Domain & Hosting">
          <ul className="legal-list">
            <li>Websites must be hosted on our designated servers as part of the subscription.</li>
            <li>Clients must either supply their own domain or request us to purchase one. Domain costs are billed separately and must be maintained annually by the client.</li>
          </ul>
        </Section>

        <Section id="u8" title="Intellectual Property & Copyrights">
          <ul className="legal-list">
            <li>Clients confirm they own or have permission to use all submitted media, trademarks, text, and other materials.</li>
          </ul>
          <p>Upon first payment:</p>
          <ul className="legal-list">
            <li>Clients own all submitted and published content.</li>
            <li>Sinux Consulting retains ownership of the website design, code, and system logic.</li>
            <li>The client is granted a <strong>license to use the website</strong> during the active subscription.</li>
          </ul>
          <p>Upon cancellation or non-payment, that license is revoked, and the website is taken offline. We may showcase completed work in our portfolio or write case studies, but never share confidential client information.</p>
        </Section>

        <Section id="u9" title="Updates and Change Requests">
          <ul className="legal-list">
            <li><strong>Included updates:</strong> text/image edits, adding/removing pages, minor content changes, promotions, etc.</li>
            <li><strong>Excluded:</strong> full redesigns or structural layout changes (billed separately).</li>
            <li>All change requests must be submitted through our official support system (not via WhatsApp/text/personal DMs).</li>
            <li>Updates will be completed within 1–3 business days on average, depending on complexity and queue.</li>
          </ul>
        </Section>

        <Section id="u10" title="Payment Terms">
          <ul className="legal-list">
            <li>First payment is due upfront. ($499/month for 1-25 page website)</li>
            <li>Subscription and add-ons are billed monthly.</li>
            <li>If payment is overdue by <strong>14+ days</strong>, your website will be taken offline until payment is settled in full.</li>
            <li><strong>All payments are final and non-refundable.</strong></li>
            <li>A <strong>5% surcharge</strong> is applied to your total monthly invoice to cover processing fees, cross-border charges, and currency conversion.</li>
            <li>Clients are responsible for all transaction fees, including bank charges, Stripe, PayPal, or currency exchange differences.</li>
          </ul>
        </Section>

        <Section id="u11" title="Cancellation">
          <ul className="legal-list">
            <li>Your subscription is valid for <strong>12 months from the date of your first payment</strong>, and automatically renews unless terminated.</li>
            <li>Cancellation requires a <strong>60-day written notice via email</strong>.</li>
            <li>If you cancel before the 12-month term ends, you will be charged a <strong>penalty equal to one (1) month of your current subscription</strong>.</li>
            <li>Upon cancellation, hosting and services will end. You retain ownership of your content (text & images provided by you). The website structure and backend remain the property of Sinux Consulting and cannot be reused or transferred.</li>
          </ul>
        </Section>

        <Section id="u12" title="Limitation of Liability">
          <ul className="legal-list">
            <li>We do not guarantee uninterrupted or error-free functionality at all times.</li>
            <li>We are not liable for damages caused by downtime, platform limitations, third-party integrations, or client-provided content (including service guarantees, privacy statements, or accessibility compliance).</li>
            <li>Our suggested privacy and accessibility templates are provided as-is and do not constitute legal advice.</li>
          </ul>
        </Section>

        <Section id="u13" title="Governing Law">
          <p>
            This agreement is governed primarily under the laws of <strong>Malaysia</strong>, where Sinux Consulting is legally registered.
            It is also enforceable under applicable laws of the <strong>United States</strong> for clients operating there. By engaging with our
            services, you consent to the jurisdiction of both Malaysian and U.S. courts, with <strong>Malaysia taking precedence</strong> in any
            legal matter or interpretation. If any provision is deemed invalid, remaining provisions remain enforceable.
          </p>
        </Section>

        <ContactCard />
      </div>
    </div>
  );
}

// ============================================================
// SHARED LEGAL UI COMPONENTS
// ============================================================
function LegalHeader({ eyebrow, title, updated, crumbs }) {
  return (
    <section className="hero" style={{ minHeight: "auto", paddingBlock: "clamp(80px, 14vh, 160px)" }}>
      <div className="hero-bg">
        <div className="orb" style={{
          width: "40vw", height: "40vw", maxWidth: 600, maxHeight: 600,
          top: "-20%", right: "-10%",
          background: "radial-gradient(circle, color-mix(in oklab, var(--accent) 50%, transparent), transparent 70%)",
        }} />
        <svg className="hexgrid" width="100%" height="100%" preserveAspectRatio="xMidYMid slice">
          <defs>
            <pattern id="lhex" width="60" height="69.28" patternUnits="userSpaceOnUse">
              <path d="M30 0 L60 17.32 L60 51.96 L30 69.28 L0 51.96 L0 17.32 Z" fill="none" stroke="currentColor" strokeWidth="0.5" strokeOpacity="0.3"/>
            </pattern>
          </defs>
          <rect width="100%" height="100%" fill="url(#lhex)" style={{ color: "var(--accent)" }}/>
        </svg>
      </div>
      <div className="container hero-content">
        <Reveal>
          <nav style={{ display: "flex", gap: 10, alignItems: "center", color: "var(--ink-3)", fontSize: 11, letterSpacing: "0.12em", textTransform: "uppercase", marginBottom: 16 }}>
            {crumbs.map((c, i) => (
              <React.Fragment key={i}>
                {i > 0 && <span style={{ color: "var(--ink-4)" }}>/</span>}
                {c.href
                  ? <a href={c.href} style={{ color: "var(--ink-2)", textDecoration: "none" }}>{c.label}</a>
                  : <span style={{ color: "var(--ink)" }}>{c.label}</span>}
              </React.Fragment>
            ))}
          </nav>
          <span className="eyebrow">{eyebrow}</span>
          <h1 className="h1" style={{ marginTop: 16, marginBottom: 16, fontSize: "clamp(36px, 6vw, 80px)" }}>{title}</h1>
          <div style={{ color: "var(--ink-3)", fontSize: 13, letterSpacing: "0.04em" }}>{updated}</div>
        </Reveal>
      </div>
    </section>
  );
}

function TocSidebar({ items }) {
  return (
    <div className="toc">
      <div className="footer-h">On This Page</div>
      <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 4 }}>
        {items.map((i) => (
          <li key={i.id}>
            <a href={`#${i.id}`} style={{ display: "block", padding: "6px 10px", color: "var(--ink-3)", textDecoration: "none", fontSize: 13, borderLeft: "1px solid var(--line-2)", transition: "color .2s, border-color .2s" }}>
              {i.label}
            </a>
          </li>
        ))}
      </ul>
    </div>
  );
}

function Section({ id, title, children }) {
  return (
    <Reveal as="section">
      <div id={id} className="legal-section" style={{ scrollMarginTop: 140 }}>
        {title && <h3 className="h4" style={{ fontSize: "clamp(17px,1.8vw,22px)", marginBottom: 14, fontFamily: "'Michroma',sans-serif", fontWeight: 400, letterSpacing: "0.02em" }}>{title}</h3>}
        <div className="legal-prose">{children}</div>
      </div>
    </Reveal>
  );
}

function ContactCard() {
  return (
    <div className="card" style={{ marginTop: 36, padding: "clamp(24px, 3vw, 32px)" }}>
      <div className="eyebrow" style={{ color: "var(--accent)" }}>Sinux Consulting</div>
      <h4 className="h4" style={{ marginTop: 10, marginBottom: 14, fontSize: "clamp(18px,2vw,22px)" }}>
        Questions about these terms?
      </h4>
      <div style={{ display: "flex", flexDirection: "column", gap: 8, color: "var(--ink-2)", fontSize: 14 }}>
        <div>📧 <a href="mailto:info@sinuxconsulting.com" style={{ color: "var(--accent)" }}>info@sinuxconsulting.com</a></div>
        <div>🌐 <a href="/consulting" style={{ color: "var(--accent)" }}>sinuxgroup.com/consulting</a></div>
        <div>📍 Kuala Lumpur, Malaysia</div>
      </div>
    </div>
  );
}

window.PrivacyPage = PrivacyPage;
window.TermsPage = TermsPage;