// ===== Refund & Cancellation Policy — Plasma v3 =====

const REFUND_META = {
  effective: 'Effective 18 June 2026',
  contact: 'info@web-anchor.com',
};

const REFUND_SECTIONS = [
  {
    title: 'Overview',
    body: [
      'WebAnchor ("we", "us") provides custom software development, web applications, websites, and related hosting, support and subscription services. This policy explains how cancellations and refunds work. By engaging our services or subscribing, you agree to this policy.',
    ],
  },
  {
    title: 'Custom development & website projects (once-off)',
    body: [
      'Projects begin with a deposit and/or a paid discovery and scoping phase. This deposit is non-refundable, as it reserves our time and covers initial planning.',
      'Remaining fees are payable per agreed milestones, and payments for completed, delivered milestones are non-refundable. If you cancel a project before completion, you are billed for all work completed up to the cancellation date; any amount paid in excess of completed work is refunded.',
      'A written scope is agreed before each project, and requests outside that scope are quoted separately as new work.',
    ],
  },
  {
    title: 'Warranty on delivered work',
    body: [
      'Delivered work carries a 30-day warranty: defects where the software does not function as agreed are fixed at no charge. New features, changes or additions requested after delivery fall outside the warranty and are quoted as new work.',
    ],
  },
  {
    title: 'Subscriptions, hosting & support plans (recurring)',
    body: [
      'Subscription, hosting and care/support plans are billed in advance, monthly or annually as selected. You may cancel at any time; your plan stays active until the end of the current paid period and then does not renew.',
      'Payments for the current period are non-refundable, and we do not provide partial refunds for unused time within a period. Annual plans run to the end of the current annual term and are not refunded for the remaining term except where required by law.',
    ],
  },
  {
    title: 'Free trials',
    body: [
      'Where a free trial is offered, no payment is taken during the trial. If you do not cancel before the trial ends, the subscription begins and the applicable fee is charged. You may cancel during the trial at any time to avoid being charged.',
    ],
  },
  {
    title: 'Failure to deliver',
    body: [
      'If we are unable to deliver a service you have paid for, we will work with you to resolve it and, where appropriate, provide a fair refund for the affected, undelivered portion.',
    ],
  },
  {
    title: 'How to cancel or request a refund',
    body: [
      'To cancel a subscription or request a refund, contact us at info@web-anchor.com with your business name and the service concerned. We aim to respond within 3 business days.',
    ],
  },
  {
    title: 'Chargebacks',
    body: [
      'If you have a billing concern, please contact us first so we can resolve it directly. Initiating a chargeback without contacting us may result in suspension of services.',
    ],
  },
  {
    title: 'Changes to this policy',
    body: [
      'We may update this policy from time to time. The current version is always available at web-anchor.com/refund-policy.',
    ],
  },
];

function RefundPage() {
  return (
    <Page>
      <PageIntro
        eyebrow="Refund & Cancellation Policy"
        title={<>Clear terms, <span className="grad-text">no fine-print surprises.</span></>}
        sub="How deposits, milestones, subscriptions and refunds work when you engage WebAnchor."
      />
      <section className="section-sm">
        <div className="wrap-tight">
          <div className="row" style={{ gap: 10, marginBottom: 48 }}>
            <span className="pill"><span className="dot"></span>{REFUND_META.effective}</span>
            <a className="pill" href={'mailto:' + REFUND_META.contact} style={{ textDecoration: 'none' }}>
              <Icon.Mail /> {REFUND_META.contact}
            </a>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 44 }}>
            {REFUND_SECTIONS.map((s, i) => (
              <div key={s.title} style={{ display: 'grid', gridTemplateColumns: '64px 1fr', gap: 8 }} className="refund-row">
                <span className="eyebrow no-mark" style={{ paddingTop: 5 }}>{String(i + 1).padStart(2, '0')}</span>
                <div className="col" style={{ gap: 14 }}>
                  <h3 style={{ fontSize: 22 }}>{s.title}</h3>
                  {s.body.map((p, j) => (
                    <p key={j} style={{ fontSize: 15.5, lineHeight: 1.65, color: 'var(--text-dim)', maxWidth: '72ch' }}>{p}</p>
                  ))}
                </div>
              </div>
            ))}
          </div>

          <div className="divider" style={{ margin: '56px 0 28px' }}></div>
          <p style={{ fontSize: 13.5, color: 'var(--text-muted)', maxWidth: '72ch' }}>
            Questions about this policy? Email us at <a href={'mailto:' + REFUND_META.contact} className="u-link" style={{ color: 'var(--violet-deep)' }}>{REFUND_META.contact}</a> and we'll walk you through it.
          </p>
        </div>
      </section>
      <CtaTail />
    </Page>
  );
}

Object.assign(window, { RefundPage });