// screens-extra.jsx — remaining mobile screens for Marsan
// Reuses helpers/icons/data from screens.jsx (all attached to window).
// Brand tokens come from the M object exposed by screens.jsx.

const { useState: useStateX } = React;

// Pull shared bits from screens.jsx (defined first in load order).
// These are file-scoped consts there, so we re-define minimal aliases here.
// To avoid duplication, we use window.MarsanShared if exposed; otherwise inline.

// ─────────────────────────────────────────────────────────────
// 7. ABOUT
// ─────────────────────────────────────────────────────────────
function AboutScreen({ nav, menuOpen, setMenuOpen }) {
  return (
    <div className="ms-root" style={{ background: '#f6f1e6', minHeight: '100%', position: 'relative', paddingBottom: 64 }}>
      <MobileHeader light onMenu={() => setMenuOpen(true)} onBack={() => nav('home')} />
      <NavDrawer open={menuOpen} onClose={() => setMenuOpen(false)} nav={nav} />

      {/* Hero */}
      <section className="ms-grain" style={{ background: '#0a1f17', color: '#f6f1e6', padding: '40px 22px 44px', position: 'relative' }}>
        <div style={{ position: 'relative', zIndex: 1 }}>
          <Eyebrow light>Est. 2014 · A private atelier</Eyebrow>
          <h1 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 38, fontWeight: 300, color: '#f6f1e6', margin: '14px 0 0', lineHeight: 1.04, letterSpacing: '-0.01em', textWrap: 'balance' }}>
            We are <em style={{ color: '#e2bd6b', fontStyle: 'italic' }}>quiet</em> about most things, except diligence.
          </h1>
          <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 14, lineHeight: 1.7, color: 'rgba(232,220,193,0.78)', marginTop: 18 }}>
            Marsan was founded by a small group of investors who had spent a decade buying land for their own families. We codified what we learned and opened the practice to a few more.
          </p>
        </div>
      </section>

      {/* The numbers */}
      <section style={{ padding: '40px 22px 8px' }}>
        <Eyebrow>The portfolio in numbers</Eyebrow>
        <GoldDivider />
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginTop: 22 }}>
          {[
            ['₹1,400 Cr+', 'Assets curated'],
            ['38', 'Developments'],
            ['2,100+', 'Families settled'],
            ['12 yrs', 'On corridor research'],
          ].map(([n, l], i) => (
            <div key={i} style={{ background: '#fff', border: '1px solid #d9cfb8', padding: '20px 16px' }}>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 28, color: '#0a1f17', lineHeight: 1, fontWeight: 400 }}>{n}</div>
              <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#8c857b', marginTop: 10 }}>{l}</div>
            </div>
          ))}
        </div>
      </section>

      {/* Process */}
      <section style={{ padding: '36px 22px' }}>
        <Eyebrow>Our process</Eyebrow>
        <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 28, color: '#0a1f17', margin: '12px 0 6px', fontWeight: 400, lineHeight: 1.15 }}>
          Six steps. No exceptions.
        </h2>
        <GoldDivider />
        <div style={{ marginTop: 22 }}>
          {[
            ['Corridor study', 'Eighteen-month thesis on infrastructure spend, employment density, and registration trends.'],
            ['Title diligence', 'Independent legal opinion. Encumbrance certificates current to 30 days. Mutation history checked.'],
            ['Approval pack', 'TG-RERA filings, HMDA layout sanction, environmental clearances — all on file.'],
            ['Price benchmark', 'Cross-referenced with five comparable developments in a 5 km radius.'],
            ['Curation', 'Plots are released only after the full pack passes investment committee.'],
            ['Lifetime support', 'Mutation, possession, resale — concierge-grade for the holding period.'],
          ].map(([h, p], i) => (
            <div key={i} style={{ display: 'flex', gap: 16, padding: '18px 0', borderBottom: i === 5 ? 'none' : '1px solid #d9cfb8' }}>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 26, color: '#a88841', lineHeight: 1, width: 32, flexShrink: 0 }}>
                {String(i + 1).padStart(2, '0')}
              </div>
              <div>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 19, color: '#0a1f17', fontWeight: 500 }}>{h}</div>
                <div style={{ fontFamily: "'Inter', sans-serif", fontSize: 13, lineHeight: 1.65, color: '#4a4540', marginTop: 4 }}>{p}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      {/* Leadership */}
      <section style={{ padding: '36px 22px', background: '#efe8d8' }}>
        <Eyebrow>Leadership</Eyebrow>
        <GoldDivider />
        <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 16 }}>
          {[
            ['Sandeep Reddy Sanappa', 'Founder & Managing Partner', 'Twelve years in private equity before turning to land. Reads more EC documents than anyone should.', ''],
            ['Ritvik Reddy Mandala', 'Co-Founder', 'Land sourcing and corridor strategy. Behind our most contrarian acquisitions.', 'https://marsan-uploads-prod.s3.ap-south-1.amazonaws.com/team/ritvik.png'],
            ['Veera Vallabh Yanamadala', 'Advisor', 'Capital, structuring, and NRI investor relationships. Quiet steward of the cap table.', ''],
            ['Raghunath Reddy Kanumuru', 'Legal Advisor', 'Title diligence, regulatory approvals, and deed structuring. Heads our legal practice.', ''],
          ].map(([n, t, b, img], i) => (
            <div key={i} style={{ background: '#fff', border: '1px solid #d9cfb8', display: 'flex', gap: 14, padding: 16 }}>
              {img ? (
                <img src={img} alt={n} loading="lazy"
                  style={{ width: 88, height: 110, objectFit: 'cover', objectPosition: 'center top', flexShrink: 0, background: '#efe8d8' }} />
              ) : (
                <div className="ms-img-ph" style={{ width: 88, height: 110, flexShrink: 0 }}><span>Portrait</span></div>
              )}
              <div>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 20, color: '#0a1f17', fontWeight: 500 }}>{n}</div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#a88841', marginTop: 4 }}>{t}</div>
                <div style={{ fontFamily: "'Inter', sans-serif", fontSize: 12.5, lineHeight: 1.6, color: '#4a4540', marginTop: 8 }}>{b}</div>
              </div>
            </div>
          ))}
        </div>
      </section>

      <FooterCompact />
      <ContactDock onEnquire={() => nav('contact')} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 8. GALLERY
