// Marsan — Utility pages: 404, Thank-you, Privacy/Terms/Cookies/RERA

const NotFoundPage = () => {
  if (window.MarsanMobile && window.MarsanMobile.isMobile && window.MarsanMobile.isMobile()) {
    return <window.MarsanMobile.NotFound />;
  }
  const C = window.MarsanComponents;
  const { Icon } = C;
  return (
    <div className="ms-root" style={{ width: '100%', minHeight: '100vh', background: '#0a1f17', color: '#e8dcc1', position: 'relative', overflow: 'hidden' }}>
      <C.Header active="" light={true} />
      <div style={{ position: 'absolute', top: '20%', right: '-10%', width: 500, height: 500, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(201,165,92,0.18), transparent 70%)',
        animation: 'msFloat 9s ease-in-out infinite' }} />
      <div style={{ position: 'absolute', bottom: '-20%', left: '-10%', width: 600, height: 600, borderRadius: '50%',
        background: 'radial-gradient(circle, rgba(20,76,56,0.6), transparent 70%)',
        animation: 'msFloat 12s ease-in-out infinite reverse' }} />

      <section className="ms-grain" style={{ padding: '120px 56px', maxWidth: 1100, margin: '0 auto', position: 'relative', textAlign: 'center' }}>
        <div className="ms-eyebrow on-dark" style={{ marginBottom: 24, position: 'relative' }}>404 · Off the master plan</div>
        <h1 style={{ fontFamily: 'Cormorant Garamond, serif', fontWeight: 200, fontSize: 240, lineHeight: 0.9, color: '#f6f1e6', margin: '0 0 24px', letterSpacing: '-0.04em', position: 'relative' }}>
          <span style={{ color: '#e2bd6b', fontStyle: 'italic' }}>4</span><span>0</span><span style={{ color: '#e2bd6b', fontStyle: 'italic' }}>4</span>
        </h1>
        <h2 style={{ fontFamily: 'Cormorant Garamond, serif', fontWeight: 300, fontSize: 48, color: '#f6f1e6', margin: '0 0 20px' }}>
          This plot is unallocated.
        </h2>
        <p style={{ fontSize: 16, color: 'rgba(232,220,193,0.7)', maxWidth: 540, margin: '0 auto 40px', lineHeight: 1.7 }}>
          The address you've followed isn't part of our portfolio — perhaps a moved listing, or a typo in the link.
        </p>
        <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap', marginBottom: 56 }}>
          <a href="/properties.html" className="ms-btn ms-btn-primary">Browse Properties <Icon name="arrow" size={14} /></a>
          <a href="https://wa.me/919849999708" target="_blank" rel="noopener" className="ms-btn ms-btn-ghost-dark" style={{ borderColor: 'rgba(201,165,92,0.4)', color: '#e8dcc1' }}><Icon name="whatsapp" size={14} /> Chat with advisor</a>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, textAlign: 'left' }} className="ms-collapse-mobile">
          {[
            { i: 'plot', t: 'Featured plots', d: 'Marsan Vista, Verdane, Boulevard.', href: '/properties.html?cat=Open+Plots' },
            { i: 'villa', t: 'Ready villas', d: 'Estancia, Manor Collection.', href: '/properties.html?cat=Villas' },
            { i: 'sparkle', t: 'Speak to advisor', d: 'A 20-minute consultation, no pitch.', href: '/enquire.html?type=callback' },
          ].map(s => (
            <a key={s.t} href={s.href} style={{ background: 'rgba(255,255,255,0.04)', border: '1px solid rgba(201,165,92,0.25)', padding: 28, cursor: 'pointer', display: 'block', transition: 'all 0.3s', textDecoration: 'none', color: 'inherit' }}>
              <div style={{ width: 36, height: 36, border: '1px solid rgba(201,165,92,0.4)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#e2bd6b', marginBottom: 16 }}>
                <Icon name={s.i} size={16} />
              </div>
              <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 20, color: '#f6f1e6', marginBottom: 6 }}>{s.t}</div>
              <div style={{ fontSize: 12, color: 'rgba(232,220,193,0.65)' }}>{s.d}</div>
            </a>
          ))}
        </div>
      </section>
      <C.Footer />
    </div>
  );
};

