/* Static pages: About SunFront + Terms & Conditions */

/* ── About SunFront ── */
function AboutPage() {
  return (
    <main style={{ paddingBottom: 80 }}>
      <InnerPageBanner />
      <div style={{ maxWidth: 780, margin: '0 auto', padding: 'clamp(32px,5vw,56px) clamp(16px,4vw,28px)' }}>

        <Eyebrow>About us</Eyebrow>
        <h1 className="font-display" style={{ fontSize: 'clamp(28px,6vw,52px)', lineHeight: 1.05, margin: '12px 0 32px', letterSpacing: '-0.02em' }}>
          SunFront Pvt Ltd
        </h1>

        {/* History */}
        <section style={{ marginBottom: 40 }}>
          <h2 className="font-display" style={{ fontSize: 22, margin: '0 0 12px', letterSpacing: '-0.01em' }}>Since 1989</h2>
          <p style={{ fontSize: 15, color: 'var(--grey-700)', lineHeight: 1.65, margin: 0 }}>
            SunFront has been part of daily life in the Maldives since 1989. What started as a small retail
            operation has grown into one of the country's most trusted household and lifestyle brands,
            serving customers across Male' and the islands for over three decades.
          </p>
        </section>

        {/* Divider */}
        <div style={{ height: 1, background: 'var(--grey-200)', marginBottom: 40 }} />

        {/* What we sell */}
        <section style={{ marginBottom: 40 }}>
          <h2 className="font-display" style={{ fontSize: 22, margin: '0 0 12px', letterSpacing: '-0.01em' }}>What we offer</h2>
          <p style={{ fontSize: 15, color: 'var(--grey-700)', lineHeight: 1.65, margin: '0 0 16px' }}>
            SunFront outlets carry a wide range of quality products across home essentials, electronics,
            furniture, and lifestyle goods. Our focus has always been the same: quality products at fair
            prices, backed by trusted service.
          </p>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 10 }}>
            {['Home Essentials', 'Electronics', 'Furniture', 'Lifestyle & Gifts', 'Kitchen & Appliances'].map(cat => (
              <span key={cat} style={{
                background: 'var(--orange-50)', color: 'var(--orange-dark)',
                border: '1px solid var(--orange-100)',
                borderRadius: 6, padding: '6px 14px',
                fontSize: 13, fontWeight: 600,
              }}>{cat}</span>
            ))}
          </div>
        </section>

        <div style={{ height: 1, background: 'var(--grey-200)', marginBottom: 40 }} />

        {/* Campaign context */}
        <section style={{ marginBottom: 40 }}>
          <h2 className="font-display" style={{ fontSize: 22, margin: '0 0 12px', letterSpacing: '-0.01em' }}>World Cup Foari 2026</h2>
          <p style={{ fontSize: 15, color: 'var(--grey-700)', lineHeight: 1.65, margin: 0 }}>
            SunFront World Cup Foari 2026 is our way of bringing the excitement of the FIFA World Cup
            directly to our customers. Every qualifying purchase earns a free prediction slot across all
            104 matches. Correct predictions enter customers into per-match prize draws. This campaign
            is run independently by SunFront and is not affiliated with FIFA or its partners.
          </p>
        </section>

        <div style={{ height: 1, background: 'var(--grey-200)', marginBottom: 40 }} />

        {/* Contact */}
        <section>
          <h2 className="font-display" style={{ fontSize: 22, margin: '0 0 18px', letterSpacing: '-0.01em' }}>Get in touch</h2>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 40, height: 40, background: 'var(--ink)', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name="phone" size={18} color="var(--orange)" />
              </div>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--grey-500)', marginBottom: 3 }}>Hotline</div>
                <a href="tel:+9607815113" style={{ fontSize: 16, fontWeight: 700, color: 'var(--ink)', textDecoration: 'none' }}>+960 781-5113</a>
              </div>
            </div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
              <div style={{ width: 40, height: 40, background: 'var(--ink)', borderRadius: 8, display: 'flex', alignItems: 'center', justifyContent: 'center', flexShrink: 0 }}>
                <Icon name="pin" size={18} color="var(--orange)" />
              </div>
              <div>
                <div style={{ fontSize: 11, fontWeight: 700, letterSpacing: '0.12em', textTransform: 'uppercase', color: 'var(--grey-500)', marginBottom: 3 }}>Website</div>
                <a href="https://sunfront.com.mv" target="_blank" rel="noopener noreferrer" style={{ fontSize: 16, fontWeight: 700, color: 'var(--ink)', textDecoration: 'none' }}>sunfront.com.mv</a>
              </div>
            </div>
          </div>
        </section>

      </div>
    </main>
  );
}