// ─────────────────────────────────────────────────────────────
function GalleryScreen({ nav, menuOpen, setMenuOpen }) {
  const [filter, setFilter] = useStateX('All');
  const filters = ['All', 'Aerials', 'Master Plans', 'Amenities', 'Twilight', 'Documents'];
  const items = [
    ['Evara · gateway aerial', 'Aerials', 220],
    ['Kavuri Towers · twilight', 'Twilight', 280],
    ['ORR Residences · plan', 'Master Plans', 200],
    ['Evara · clubhouse', 'Amenities', 180],
    ['Lake walk', 'Amenities', 220],
    ['EC document', 'Documents', 180],
    ['Avenue trees', 'Amenities', 180],
    ['Phase II layout', 'Master Plans', 240],
    ['Evening reflection', 'Twilight', 200],
  ];
  const visible = filter === 'All' ? items : items.filter(([, c]) => c === filter);

  return (
    <div className="ms-root" style={{ background: '#f6f1e6', minHeight: '100%', position: 'relative', paddingBottom: 64 }}>
      <MobileHeader light onMenu={() => setMenuOpen(true)} onBack={() => nav('home')} />
      <NavDrawer open={menuOpen} onClose={() => setMenuOpen(false)} nav={nav} />

      <section className="ms-grain" style={{ background: '#0a1f17', color: '#f6f1e6', padding: '32px 22px 36px' }}>
        <div style={{ position: 'relative', zIndex: 1 }}>
          <Eyebrow light>Gallery · 184 frames</Eyebrow>
          <h1 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 36, fontWeight: 300, color: '#f6f1e6', margin: '12px 0 0', lineHeight: 1.05 }}>
            The portfolio, in pictures.
          </h1>
        </div>
      </section>

      <div style={{
        position: 'sticky', top: 49, zIndex: 30,
        background: '#fff', borderBottom: '1px solid #d9cfb8',
        padding: '12px 16px', display: 'flex', gap: 8,
        overflowX: 'auto', scrollbarWidth: 'none',
      }}>
        {filters.map((f) => (
          <span key={f} className="ms-chip" onClick={() => setFilter(f)} style={{
            background: filter === f ? '#0a1f17' : '#fff',
            color: filter === f ? '#e2bd6b' : '#0a1f17',
            borderColor: filter === f ? '#0a1f17' : '#d9cfb8',
            whiteSpace: 'nowrap', cursor: 'pointer', flexShrink: 0,
          }}>{f}</span>
        ))}
      </div>

      <div style={{ padding: 14, display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
        {visible.map(([label, cat, h], i) => (
          <div key={i} style={{ position: 'relative', cursor: 'pointer' }}>
            <div className={`ms-img-ph${i % 3 === 1 ? ' beige' : ''}`} style={{ height: h, width: '100%' }}>
              <span>{label}</span>
            </div>
            <div style={{
              position: 'absolute', bottom: 8, left: 8,
              fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: '0.16em',
              textTransform: 'uppercase', color: '#e8dcc1',
              background: 'rgba(10,31,23,0.7)', padding: '4px 8px',
            }}>{cat}</div>
          </div>
        ))}
      </div>

      <FooterCompact />
      <ContactDock onEnquire={() => nav('contact')} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 9. FAQ
// ─────────────────────────────────────────────────────────────
function FAQScreen({ nav, menuOpen, setMenuOpen }) {
  const [open, setOpen] = useStateX(0);
  const groups = [
    {
      group: 'Buying',
      items: [
        ['How is title cleared?', 'We commission an independent legal opinion from a Telangana-empanelled advocate, pull a current encumbrance certificate (within 30 days), and verify the chain of title for the prior 20 years. The full pack is shared before any token is collected.'],
        ['What is a TG-RERA registration and why does it matter?', 'TG-RERA is the Telangana Real Estate Regulatory Authority. Registration means the project meets disclosure norms — escrowed funds, defined timelines, and published plot-level details. We will not list a project that is not registered.'],
        ['Can I buy without visiting?', 'Yes. We coordinate a remote due-diligence pack (drone footage, document scans, video walkthrough, third-party site verification) and execute the registration via a notarized PoA. Many of our NRI clients buy this way.'],
      ],
    },
    {
      group: 'Payments & Loans',
      items: [
        ['What is the typical payment schedule?', 'For plots: 10% on token, 80% within 60 days at registration, 10% at mutation. For apartments: construction-linked schedule per RERA-approved plan.'],
        ['Do you arrange home loans?', 'We have empanelled relationships with HDFC, ICICI, SBI, and Axis. We can pre-arrange approvals so registration is not blocked on financing.'],
        ['Can NRIs buy?', 'Yes. NRIs may purchase residential and commercial property in India under FEMA. We handle PoA, FIRC documentation, and repatriation paperwork.'],
      ],
    },
    {
      group: 'After possession',
      items: [
        ['What happens at mutation?', 'Mutation is the transfer of revenue records into the buyer\'s name. We file the application, attend the verification visit, and deliver the updated 1-B record — typically within 21 days.'],
        ['Do you help with resale?', 'Yes. Properties we have sold are eligible for our resale concierge — we re-list, vet buyers, and facilitate the registration. A standard 1.5% fee applies.'],
      ],
    },
  ];

  let counter = -1;
  return (
    <div className="ms-root" style={{ background: '#f6f1e6', minHeight: '100%', position: 'relative', paddingBottom: 64 }}>
      <MobileHeader light onMenu={() => setMenuOpen(true)} onBack={() => nav('home')} />
      <NavDrawer open={menuOpen} onClose={() => setMenuOpen(false)} nav={nav} />

      <section className="ms-grain" style={{ background: '#0a1f17', color: '#f6f1e6', padding: '36px 22px 36px' }}>
        <div style={{ position: 'relative', zIndex: 1 }}>
          <Eyebrow light>Frequently asked</Eyebrow>
          <h1 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 36, fontWeight: 300, color: '#f6f1e6', margin: '12px 0 0', lineHeight: 1.05 }}>
            Answered, before you ask.
          </h1>
          <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 13.5, color: 'rgba(232,220,193,0.72)', marginTop: 14, lineHeight: 1.6 }}>
            The questions our buyers ask most. Anything missing — talk to the concierge.
          </p>
        </div>
      </section>

      <section style={{ padding: '24px 22px 8px' }}>
        {groups.map((g, gi) => (
          <div key={g.group} style={{ marginBottom: 28 }}>
            <Eyebrow>{g.group}</Eyebrow>
            <GoldDivider />
            <div style={{ marginTop: 14 }}>
              {g.items.map(([q, a]) => {
                counter += 1;
                const i = counter;
                const isOpen = open === i;
                return (
                  <div key={i} style={{ borderBottom: '1px solid #d9cfb8' }}>
                    <button onClick={() => setOpen(isOpen ? -1 : i)} style={{
                      width: '100%', textAlign: 'left', background: 'none', border: 'none',
                      padding: '20px 0', display: 'flex', justifyContent: 'space-between',
                      alignItems: 'flex-start', gap: 16, cursor: 'pointer',
                    }}>
                      <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 18, color: '#0a1f17', fontWeight: 500, lineHeight: 1.3, textWrap: 'balance' }}>{q}</span>
                      <span style={{
                        flexShrink: 0, width: 28, height: 28,
                        border: '1px solid #c9a55c', color: '#a88841',
                        display: 'flex', alignItems: 'center', justifyContent: 'center',
                        fontFamily: "'Cormorant Garamond', serif", fontSize: 18, lineHeight: 1,
                        transition: 'transform 0.2s',
                        transform: isOpen ? 'rotate(45deg)' : 'rotate(0)',
                      }}>+</span>
                    </button>
                    {isOpen && (
                      <div style={{ paddingBottom: 22, fontFamily: "'Inter', sans-serif", fontSize: 13.5, lineHeight: 1.7, color: '#4a4540' }}>
                        {a}
                      </div>
                    )}
                  </div>
                );
              })}
            </div>
          </div>
        ))}
      </section>

      {/* Still have questions */}
      <section style={{ padding: '32px 22px', background: '#efe8d8', borderTop: '1px solid #d9cfb8' }}>
        <Eyebrow>Still have questions?</Eyebrow>
        <h2 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 24, color: '#0a1f17', margin: '12px 0 16px', fontWeight: 400, lineHeight: 1.2 }}>
          Speak with the concierge directly.
        </h2>
        <button onClick={() => nav('contact')} className="ms-btn ms-btn-primary ms-btn-lg" style={{ width: '100%' }}>
          Talk to an Advisor
        </button>
      </section>

      <FooterCompact />
      <ContactDock onEnquire={() => nav('contact')} />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 10. ENQUIRE / BOOK SITE VISIT