const ThankYouPage = () => {
  if (window.MarsanMobile && window.MarsanMobile.isMobile && window.MarsanMobile.isMobile()) {
    return <window.MarsanMobile.Thanks />;
  }
  const C = window.MarsanComponents;
  const { Icon } = C;
  const params = new URLSearchParams(window.location.search);
  const ref = params.get('ref') || ('MSN-LD-' + Math.floor(10000 + Math.random() * 90000));
  return (
    <div className="ms-root" style={{ width: '100%', minHeight: '100vh', background: '#f6f1e6' }}>
      <C.Header active="" light={false} />
      <section style={{ padding: '80px 56px', maxWidth: 1100, margin: '0 auto', textAlign: 'center' }}>
        <div style={{ width: 112, height: 112, borderRadius: '50%', background: 'linear-gradient(135deg, #c9a55c, #e2bd6b)', margin: '0 auto 40px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#0a1f17', boxShadow: '0 0 0 16px rgba(201,165,92,0.15), 0 0 0 32px rgba(201,165,92,0.08)', animation: 'msPulse 2s ease infinite' }}>
          <Icon name="check" size={48} />
        </div>

        <div className="ms-eyebrow" style={{ marginBottom: 16 }}>Thank you · Confirmed</div>
        <h1 className="ms-h1" style={{ fontFamily: 'Cormorant Garamond, serif', fontWeight: 300, fontSize: 72, color: '#0a1f17', margin: '0 0 20px', lineHeight: 1, animation: 'msFadeUp 0.8s ease' }}>
          Your enquiry is<br />with a senior advisor.
        </h1>
        <p style={{ fontSize: 17, color: '#4a4540', maxWidth: 580, margin: '0 auto 32px', lineHeight: 1.7 }}>
          We've routed your brief to <strong style={{ color: '#0a1f17' }}>Karthik Reddy</strong>. He'll reach you within two business hours on your preferred channel — never a call-centre.
        </p>

        <div style={{ display: 'inline-block', padding: '20px 32px', background: '#0a1f17', color: '#e8dcc1', marginBottom: 56, position: 'relative' }} className="ms-grain">
          <div className="ms-meta on-dark" style={{ color: 'rgba(232,220,193,0.6)', marginBottom: 6, position: 'relative' }}>YOUR REFERENCE</div>
          <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 22, color: '#e2bd6b', position: 'relative', letterSpacing: '0.08em' }}>{ref}</div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, marginBottom: 56, background: '#fff', border: '1px solid #d9cfb8', textAlign: 'left' }} className="ms-collapse-mobile">
          {[
            { t: 'Now', l: 'Confirmation sent', d: 'Email & WhatsApp on the way.', state: 'done' },
            { t: 'In 2 hours', l: 'Advisor reaches out', d: 'Karthik will call you.', state: 'next' },
            { t: 'In 24 hours', l: 'Curated 3-property edit', d: 'Brochures & site videos.', state: 'pending' },
          ].map((s, i) => (
            <div key={i} style={{ padding: 28, borderRight: i < 2 ? '1px solid #efe8d8' : 'none', position: 'relative' }}>
              <div style={{ width: 28, height: 28, borderRadius: '50%',
                background: s.state === 'done' ? '#c9a55c' : '#fff',
                border: s.state === 'pending' ? '1px dashed #c9a55c' : '1px solid #c9a55c',
                color: s.state === 'done' ? '#0a1f17' : '#a88841',
                display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 16, fontSize: 12,
                animation: s.state === 'next' ? 'msPulse 2s ease infinite' : 'none',
              }}>
                {s.state === 'done' ? <Icon name="check" size={14} /> : i + 1}
              </div>
              <div className="ms-meta" style={{ color: '#a88841', marginBottom: 6 }}>{s.t}</div>
              <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 20, color: '#0a1f17', marginBottom: 4 }}>{s.l}</div>
              <div style={{ fontSize: 12, color: '#8c857b' }}>{s.d}</div>
            </div>
          ))}
        </div>

        <div className="ms-eyebrow" style={{ marginBottom: 12 }}>While you wait</div>
        <h3 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 32, color: '#0a1f17', margin: '0 0 24px' }}>A few things you may enjoy.</h3>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, textAlign: 'left' }} className="ms-collapse-mobile">
          {[
            { i: 'brochure', t: 'Read the airport-corridor thesis', d: '14-min market report · April 2026', href: '/article.html?slug=airport-corridor-thesis' },
            { i: 'play', t: 'Watch the Marsan Vista walkthrough', d: '4K drone & ground film · 02:48', href: '/gallery.html' },
            { i: 'calendar', t: 'Schedule a chauffeured site visit', d: 'Pickup from anywhere in Hyderabad', href: '/enquire.html?type=visit' },
          ].map(c => (
            <a key={c.t} href={c.href} style={{ background: '#fff', border: '1px solid #d9cfb8', padding: 28, cursor: 'pointer', textDecoration: 'none', color: 'inherit' }}>
              <div style={{ width: 36, height: 36, border: '1px solid #c9a55c', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#a88841', marginBottom: 16 }}>
                <Icon name={c.i} size={16} />
              </div>
              <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 18, color: '#0a1f17', marginBottom: 6 }}>{c.t}</div>
              <div style={{ fontSize: 12, color: '#8c857b' }}>{c.d}</div>
            </a>
          ))}
        </div>
      </section>
      <C.Footer />
    </div>
  );
};