/* ── Terms & Conditions ── */
function TermsPage() {
  const sections = [
    {
      title: 'Eligibility & Entry Requirements',
      items: [
        { label: 'Where to Shop', text: 'Purchases made at any Sunfront retail outlet qualify for the contest.' },
        { label: 'Minimum Spend', text: 'A minimum single-receipt total of MVR 1,000 is required to participate.' },
        {
          label: 'No Bill Combination',
          text: 'Receipts cannot be combined to reach the minimum threshold. Each receipt must independently total MVR 1,000 or more.',
          example: 'A customer cannot combine a receipt of MVR 300 and another of MVR 900 to qualify.',
        },
        {
          label: 'Entry Allocation',
          text: 'Customers earn one (1) prediction entry for every MVR 1,000 spent on a single receipt.',
          example: 'A single receipt totaling MVR 3,999 qualifies for three (3) prediction entries.',
        },
        {
          label: 'Multiple Entries',
          text: 'Entries are tracked by bill number. Customers with multiple qualifying receipts can submit separate predictions for the same match using different eligible bills to increase their chances of winning.',
        },
      ],
    },
    {
      title: 'Predictions & Deadlines',
      items: [
        {
          label: 'Submission Deadline',
          text: 'Predictions for any given match close exactly at the official start time of that specific match. No entries, edits, or modifications will be accepted once the game begins.',
        },
      ],
      sub: {
        title: 'Lucky Draw Categories',
        items: [
          {
            label: 'Grand Prize Lucky Draw',
            text: 'Each correct match prediction earns one (1) entry into the final Grand Prize lucky draw under that specific bill number. The more correct predictions you make, the higher your chances of winning.',
            example: 'If a customer correctly predicts three (3) match outcomes, their bill number will be entered three times into the final draw.',
          },
          {
            label: 'Weekly Prize Lucky Draw',
            text: 'Weekly prizes are awarded throughout the promotion. Each promotional week begins on Saturday at 00:00 hrs. All participants who submitted a prediction during that week regardless of whether their guess was right or wrong will be entered into this draw.',
          },
          {
            label: 'Match Day Prize Lucky Draw',
            text: "Prizes are awarded for each match day (which may feature two or more matches). All participants who submitted a prediction for that day's matches regardless of whether their guess was right or wrong will be entered into this draw.",
          },
        ],
      },
    },
    {
      title: 'Prize Claim & Verification',
      items: [
        {
          label: 'Registered Information',
          text: 'While participants may use any mobile number to submit their predictions, prizes will strictly be awarded to the individual whose name and contact details are registered at the time of purchase and printed on the original receipt.',
        },
        {
          label: 'Returns and Refunds',
          text: 'Items returned for a refund are ineligible for the contest. Any prizes won using a refunded or returned receipt will be forfeited.',
        },
        {
          label: 'Proof of Purchase',
          text: 'To successfully claim a prize, winners must present either: The original physical receipt, OR A clear, legible photograph of the original receipt.',
        },
      ],
    },
    {
      title: 'General Conditions',
      items: [
        { text: 'The organizer reserves the right to verify the validity of all entries and disqualify any participant suspected of fraud, tampering, or violating these Terms & Conditions.' },
        { text: 'All decisions made by the organizer regarding contest operations, rule interpretations, and prize distribution are final and binding.' },
      ],
    },
  ];

  const renderItems = (items) => (
    <ul style={{ margin: 0, padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 14 }}>
      {items.map((item, ii) => (
        <li key={ii} style={{ display: 'flex', gap: 12, alignItems: 'flex-start', fontSize: 15, color: 'var(--grey-700)', lineHeight: 1.6 }}>
          <span style={{ width: 6, height: 6, borderRadius: '50%', background: 'var(--orange)', marginTop: 8, flexShrink: 0 }} />
          <div>
            {item.label && <strong style={{ color: 'var(--ink)', fontWeight: 700 }}>{item.label}: </strong>}
            {item.text}
            {item.example && (
              <div style={{ marginTop: 8, padding: '10px 14px', background: 'var(--grey-50)', borderLeft: '3px solid var(--orange)', borderRadius: 4, fontSize: 13.5, color: 'var(--grey-600)', fontStyle: 'italic' }}>
                {item.example}
              </div>
            )}
          </div>
        </li>
      ))}
    </ul>
  );

  return (
    <main style={{ paddingBottom: 80 }}>
      <InnerPageBanner />
      <div style={{ maxWidth: 780, margin: '0 auto', padding: 'clamp(32px,5vw,56px) clamp(16px,4vw,28px)' }}>

        <Eyebrow>Legal</Eyebrow>
        <h1 className="font-display" style={{ fontSize: 'clamp(28px,6vw,52px)', lineHeight: 1.05, margin: '12px 0 8px', letterSpacing: '-0.02em' }}>
          Terms &amp; Conditions
        </h1>
        <p style={{ fontSize: 13, color: 'var(--grey-400)', margin: '0 0 40px', fontWeight: 500 }}>
          SunFront World Cup Foari 2026 campaign
        </p>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 36 }}>
          {sections.map((s, si) => (
            <section key={si}>
              <h2 className="font-display" style={{ fontSize: 19, margin: '0 0 14px', letterSpacing: '-0.01em', display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ width: 28, height: 28, background: 'var(--orange)', borderRadius: 4, display: 'inline-flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, fontWeight: 800, color: '#fff', flexShrink: 0 }}>
                  {String(si + 1).padStart(2, '0')}
                </span>
                {s.title}
              </h2>
              {renderItems(s.items)}
              {s.sub && (
                <div style={{ marginTop: 22, marginLeft: 40, paddingLeft: 16, borderLeft: '2px solid var(--grey-200)' }}>
                  <h3 className="font-display" style={{ fontSize: 14, margin: '0 0 12px', letterSpacing: '0.06em', textTransform: 'uppercase', color: 'var(--grey-500)' }}>
                    {s.sub.title}
                  </h3>
                  {renderItems(s.sub.items)}
                </div>
              )}
            </section>
          ))}
        </div>

        <div style={{ marginTop: 48, padding: '20px 24px', background: 'var(--grey-50)', borderRadius: 8, border: '1px solid var(--grey-200)', fontSize: 13, color: 'var(--grey-500)', lineHeight: 1.6 }}>
          Questions about these terms? Call us on <a href="tel:+9607815113" style={{ color: 'var(--ink)', fontWeight: 700 }}>+960 781-5113</a> or visit <a href="https://sunfront.com.mv" target="_blank" rel="noopener noreferrer" style={{ color: 'var(--ink)', fontWeight: 700 }}>sunfront.com.mv</a>.
        </div>

      </div>
    </main>
  );
}

Object.assign(window, { AboutPage, TermsPage });