// ─────────────────────────────────────────────────────────────
function EnquireScreen({ nav, menuOpen, setMenuOpen }) {
  const [step, setStep] = useStateX(1);
  // Seed initial property from ?property= query OR the first live property OR 'evara-estates'.
  const initialProperty = (() => {
    try {
      const q = new URLSearchParams(window.location.search).get('property');
      if (q) return q;
    } catch (_) {}
    const firstLive = (window.MARSAN_DATA && window.MARSAN_DATA.PROPERTIES && window.MARSAN_DATA.PROPERTIES[0]);
    return (firstLive && firstLive.slug) || 'evara-estates';
  })();
  // Seed intent from ?type= as well.
  const initialIntent = (() => {
    try {
      const q = new URLSearchParams(window.location.search).get('type');
      if (q === 'visit') return 'site-visit';
      if (q === 'callback') return 'callback';
      if (q === 'brochure') return 'brochure';
    } catch (_) {}
    return 'site-visit';
  })();
  const [form, setForm] = useStateX({
    intent: initialIntent, property: initialProperty, date: 'Sat, 09 May', time: '10:30 AM',
    name: '', phone: '', email: '',
  });
  const [busy, setBusy] = useStateX(false);

  const submit = async () => {
    if (busy) return;
    if (!form.name?.trim() || !form.phone?.trim()) {
      window.MARSAN_TOAST && window.MARSAN_TOAST('Name and phone are required.', 'error');
      return;
    }
    setBusy(true);
    try {
      const formTypeMap = { 'site-visit': 'site_visit', 'callback': 'callback', 'brochure': 'brochure' };
      await window.MarsanAPI.leads.submit({
        formType: formTypeMap[form.intent] || 'property_enquiry',
        propertySlug: form.property === 'other' ? null : form.property,
        name: form.name, phone: form.phone, email: form.email,
        visitDate: form.date, message: `Visit ${form.date} at ${form.time}`,
        pageUrl: window.location.href,
      });
      nav('thanks');
    } catch (err) {
      window.MARSAN_TOAST && window.MARSAN_TOAST(err.message || 'Submission failed', 'error');
    } finally {
      setBusy(false);
    }
  };

  return (
    <div className="ms-root" style={{ background: '#f6f1e6', minHeight: '100%', position: 'relative', paddingBottom: 32 }}>
      <MobileHeader light onMenu={() => setMenuOpen(true)} onBack={() => step > 1 ? setStep(step - 1) : nav('property')} />
      <NavDrawer open={menuOpen} onClose={() => setMenuOpen(false)} nav={nav} />

      <section className="ms-grain" style={{ background: '#0a1f17', color: '#f6f1e6', padding: '32px 22px 32px' }}>
        <div style={{ position: 'relative', zIndex: 1 }}>
          <Eyebrow light>Step {step} of 3</Eyebrow>
          <h1 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 32, fontWeight: 300, color: '#f6f1e6', margin: '10px 0 0', lineHeight: 1.05 }}>
            {step === 1 && 'What can we help with?'}
            {step === 2 && 'Pick a time.'}
            {step === 3 && 'Your details.'}
          </h1>
          <div style={{ display: 'flex', gap: 6, marginTop: 18 }}>
            {[1, 2, 3].map((s) => (
              <div key={s} style={{
                flex: 1, height: 3,
                background: s <= step ? 'linear-gradient(90deg, #c9a55c, #e2bd6b)' : 'rgba(232,220,193,0.18)',
              }} />
            ))}
          </div>
        </div>
      </section>

      <section style={{ padding: '28px 22px' }}>
        {step === 1 && (
          <>
            <Eyebrow>Reason for enquiry</Eyebrow>
            <GoldDivider />
            <div style={{ marginTop: 18, display: 'flex', flexDirection: 'column', gap: 10 }}>
              {[
                ['site-visit', 'Book a site visit', 'See the property in person, with our advisor.'],
                ['callback', 'Request a callback', 'A 15-minute call from the concierge desk.'],
                ['brochure', 'Download brochure', 'Full property pack — plans, EC, RERA, pricing.'],
                ['other', 'General enquiry', "Something else we should know about."],
              ].map(([id, t, d]) => (
                <button key={id} onClick={() => setForm({ ...form, intent: id })} style={optCard(form.intent === id)}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 4 }}>
                    <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 18, fontWeight: 500, color: '#0a1f17' }}>{t}</div>
                    <div style={{
                      width: 18, height: 18, borderRadius: '50%',
                      border: form.intent === id ? '5px solid #c9a55c' : '1px solid #d9cfb8',
                      background: '#fff',
                    }} />
                  </div>
                  <div style={{ fontFamily: "'Inter', sans-serif", fontSize: 12.5, color: '#4a4540' }}>{d}</div>
                </button>
              ))}
            </div>
            <div style={{ marginTop: 24 }}>
              <Eyebrow>Property of interest</Eyebrow>
              <GoldDivider />
              <select className="ms-select" value={form.property} onChange={(e) => setForm({ ...form, property: e.target.value })} style={{ marginTop: 14 }}>
                {((window.MARSAN_DATA && window.MARSAN_DATA.PROPERTIES) || []).map(p => (
                  <option key={p.slug} value={p.slug}>
                    {p.name}{p.location ? ' · ' + p.location.split(',')[0] : ''}
                  </option>
                ))}
                <option value="other">Other · I'm exploring</option>
              </select>
            </div>
          </>
        )}

        {step === 2 && (
          <>
            <Eyebrow>Pick a date</Eyebrow>
            <GoldDivider />
            <div style={{ marginTop: 18, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
              {[
                ['Fri', '08'], ['Sat', '09'], ['Sun', '10'], ['Mon', '11'],
                ['Tue', '12'], ['Wed', '13'], ['Thu', '14'], ['Fri', '15'],
              ].map(([d, n]) => {
                const label = `${d}, ${n} May`;
                const sel = form.date === label;
                return (
                  <button key={n} onClick={() => setForm({ ...form, date: label })} style={{
                    padding: '14px 0', textAlign: 'center', cursor: 'pointer',
                    background: sel ? '#0a1f17' : '#fff',
                    border: `1px solid ${sel ? '#0a1f17' : '#d9cfb8'}`,
                    color: sel ? '#e2bd6b' : '#0a1f17',
                  }}>
                    <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9.5, letterSpacing: '0.14em' }}>{d}</div>
                    <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 22, marginTop: 4 }}>{n}</div>
                  </button>
                );
              })}
            </div>

            <div style={{ marginTop: 26 }}>
              <Eyebrow>Pick a time</Eyebrow>
              <GoldDivider />
              <div style={{ marginTop: 14, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8 }}>
                {['9:00 AM', '10:30 AM', '12:00 PM', '2:00 PM', '3:30 PM', '5:00 PM'].map((t) => {
                  const sel = form.time === t;
                  return (
                    <button key={t} onClick={() => setForm({ ...form, time: t })} style={{
                      padding: '12px 4px', textAlign: 'center', cursor: 'pointer',
                      background: sel ? '#0a1f17' : '#fff',
                      border: `1px solid ${sel ? '#0a1f17' : '#d9cfb8'}`,
                      color: sel ? '#e2bd6b' : '#0a1f17',
                      fontFamily: "'Inter', sans-serif", fontSize: 13, fontWeight: 500,
                    }}>{t}</button>
                  );
                })}
              </div>
            </div>

            <div style={{ marginTop: 26, padding: 16, background: '#efe8d8', borderLeft: '3px solid #c9a55c' }}>
              <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 16, fontStyle: 'italic', color: '#0a1f17' }}>
                Site visits to Evara are best on Saturday mornings, when the light is most flattering and the traffic from RGIA is light.
              </div>
            </div>
          </>
        )}

        {step === 3 && (
          <>
            <Eyebrow>How should we reach you?</Eyebrow>
            <GoldDivider />
            <div style={{ marginTop: 18, display: 'grid', gap: 14 }}>
              <div>
                <label className="ms-label">Name</label>
                <input className="ms-input" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} />
              </div>
              <div>
                <label className="ms-label">Phone</label>
                <input className="ms-input" type="tel" value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} />
              </div>
              <div>
                <label className="ms-label">Email</label>
                <input className="ms-input" type="email" value={form.email} onChange={(e) => setForm({ ...form, email: e.target.value })} />
              </div>
            </div>

            {/* Summary */}
            <div style={{ marginTop: 24, background: '#fff', border: '1px solid #d9cfb8', padding: 18 }}>
              <Eyebrow>Booking summary</Eyebrow>
              <div style={{ marginTop: 12, display: 'grid', gap: 10 }}>
                {[
                  ['Reason', { 'site-visit': 'Site visit', 'callback': 'Callback', 'brochure': 'Brochure', 'other': 'General enquiry' }[form.intent]],
                  ['Property', { evara: 'Evara Estates', orr: 'ORR Residences', kavuri: 'Kavuri Towers', other: 'Exploring' }[form.property]],
                  ['Date', form.date], ['Time', form.time],
                ].map(([l, v]) => (
                  <div key={l} style={{ display: 'flex', justifyContent: 'space-between', fontSize: 13 }}>
                    <span style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.14em', color: '#8c857b' }}>{l.toUpperCase()}</span>
                    <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 16, color: '#0a1f17' }}>{v}</span>
                  </div>
                ))}
              </div>
            </div>
          </>
        )}
      </section>

      {/* Step nav */}
      <div style={{ position: 'sticky', bottom: 0, background: '#f6f1e6', padding: 18, borderTop: '1px solid #d9cfb8', display: 'flex', gap: 10 }}>
        {step > 1 && (
          <button onClick={() => setStep(step - 1)} className="ms-btn ms-btn-ghost-dark" style={{ flex: 1 }}>
            Back
          </button>
        )}
        <button onClick={() => step < 3 ? setStep(step + 1) : submit()} className="ms-btn ms-btn-primary" style={{ flex: 2 }}>
          {step < 3 ? 'Continue' : 'Confirm Booking'}
        </button>
      </div>
    </div>
  );
}
function optCard(sel) {
  return {
    width: '100%', textAlign: 'left',
    background: sel ? '#fff' : '#fff',
    border: `1px solid ${sel ? '#c9a55c' : '#d9cfb8'}`,
    padding: '14px 16px', cursor: 'pointer',
    boxShadow: sel ? '0 0 0 3px rgba(201,165,92,0.15)' : 'none',
  };
}