const PrivacyPage = () => {
  if (window.MarsanMobile && window.MarsanMobile.isMobile && window.MarsanMobile.isMobile()) {
    return <window.MarsanMobile.Privacy />;
  }
  const C = window.MarsanComponents;
  const { Icon } = C;
  const params = new URLSearchParams(window.location.search);
  const initial = params.get('tab') || 'privacy';
  const [tab, setTab] = React.useState(initial);

  const SECTIONS = {
    privacy: [
      { h: 'What we collect', b: 'Only the information you actively provide via our enquiry forms — name, mobile, email, budget, property of interest, and any notes you choose to share. We do not collect any sensitive personal information (Aadhaar, PAN, financials) on this website.' },
      { h: 'How it reaches us', b: 'Form submissions are encrypted in transit (TLS 1.3) and signed with HMAC-SHA256 before being POSTed to our internal CRM webhook. The website itself does not retain any personal data beyond a 7-day audit log of webhook delivery status.' },
      { h: 'How we use it', b: 'Solely to respond to your enquiry. A senior advisor will contact you on the channel you indicated. We do not sell, rent, or share your details with any third party.' },
      { h: 'Your rights', b: 'You may request access, correction, or deletion of your data at any time by emailing privacy@marsan.in. We respond within 7 working days.' },
      { h: 'Cookies', b: 'We use only first-party cookies that are strictly necessary for the website to work. marsan.sid keeps Content Studio editors signed in; marsan.cid remembers your saved searches and comparison list. We do not currently run Google Analytics, Meta Pixel, Google Ads, or any other third-party tracking. Full details on the Cookie Policy page.' },
      { h: 'Data retention', b: 'Lead data lives in our CRM for 36 months from last contact, then is anonymised. Webhook delivery logs on the website are purged automatically after 7 days.' },
      { h: 'Contact the DPO', b: 'Anjali Verma · Data Protection Officer · privacy@marsanproperties.com · +91 98499 99708 · Plot 292, Prashanth Hills Colony, Khajaguda · Nanakramguda, Hyderabad 500104.' },
    ],
    terms: [
      { h: 'Use of the website', b: 'This website provides information about Marsan Properties\' real estate offerings. All content is for informational purposes; nothing herein constitutes a binding offer.' },
      { h: 'Property information', b: 'We make every reasonable effort to ensure that property details, prices, plans, and availability shown are accurate at time of publication. Specifications, prices, and availability are subject to change without notice.' },
      { h: 'Imagery & artist impressions', b: 'Renders, master plans, drone images, and walkthrough films may be artist impressions or representative of in-progress construction. Final delivery is governed by the RERA-approved plans.' },
      { h: 'RERA compliance', b: 'Every Marsan project is registered under TS-RERA. The RERA registration number is available on the respective property page.' },
      { h: 'Booking & cancellation', b: 'Token booking is refundable within 21 days minus a 1% processing charge.' },
      { h: 'Limitation of liability', b: 'To the maximum extent permitted by law, Marsan Properties is not liable for indirect, incidental, or consequential losses arising from use of this website.' },
      { h: 'Governing law', b: 'These terms are governed by the laws of India. Any disputes are subject to the exclusive jurisdiction of the courts of Hyderabad, Telangana.' },
    ],
    cookies: [
      { h: 'What are cookies?', b: 'Cookies are small text files placed on your device when you visit our site. We use only the bare minimum required to keep the site working — no third-party advertising or tracking cookies are set without your explicit consent.' },
      { h: 'Strictly necessary — what we actually set', b: 'Two first-party cookies, both set by marsanproperties.com. (1) marsan.sid — a session cookie used to keep authorised editors signed in to the Content Studio (the admin panel). httpOnly, SameSite=Lax, expires after 8 hours of inactivity. (2) marsan.cid — an anonymous identifier used to remember your saved property searches and your comparison list across visits. httpOnly, SameSite=Lax, 12-month expiry. Neither cookie is shared with any third party.' },
      { h: 'Analytics & advertising', b: 'We do not currently run Google Analytics, Meta Pixel, Google Ads, or any other third-party tracking. No advertising cookies are set on this site. If we add analytics in the future, we will update this page and request explicit opt-in consent before any third-party cookies are placed.' },
      { h: 'Manage cookies', b: 'You can clear or block cookies in your browser settings at any time. Disabling marsan.sid will sign you out of the Content Studio. Disabling marsan.cid means your saved searches and comparison list will not persist between sessions. The rest of the site works without either.' },
      { h: 'Questions', b: 'Email privacy@marsan.in for any cookie or data-handling enquiry. Our DPO responds within 7 working days.' },
    ],
    rera: [
      { h: 'Telangana RERA registration', b: 'Marsan Properties Pvt. Ltd. is a CREDAI-affiliated developer registered with TS-RERA under reference TG-RERA-A-2025-0042.' },
      { h: 'Project-level RERA numbers', b: 'Every Marsan project carries its own RERA registration. The number, the approved layout, and quarterly compliance reports are linked on each property page and at rera.telangana.gov.in.' },
      { h: 'Buyer disclosures', b: 'In keeping with TS-RERA 2.0, we publish: title chain (30 yrs), encumbrance certificate, layout approvals (HMDA / DTCP), bank-loan eligibility, escrow account details, and quarterly construction status.' },
      { h: 'Complaint redressal', b: 'Buyers may raise complaints directly at rera.telangana.gov.in. We commit to an internal first-response within 7 working days, and resolution within 30 working days.' },
    ],
  };

  const sections = SECTIONS[tab] || SECTIONS.privacy;
  const TITLES = { privacy: 'Privacy policy.', terms: 'Terms of service.', cookies: 'Cookie policy.', rera: 'RERA disclosure.' };

  return (
    <div className="ms-root" style={{ width: '100%', minHeight: '100vh', background: '#f6f1e6' }}>
      <C.Header active="" light={false} />
      <section style={{ padding: '64px 56px', maxWidth: 1100, margin: '0 auto' }}>
        <div className="ms-eyebrow" style={{ marginBottom: 12 }}>Legal</div>
        <h1 className="ms-h1" style={{ fontFamily: 'Cormorant Garamond, serif', fontWeight: 300, fontSize: 64, color: '#0a1f17', margin: '0 0 32px', lineHeight: 1 }}>{TITLES[tab]}</h1>
        <div style={{ display: 'flex', gap: 24, marginBottom: 32, paddingBottom: 16, borderBottom: '1px solid #d9cfb8', flexWrap: 'wrap' }}>
          {[
            { k: 'privacy', t: 'Privacy Policy' },
            { k: 'terms', t: 'Terms of Service' },
            { k: 'cookies', t: 'Cookie Policy' },
            { k: 'rera', t: 'RERA Disclosure' },
          ].map(t => (
            <button key={t.k} onClick={() => setTab(t.k)} style={{
              background: 'none', border: 'none', padding: '8px 0',
              fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase',
              color: tab === t.k ? '#0a1f17' : '#8c857b',
              borderBottom: tab === t.k ? '2px solid #c9a55c' : '2px solid transparent',
              fontWeight: tab === t.k ? 600 : 400, cursor: 'pointer', fontFamily: 'Inter',
            }}>{t.t}</button>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2.4fr', gap: 56 }} className="ms-collapse-mobile">
          <div style={{ position: 'sticky', top: 32, alignSelf: 'flex-start' }}>
            <div className="ms-meta" style={{ marginBottom: 16 }}>ON THIS PAGE</div>
            {sections.map((s, i) => (
              <a key={s.h} href={'#' + s.h.replace(/\s+/g, '-').toLowerCase()} style={{ display: 'block', padding: '8px 0', fontSize: 13, color: i === 0 ? '#0a1f17' : '#4a4540', borderLeft: i === 0 ? '2px solid #c9a55c' : '2px solid transparent', paddingLeft: 12, marginLeft: -14, cursor: 'pointer', textDecoration: 'none' }}>{s.h}</a>
            ))}
            <div style={{ marginTop: 32, padding: 20, background: '#fff', border: '1px solid #d9cfb8' }}>
              <div className="ms-meta" style={{ marginBottom: 8 }}>LAST UPDATED</div>
              <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 20, color: '#0a1f17' }}>April 28, 2026</div>
            </div>
          </div>

          <div>
            {sections.map(s => (
              <div key={s.h} id={s.h.replace(/\s+/g, '-').toLowerCase()} style={{ marginBottom: 40, paddingBottom: 32, borderBottom: '1px solid #d9cfb8' }}>
                <h2 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 28, color: '#0a1f17', margin: '0 0 16px' }}>{s.h}</h2>
                <p style={{ fontSize: 15, lineHeight: 1.85, color: '#4a4540', margin: 0 }}>{s.b}</p>
              </div>
            ))}
            <div style={{ background: '#0a1f17', color: '#e8dcc1', padding: 32, marginTop: 24, position: 'relative' }} className="ms-grain">
              <div className="ms-eyebrow on-dark" style={{ marginBottom: 12, position: 'relative' }}>Questions about your data?</div>
              <p style={{ fontSize: 14, lineHeight: 1.7, color: 'rgba(232,220,193,0.85)', position: 'relative', margin: '0 0 16px' }}>
                Our Data Protection Officer responds personally to every privacy enquiry within 7 working days.
              </p>
              <a href="mailto:privacy@marsan.in" className="ms-btn ms-btn-primary ms-btn-sm" style={{ position: 'relative' }}>
                <Icon name="mail" size={12} /> Email the DPO
              </a>
            </div>
          </div>
        </div>
      </section>
      <C.Footer />
    </div>
  );
};

window.NotFoundPage = NotFoundPage;
window.ThankYouPage = ThankYouPage;
window.PrivacyPage = PrivacyPage;