// ─────────────────────────────────────────────────────────────
// 11. THANK YOU
// ─────────────────────────────────────────────────────────────
function ThankYouScreen({ nav, menuOpen, setMenuOpen }) {
  return (
    <div className="ms-root" style={{ background: '#0a1f17', minHeight: '100%', position: 'relative', color: '#f6f1e6' }}>
      <MobileHeader light onMenu={() => setMenuOpen(true)} />
      <NavDrawer open={menuOpen} onClose={() => setMenuOpen(false)} nav={nav} />

      <section className="ms-grain" style={{ position: 'relative', padding: '60px 22px 48px', minHeight: 480 }}>
        <div style={{ position: 'relative', zIndex: 1, textAlign: 'center' }}>
          <div style={{
            width: 72, height: 72, borderRadius: '50%',
            background: 'linear-gradient(135deg, #c9a55c, #e2bd6b)',
            color: '#0a1f17', display: 'flex', alignItems: 'center', justifyContent: 'center',
            margin: '0 auto 26px', fontSize: 32, fontWeight: 600,
            boxShadow: '0 12px 40px rgba(201,165,92,0.35)',
          }}>✓</div>
          <Eyebrow light>Booking confirmed</Eyebrow>
          <h1 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 40, fontWeight: 300, color: '#f6f1e6', margin: '14px 0 0', lineHeight: 1.05, letterSpacing: '-0.01em' }}>
            Thank you.
          </h1>
          <p style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 19, fontStyle: 'italic', color: 'rgba(232,220,193,0.85)', margin: '14px auto 0', lineHeight: 1.5, maxWidth: 320, textWrap: 'balance' }}>
            Your site visit to Evara Estates is reserved for Saturday, 09 May at 10:30 AM.
          </p>
        </div>
      </section>

      <section style={{ background: '#f6f1e6', color: '#0a1f17', padding: '32px 22px' }}>
        <Eyebrow>What happens next</Eyebrow>
        <GoldDivider />
        <div style={{ marginTop: 22 }}>
          {[
            ['Within 1 hour', 'A confirmation message arrives via WhatsApp with your advisor\'s direct line and the site address.'],
            ['Friday evening', 'Your advisor calls to confirm the slot and share the diligence pack — RERA registration, EC, and master plan.'],
            ['Saturday, 10:00 AM', 'Pickup from the gate of your choice (RGIA / our atelier in Khajaguda / your hotel). The visit takes about 90 minutes.'],
          ].map(([w, p], i) => (
            <div key={i} style={{ display: 'flex', gap: 18, padding: '18px 0', borderBottom: i === 2 ? 'none' : '1px solid #d9cfb8' }}>
              <div style={{
                fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.14em',
                color: '#a88841', textTransform: 'uppercase', width: 84, flexShrink: 0, paddingTop: 2,
              }}>{w}</div>
              <div style={{ fontFamily: "'Inter', sans-serif", fontSize: 13.5, lineHeight: 1.65, color: '#4a4540' }}>{p}</div>
            </div>
          ))}
        </div>

        <div style={{ marginTop: 28, display: 'grid', gap: 10 }}>
          <button onClick={() => nav('property')} className="ms-btn ms-btn-primary ms-btn-lg">
            Back to Evara Estates
          </button>
          <button onClick={() => nav('insights')} className="ms-btn ms-btn-ghost-dark">
            Read while you wait
          </button>
        </div>
      </section>

      <FooterCompact />
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 12. 404
// ─────────────────────────────────────────────────────────────
function NotFoundScreen({ nav, menuOpen, setMenuOpen }) {
  return (
    <div className="ms-root" style={{ background: '#0a1f17', minHeight: '100%', position: 'relative', color: '#f6f1e6' }}>
      <MobileHeader light onMenu={() => setMenuOpen(true)} />
      <NavDrawer open={menuOpen} onClose={() => setMenuOpen(false)} nav={nav} />

      <section className="ms-grain" style={{ position: 'relative', padding: '40px 22px', minHeight: 600 }}>
        <div style={{ position: 'relative', zIndex: 1 }}>
          <div style={{
            fontFamily: "'Cormorant Garamond', serif", fontSize: 140, fontWeight: 300,
            color: '#143a2a', lineHeight: 0.85, margin: '20px 0 0',
            background: 'linear-gradient(135deg, #c9a55c, #e2bd6b 50%, #a88841)',
            WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
            backgroundClip: 'text',
          }}>404</div>
          <Eyebrow light style={{ marginTop: 6 }}>Off the master plan</Eyebrow>
          <h1 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 32, fontWeight: 300, color: '#f6f1e6', margin: '14px 0 0', lineHeight: 1.05, letterSpacing: '-0.01em' }}>
            This plot is <em style={{ color: '#e2bd6b', fontStyle: 'italic' }}>unmapped</em>.
          </h1>
          <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 14, color: 'rgba(232,220,193,0.72)', marginTop: 16, lineHeight: 1.65, maxWidth: 320 }}>
            The page you were looking for has either moved, been sold, or never existed. Try one of the routes below — or call the concierge desk.
          </p>

          <div style={{ marginTop: 28, display: 'grid', gap: 10 }}>
            {[
              ['home', 'Return home', 'The full portfolio'],
              ['properties', 'Browse properties', '6 active developments'],
              ['insights', 'Read insights', 'Notes from a buyer\'s desk'],
              ['contact', 'Talk to the concierge', '+91 98499 99708'],
            ].map(([id, t, d]) => (
              <button key={id} onClick={() => nav(id)} style={{
                width: '100%', textAlign: 'left', cursor: 'pointer',
                background: 'rgba(255,255,255,0.04)',
                border: '1px solid rgba(232,220,193,0.18)',
                padding: '16px 18px', display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                <div>
                  <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 19, color: '#f6f1e6', fontWeight: 500 }}>{t}</div>
                  <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.14em', color: 'rgba(232,220,193,0.5)', marginTop: 4 }}>{d}</div>
                </div>
                <span style={{ color: '#e2bd6b', fontFamily: "'Cormorant Garamond', serif", fontSize: 22 }}>→</span>
              </button>
            ))}
          </div>
        </div>
      </section>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 13. PRIVACY / TERMS
// ─────────────────────────────────────────────────────────────
function PrivacyScreen({ nav, menuOpen, setMenuOpen }) {
  const [tab, setTab] = useStateX('privacy');
  return (
    <div className="ms-root" style={{ background: '#f6f1e6', minHeight: '100%', position: 'relative', paddingBottom: 40 }}>
      <MobileHeader light onMenu={() => setMenuOpen(true)} onBack={() => nav('home')} />
      <NavDrawer open={menuOpen} onClose={() => setMenuOpen(false)} nav={nav} />

      <section className="ms-grain" style={{ background: '#0a1f17', color: '#f6f1e6', padding: '32px 22px 28px' }}>
        <div style={{ position: 'relative', zIndex: 1 }}>
          <Eyebrow light>Legal · v3.2</Eyebrow>
          <h1 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 32, fontWeight: 300, color: '#f6f1e6', margin: '12px 0 0', lineHeight: 1.05 }}>
            The fine print, in plain English.
          </h1>
          <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.14em', color: 'rgba(232,220,193,0.5)', marginTop: 12 }}>
            UPDATED 12 MAR 2026
          </div>
        </div>
      </section>

      <div style={{
        position: 'sticky', top: 49, zIndex: 30,
        background: '#f6f1e6', display: 'flex', borderBottom: '1px solid #d9cfb8',
      }}>
        {['privacy', 'terms', 'cookies', 'rera'].map((id) => (
          <button key={id} onClick={() => setTab(id)} style={{
            flex: 1, padding: '14px 4px', background: 'none', border: 'none',
            fontFamily: "'Inter', sans-serif", fontSize: 10, fontWeight: 500,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            color: tab === id ? '#0a1f17' : '#8c857b',
            borderBottom: tab === id ? '2px solid #c9a55c' : '2px solid transparent',
            cursor: 'pointer',
          }}>{id}</button>
        ))}
      </div>

      <section style={{ padding: '28px 22px' }}>
        {tab === 'privacy' && (
          <PolicyBody
            title="Privacy"
            sections={[
              ['What we collect', 'Name, phone, email, the property you enquired about, and the device + IP from which you reached us. Nothing else, unless you tell us.'],
              ['Why we collect it', 'To respond to your enquiry, schedule a site visit, and (if you become a buyer) execute registration, mutation, and post-possession services.'],
              ['Who we share it with', 'Our empanelled legal advisor, the developer of the project you enquired about, and our payment partner. Never with marketing networks. Never sold.'],
              ['How long we keep it', 'For the lifetime of your relationship with us. Erased within 30 days of a written request, except where required by law (registered sale deeds are kept indefinitely).'],
              ['Your rights', 'Access, correction, erasure, and portability. Email privacy@marsanproperties.com. We respond within 7 working days.'],
            ]}
          />
        )}
        {tab === 'terms' && (
          <PolicyBody
            title="Terms"
            sections={[
              ['Use of this site', 'For personal, non-commercial reference. No scraping, no automated access, no resale of listings.'],
              ['Pricing', 'Indicative. The price you pay is the price on your registered sale deed, fixed at the date of token receipt.'],
              ['Imagery', 'Drone aerials, master plans, and renderings are illustrative. The official document is the TG-RERA filing for that project.'],
              ['Jurisdiction', 'Hyderabad. Telangana courts have exclusive jurisdiction.'],
            ]}
          />
        )}
        {tab === 'cookies' && (
          <PolicyBody
            title="Cookies"
            sections={[
              ['Strictly necessary', 'Session cookie for the enquiry form. Cannot be disabled.'],
              ['Analytics', 'Plausible (privacy-respecting, no PII). You can opt out in Settings.'],
              ['Marketing', 'None. We do not run remarketing campaigns. We do not place pixels.'],
            ]}
          />
        )}
        {tab === 'rera' && (
          <PolicyBody
            title="RERA · TG"
            sections={[
              ['Registration', 'TG-RERA-A-2025-0042 — Marsan Properties Private Limited, principal sales partner.'],
              ['Project filings', 'Each development carries its own TG-RERA project number, displayed on its detail page.'],
              ['Disclosures', 'Per Telangana RERA 2.0 norms: escrow account details, defined timelines, plot-level inventory status, and the engineer-architect-CA certificate are published on the project page.'],
              ['Complaints', 'Telangana RERA portal at rera.telangana.gov.in. We will not stand between a buyer and the regulator.'],
            ]}
          />
        )}
      </section>

      <FooterCompact />
    </div>
  );
}

function PolicyBody({ title, sections }) {
  return (
    <div>
      <Eyebrow>{title}</Eyebrow>
      <GoldDivider />
      <div style={{ marginTop: 22 }}>
        {sections.map(([h, p], i) => (
          <div key={i} style={{ paddingBottom: 22, marginBottom: 22, borderBottom: i === sections.length - 1 ? 'none' : '1px solid #d9cfb8' }}>
            <h3 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 20, color: '#0a1f17', margin: '0 0 8px', fontWeight: 500 }}>{h}</h3>
            <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 13.5, lineHeight: 1.7, color: '#4a4540', margin: 0 }}>{p}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

// ─────────────────────────────────────────────────────────────
// 14. TOOLS · EMI Calculator
// ─────────────────────────────────────────────────────────────
function ToolsScreen({ nav, menuOpen, setMenuOpen }) {
  const [tool, setTool] = useStateX('emi');
  const [loan, setLoan] = useStateX(15000000);  // ₹1.5 Cr
  const [rate, setRate] = useStateX(8.5);
  const [years, setYears] = useStateX(20);

  const r = rate / 12 / 100;
  const n = years * 12;
  const emi = Math.round(loan * r * Math.pow(1 + r, n) / (Math.pow(1 + r, n) - 1));
  const total = emi * n;
  const interest = total - loan;
  const fmt = (x) => '₹' + x.toLocaleString('en-IN');

  return (
    <div className="ms-root" style={{ background: '#f6f1e6', minHeight: '100%', position: 'relative', paddingBottom: 64 }}>
      <MobileHeader light onMenu={() => setMenuOpen(true)} onBack={() => nav('home')} />
      <NavDrawer open={menuOpen} onClose={() => setMenuOpen(false)} nav={nav} />

      <section className="ms-grain" style={{ background: '#0a1f17', color: '#f6f1e6', padding: '32px 22px 32px' }}>
        <div style={{ position: 'relative', zIndex: 1 }}>
          <Eyebrow light>Buyer tools</Eyebrow>
          <h1 style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 36, fontWeight: 300, color: '#f6f1e6', margin: '12px 0 0', lineHeight: 1.05 }}>
            Numbers, in your hand.
          </h1>
        </div>
      </section>

      <div style={{ background: '#fff', display: 'flex', borderBottom: '1px solid #d9cfb8' }}>
        {[['emi', 'EMI'], ['eligibility', 'Eligibility'], ['compare', 'Compare']].map(([id, l]) => (
          <button key={id} onClick={() => setTool(id)} style={{
            flex: 1, padding: '14px 4px', background: 'none', border: 'none',
            fontFamily: "'Inter', sans-serif", fontSize: 10, fontWeight: 500,
            letterSpacing: '0.18em', textTransform: 'uppercase',
            color: tool === id ? '#0a1f17' : '#8c857b',
            borderBottom: tool === id ? '2px solid #c9a55c' : '2px solid transparent',
            cursor: 'pointer',
          }}>{l}</button>
        ))}
      </div>

      {tool === 'emi' && (
        <section style={{ padding: '28px 22px' }}>
          <Eyebrow>EMI Calculator</Eyebrow>
          <GoldDivider />

          {/* Result card */}
          <div style={{
            marginTop: 18, padding: '24px 20px',
            background: 'linear-gradient(135deg, #143a2a, #0a1f17)',
            color: '#f6f1e6', position: 'relative', overflow: 'hidden',
          }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.18em', color: 'rgba(232,220,193,0.55)' }}>
              MONTHLY EMI
            </div>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 44, fontWeight: 400, color: '#e2bd6b', marginTop: 6, lineHeight: 1 }}>
              {fmt(emi)}
            </div>
            <div style={{ height: 1, background: 'rgba(232,220,193,0.15)', margin: '20px 0' }} />
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: '0.16em', color: 'rgba(232,220,193,0.55)' }}>TOTAL INTEREST</div>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 18, color: '#f6f1e6', marginTop: 4 }}>{fmt(interest)}</div>
              </div>
              <div>
                <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: '0.16em', color: 'rgba(232,220,193,0.55)' }}>TOTAL PAYABLE</div>
                <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 18, color: '#f6f1e6', marginTop: 4 }}>{fmt(total)}</div>
              </div>
            </div>
          </div>

          {/* Inputs */}
          <div style={{ marginTop: 24, display: 'grid', gap: 22 }}>
            <SliderField label="Loan amount" valueLabel={fmt(loan)} value={loan} min={500000} max={100000000} step={500000} onChange={setLoan} />
            <SliderField label="Interest rate" valueLabel={`${rate.toFixed(2)}%`} value={rate} min={6} max={14} step={0.05} onChange={setRate} />
            <SliderField label="Tenure" valueLabel={`${years} years`} value={years} min={5} max={30} step={1} onChange={setYears} />
          </div>

          {/* Visual breakup */}
          <div style={{ marginTop: 26 }}>
            <Eyebrow>Principal vs Interest</Eyebrow>
            <div style={{ marginTop: 14, height: 14, display: 'flex', overflow: 'hidden', background: '#d9cfb8' }}>
              <div style={{
                width: `${(loan / total) * 100}%`,
                background: 'linear-gradient(90deg, #143a2a, #1a4c38)',
              }} />
              <div style={{
                width: `${(interest / total) * 100}%`,
                background: 'linear-gradient(90deg, #c9a55c, #e2bd6b)',
              }} />
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: 10, fontFamily: "'Inter', sans-serif", fontSize: 11.5 }}>
              <span><span style={{ display: 'inline-block', width: 8, height: 8, background: '#143a2a', marginRight: 6, verticalAlign: 'middle' }} />Principal · {((loan / total) * 100).toFixed(0)}%</span>
              <span><span style={{ display: 'inline-block', width: 8, height: 8, background: '#c9a55c', marginRight: 6, verticalAlign: 'middle' }} />Interest · {((interest / total) * 100).toFixed(0)}%</span>
            </div>
          </div>

          <button onClick={() => nav('contact')} className="ms-btn ms-btn-primary ms-btn-lg" style={{ width: '100%', marginTop: 28 }}>
            Talk to a Loan Advisor
          </button>
        </section>
      )}

      {tool === 'eligibility' && (
        <section style={{ padding: '28px 22px' }}>
          <Eyebrow>Loan Eligibility</Eyebrow>
          <GoldDivider />
          <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 13.5, color: '#4a4540', lineHeight: 1.65, marginTop: 16 }}>
            Tell us about your income and we'll show the maximum loan you're likely to qualify for, based on standard 50% FOIR ratios.
          </p>
          <div style={{ marginTop: 22, padding: 22, background: '#fff', border: '1px solid #d9cfb8' }}>
            <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 10, letterSpacing: '0.18em', color: '#a88841' }}>ESTIMATED ELIGIBILITY</div>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 36, color: '#0a1f17', marginTop: 6 }}>₹2.4 Cr</div>
            <div style={{ fontFamily: "'Inter', sans-serif", fontSize: 12, color: '#8c857b', marginTop: 4 }}>at 8.5% · 20 years · ₹4L monthly income</div>
          </div>
          <div style={{ marginTop: 18, padding: 16, background: '#efe8d8', borderLeft: '3px solid #c9a55c' }}>
            <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 15, fontStyle: 'italic', color: '#0a1f17', lineHeight: 1.5 }}>
              We have empanelled relationships with HDFC, ICICI, SBI and Axis. We can pre-arrange approvals so registration is not blocked on financing.
            </div>
          </div>
        </section>
      )}

      {tool === 'compare' && (
        <section style={{ padding: '28px 22px' }}>
          <Eyebrow>Compare Properties</Eyebrow>
          <GoldDivider />
          <p style={{ fontFamily: "'Inter', sans-serif", fontSize: 13.5, color: '#4a4540', lineHeight: 1.65, marginTop: 16 }}>
            Side-by-side comparison of your saved shortlist.
          </p>
          <div style={{ marginTop: 22, display: 'flex', flexDirection: 'column', gap: 12 }}>
            {((window.MARSAN_DATA && window.MARSAN_DATA.PROPERTIES) || []).map((p) => {
              const stat = p.status || 'Available';
              const statusClass = stat === 'Available' ? 'available' : stat === 'Few Left' ? 'few' : stat === 'Sold Out' ? 'sold' : 'upcoming';
              const detailUrl = '/property.html?slug=' + encodeURIComponent(p.slug);
              return (
                <a key={p.slug} href={detailUrl} style={{ display: 'block', background: '#fff', border: '1px solid #d9cfb8', textDecoration: 'none', color: 'inherit', overflow: 'hidden' }}>
                  {p.heroUrl && (
                    <img src={p.heroUrl} alt={p.name} loading="lazy"
                      style={{ display: 'block', width: '100%', height: 140, objectFit: 'cover' }} />
                  )}
                  <div style={{ padding: 18 }}>
                    <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', gap: 8 }}>
                      <div style={{ minWidth: 0 }}>
                        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 18, color: '#0a1f17', fontWeight: 500 }}>{p.name}</div>
                        <div style={{ fontFamily: "'Inter', sans-serif", fontSize: 11.5, color: '#8c857b', marginTop: 2 }}>{p.location || ''}</div>
                      </div>
                      <span className={`ms-status ${statusClass}`} style={{ color: '#0a1f17', fontFamily: "'JetBrains Mono', monospace", fontSize: 9, flexShrink: 0 }}>{stat}</span>
                    </div>
                    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 14 }}>
                      <div>
                        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: '0.14em', color: '#8c857b' }}>PRICE</div>
                        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 15, color: '#0a1f17', marginTop: 2 }}>
                          ₹{p.priceMin}–{p.priceMax} {p.priceUnit || 'Cr'}
                        </div>
                      </div>
                      <div>
                        <div style={{ fontFamily: "'JetBrains Mono', monospace", fontSize: 9, letterSpacing: '0.14em', color: '#8c857b' }}>SIZE</div>
                        <div style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 15, color: '#0a1f17', marginTop: 2 }}>
                          {p.areaMin && p.areaMax ? `${Number(p.areaMin).toLocaleString('en-IN')}–${Number(p.areaMax).toLocaleString('en-IN')} ${p.areaUnit || 'sq.yd'}` : '—'}
                        </div>
                      </div>
                    </div>
                  </div>
                </a>
              );
            })}
            {(!window.MARSAN_DATA || !window.MARSAN_DATA.PROPERTIES || !window.MARSAN_DATA.PROPERTIES.length) && (
              <div style={{ padding: 24, textAlign: 'center', color: '#8c857b', fontSize: 13 }}>
                No properties to compare yet.
              </div>
            )}
          </div>
        </section>
      )}

      <FooterCompact />
      <ContactDock onEnquire={() => nav('contact')} />
    </div>
  );
}

function SliderField({ label, valueLabel, value, min, max, step, onChange }) {
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 10 }}>
        <span style={{ fontFamily: "'Inter', sans-serif", fontSize: 10, fontWeight: 500, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#a88841' }}>{label}</span>
        <span style={{ fontFamily: "'Cormorant Garamond', serif", fontSize: 22, color: '#0a1f17' }}>{valueLabel}</span>
      </div>
      <input
        type="range" min={min} max={max} step={step} value={value}
        onChange={(e) => onChange(parseFloat(e.target.value))}
        style={{ width: '100%' }}
      />
    </div>
  );
}

Object.assign(window, {
  AboutScreen, GalleryScreen, FAQScreen, EnquireScreen,
  ThankYouScreen, NotFoundScreen, PrivacyScreen, ToolsScreen,
});