// Marsan Properties — Lead Capture, About, Gallery, Insights, FAQ, Contact

const Field = ({ label, name, value, onChange, placeholder, select, options = [], textarea, type = 'text', full, prefix, required }) => (
  <div style={{ gridColumn: full ? '1 / -1' : 'auto' }}>
    <div className="ms-label">
      {label}
      {required && <span aria-label="required" title="Required" style={{ color: '#b04a3a', marginLeft: 4 }}>*</span>}
    </div>
    {textarea ? (
      <textarea name={name} value={value || ''} onChange={onChange} required={required} className="ms-input" rows="4" placeholder={placeholder} style={{ resize: 'none', fontFamily: 'Inter' }} />
    ) : select ? (
      <select name={name} value={value || ''} onChange={onChange} required={required} className="ms-input" style={{ fontFamily: 'Inter' }}>
        <option value="">Select…</option>
        {options.map(o => <option key={o}>{o}</option>)}
      </select>
    ) : (
      <div style={{ position: 'relative' }}>
        {prefix && <span style={{ position: 'absolute', left: 14, top: '50%', transform: 'translateY(-50%)', fontSize: 14 }}>{prefix}</span>}
        <input name={name} value={value || ''} onChange={onChange} type={type} required={required} className="ms-input" placeholder={placeholder} style={{ paddingLeft: prefix ? 40 : 14 }} />
      </div>
    )}
  </div>
);

// === LEAD CAPTURE ===
const LeadCapturePage = () => {
  const C = window.MarsanComponents;
  const { Icon } = C;
  const params = new URLSearchParams(window.location.search);
  const initialTab = (params.get('type') === 'visit' ? 'visit' : params.get('type') === 'brochure' ? 'brochure' : params.get('type') === 'callback' ? 'callback' : 'enquire');
  const propertySlug = params.get('property');

  const [tab, setTab] = React.useState(initialTab);
  const [submitting, setSubmitting] = React.useState(false);
  const [submitted, setSubmitted] = React.useState(null);
  const [form, setForm] = React.useState({ name: '', phone: '', email: '', property: propertySlug || '', budget: '', message: '', visitDate: '', visitTime: '', visitors: '1', pickup: '', callTime: '', channel: '' });

  const update = (e) => setForm(f => ({ ...f, [e.target.name]: e.target.value }));

  const submit = async (e) => {
    e.preventDefault();
    if (submitting) return;
    if (!form.name.trim() || !form.phone.trim()) {
      window.MARSAN_TOAST('Name and mobile number are required.', 'error');
      return;
    }
    setSubmitting(true);
    try {
      const r = await window.MarsanAPI.leads.submit({
        formType: tab === 'visit' ? 'site_visit' : tab === 'brochure' ? 'brochure' : tab === 'callback' ? 'callback' : 'property_enquiry',
        propertySlug: form.property || propertySlug,
        enquiryType: tab,
        name: form.name, phone: form.phone, email: form.email,
        budget: form.budget,
        visitDate: form.visitDate || null,
        message: [form.message, form.visitTime && `Visit time: ${form.visitTime}`, form.visitors && `Visitors: ${form.visitors}`, form.pickup && `Pickup: ${form.pickup}`, form.callTime && `Call time: ${form.callTime}`, form.channel && `Channel: ${form.channel}`].filter(Boolean).join(' · '),
        pageUrl: window.location.href,
        utm: Object.fromEntries(params.entries()),
      });
      setSubmitted(r);
    } catch (err) { window.MARSAN_TOAST(err.message, 'error'); }
    finally { setSubmitting(false); }
  };

  const properties = (window.MARSAN_DATA.PROPERTIES || []).map(p => p.name + ' — ' + p.location.split(',')[0]);

  return (
    <div className="ms-root" style={{ width: '100%', background: '#f6f1e6', minHeight: '100%' }}>
      <C.Header active="Contact" light={false} />

      <section style={{ background: '#0a1f17', padding: '64px 56px 96px', color: '#e8dcc1', position: 'relative' }} className="ms-grain">
        <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
          <div className="ms-eyebrow on-dark" style={{ marginBottom: 12 }}>Lead capture</div>
          <h1 className="ms-h1" style={{ fontFamily: 'Cormorant Garamond, serif', fontWeight: 300, fontSize: 64, color: '#f6f1e6', margin: '0 0 16px', lineHeight: 1.05 }}>
            Request a private<br />consultation.
          </h1>
          <p style={{ fontSize: 16, color: 'rgba(232,220,193,0.7)', maxWidth: 600, lineHeight: 1.6 }}>
            Every enquiry is reviewed by a senior advisor within two business hours. Your details are sent directly to our CRM via signed webhook — never stored on the website.
          </p>
        </div>
      </section>

      <section style={{ padding: '0 56px', marginTop: -64, position: 'relative', zIndex: 2 }}>
        <div style={{ maxWidth: 1100, margin: '0 auto', background: '#fff', border: '1px solid #d9cfb8', boxShadow: '0 30px 80px -30px rgba(10,31,23,0.4)' }}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', borderBottom: '1px solid #d9cfb8' }}>
            {[
              { k: 'enquire', t: 'Property Enquiry', i: 'mail' },
              { k: 'visit', t: 'Book Site Visit', i: 'calendar' },
              { k: 'brochure', t: 'Download Brochure', i: 'download' },
              { k: 'callback', t: 'Request Callback', i: 'phone' },
            ].map(t => (
              <button key={t.k} onClick={() => { setTab(t.k); setSubmitted(null); }} style={{
                padding: '24px 16px', background: tab === t.k ? '#fff' : '#fafafa',
                border: 'none', borderBottom: tab === t.k ? '2px solid #c9a55c' : '2px solid transparent',
                fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
                color: tab === t.k ? '#0a1f17' : '#8c857b',
                fontWeight: tab === t.k ? 600 : 400, cursor: 'pointer',
                display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8, fontFamily: 'Inter',
              }}>
                <Icon name={t.i} size={14} /> {t.t}
              </button>
            ))}
          </div>

          {!submitted ? (
            <form onSubmit={submit} style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', minHeight: 600 }} className="ms-collapse-mobile">
              <div style={{ padding: 48 }}>
                <div className="ms-eyebrow" style={{ marginBottom: 12 }}>Step 1 of 1 · {tab}</div>
                <h2 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 36, color: '#0a1f17', margin: '0 0 32px' }}>
                  {tab === 'enquire' && "Tell us what you're looking for."}
                  {tab === 'visit' && 'Schedule a chauffeured visit.'}
                  {tab === 'brochure' && 'Receive the brochure on WhatsApp.'}
                  {tab === 'callback' && 'When should we call you?'}
                </h2>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 20 }}>
                  <Field label="Full Name" name="name" value={form.name} onChange={update} required placeholder="Aarav Krishnan" />
                  <Field label="Mobile" name="phone" value={form.phone} onChange={update} required placeholder="+91 98499 99708" prefix="🇮🇳" />
                  <Field label="Email" name="email" value={form.email} onChange={update} type="email" placeholder="aarav@example.com" full />
                  <Field label="Interested Property" name="property" value={form.property} onChange={update} select options={[...properties, "I'm exploring options"]} />
                  <Field label="Budget Range" name="budget" value={form.budget} onChange={update} select options={['Up to ₹50L', '₹50L – 1Cr', '₹1 – 2.5Cr', '₹2.5 – 5Cr', '₹5Cr+']} />

                  {tab === 'visit' && (<>
                    <Field label="Preferred Date" name="visitDate" value={form.visitDate} onChange={update} type="date" />
                    <Field label="Preferred Time" name="visitTime" value={form.visitTime} onChange={update} select options={['9:00 AM', '11:00 AM', '1:00 PM', '3:00 PM', '5:00 PM']} />
                    <Field label="Number of Visitors" name="visitors" value={form.visitors} onChange={update} select options={['1', '2', '3', '4+']} />
                    <Field label="Pickup Required" name="pickup" value={form.pickup} onChange={update} select options={["No, I'll drive", 'Yes — chauffeur from my location', 'Yes — pickup from hotel']} />
                  </>)}

                  {tab === 'callback' && (<>
                    <Field label="Best Time to Call" name="callTime" value={form.callTime} onChange={update} select options={['Morning · 9–12', 'Afternoon · 12–4', 'Evening · 4–7', 'Anytime']} />
                    <Field label="Preferred Channel" name="channel" value={form.channel} onChange={update} select options={['Phone call', 'WhatsApp', 'Either']} />
                  </>)}

                  <Field label={tab === 'enquire' ? 'What would you like to know?' : 'Notes for the advisor'} name="message" value={form.message} onChange={update} textarea full
                    placeholder={tab === 'enquire' ? 'East-facing plot, near schools, ready-to-register…' : 'Anything specific we should prepare…'} />
                </div>

                <div style={{ marginTop: 24, paddingTop: 20, borderTop: '1px solid #efe8d8' }}>
                  <label style={{ display: 'flex', gap: 10, alignItems: 'flex-start', fontSize: 12, color: '#4a4540', lineHeight: 1.6, cursor: 'pointer' }}>
                    <input type="checkbox" defaultChecked required style={{ accentColor: '#c9a55c', marginTop: 3 }} />
                    <span>I consent to Marsan Properties contacting me about this enquiry. <a href="/privacy.html" style={{ color: '#a88841' }}>Privacy policy</a> · <a href="/privacy.html?tab=terms" style={{ color: '#a88841' }}>Terms</a></span>
                  </label>
                </div>

                <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 32, flexWrap: 'wrap' }}>
                  <button type="submit" disabled={submitting} className="ms-btn ms-btn-primary" style={{ flex: 1, minWidth: 240, opacity: submitting ? 0.7 : 1 }}>
                    {submitting ? 'Sending…' :
                      tab === 'enquire' ? 'Request Private Consultation' :
                      tab === 'visit' ? 'Confirm Site Visit' :
                      tab === 'brochure' ? 'Send Brochure on WhatsApp' : 'Schedule Callback'}
                    <Icon name="arrow" size={14} />
                  </button>
                  <a href="https://wa.me/919849999708" target="_blank" rel="noopener" className="ms-btn ms-btn-ghost-dark">
                    <Icon name="whatsapp" size={14} /> Or chat on WhatsApp
                  </a>
                </div>
                <div className="ms-meta" style={{ color: '#8c857b', marginTop: 16 }}>
                  <Icon name="shield" size={11} /> &nbsp;Submission is encrypted · Sent to CRM via signed webhook · No data stored on this site
                </div>
              </div>

              <div style={{ background: '#0a1f17', color: '#e8dcc1', padding: 48, position: 'relative' }} className="ms-grain">
                <div className="ms-eyebrow on-dark" style={{ marginBottom: 16, position: 'relative' }}>What happens next</div>
                <h3 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 28, color: '#f6f1e6', margin: '0 0 32px', position: 'relative' }}>The Marsan response, in three acts.</h3>

                <div style={{ display: 'flex', flexDirection: 'column', gap: 24, position: 'relative' }}>
                  {[
                    { n: '01', t: 'Within 2 hours', d: 'A senior advisor reviews your brief and replies on your preferred channel.' },
                    { n: '02', t: 'Within 24 hours', d: 'You receive a curated edit of 2-3 properties matched to your brief, with site videos and a brochure pack.' },
                    { n: '03', t: 'On your schedule', d: 'A chauffeured site visit, on a date that suits you. Optionally with on-site refreshments.' },
                  ].map(s => (
                    <div key={s.n} style={{ display: 'flex', gap: 16 }}>
                      <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 32, color: '#e2bd6b', minWidth: 48 }}>{s.n}</div>
                      <div>
                        <div style={{ fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#c9a55c', marginBottom: 6 }}>{s.t}</div>
                        <div style={{ fontSize: 13, lineHeight: 1.7, color: 'rgba(232,220,193,0.85)' }}>{s.d}</div>
                      </div>
                    </div>
                  ))}
                </div>

                <div style={{ marginTop: 40, padding: 20, border: '1px solid rgba(201,165,92,0.3)', position: 'relative' }}>
                  <div className="ms-meta" style={{ color: 'rgba(232,220,193,0.6)', marginBottom: 8 }}>NEED IMMEDIATE HELP?</div>
                  <a href="tel:+919849999708" style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 22, color: '#f6f1e6', marginBottom: 4, textDecoration: 'none', display: 'block' }}>+91 98499 99708</a>
                  <div style={{ fontSize: 12, color: 'rgba(232,220,193,0.6)' }}>Mon – Sat · 9:30 AM – 7:00 PM IST</div>
                </div>
              </div>
            </form>
          ) : (
            <SuccessState tab={tab} reference={submitted.reference} delivery={submitted.delivery} onReset={() => setSubmitted(null)} />
          )}
        </div>

        <div style={{ maxWidth: 1100, margin: '40px auto 0' }}>
          <div className="ms-eyebrow" style={{ marginBottom: 8 }}>Behind the scenes</div>
          <h3 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 28, color: '#0a1f17', margin: '0 0 24px' }}>How your enquiry reaches our team.</h3>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', alignItems: 'center', background: '#fff', border: '1px solid #d9cfb8' }} className="ms-collapse-mobile">
            {[
              { i: 'edit', t: 'You fill the form', d: 'Validated client-side.' },
              { i: 'shield', t: 'HMAC signed', d: 'Secret key signs payload.' },
              { i: 'arrow', t: 'POST to webhook', d: 'crm.marsan.in/api/v1/leads' },
              { i: 'check', t: 'CRM acks', d: 'Returns lead_id within 800ms.' },
              { i: 'sparkle', t: 'Advisor assigned', d: 'Round-robin in CRM.' },
            ].map((s, i) => (
              <div key={i} style={{ padding: 28, borderRight: i < 4 ? '1px solid #efe8d8' : 'none', textAlign: 'center', position: 'relative' }}>
                <div style={{ width: 44, height: 44, border: '1px solid #c9a55c', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#a88841', margin: '0 auto 12px' }}>
                  <Icon name={s.i} size={18} />
                </div>
                <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 18, color: '#0a1f17', marginBottom: 4 }}>{s.t}</div>
                <div style={{ fontSize: 11, color: '#8c857b' }}>{s.d}</div>
                {i < 4 && <div style={{ position: 'absolute', right: -8, top: '50%', color: '#c9a55c', fontSize: 16 }}>→</div>}
              </div>
            ))}
          </div>
        </div>

        <div style={{ height: 80 }} />
      </section>

      <C.Footer />
    </div>
  );
};

const SuccessState = ({ tab, reference, delivery, onReset }) => {
  const { Icon } = window.MarsanComponents;
  return (
    <div style={{ padding: 80, textAlign: 'center', background: 'linear-gradient(180deg, #fff 0%, #f6f1e6 100%)' }}>
      <div style={{ width: 96, height: 96, borderRadius: '50%', background: 'linear-gradient(135deg, #c9a55c, #e2bd6b)', margin: '0 auto 32px', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#0a1f17', boxShadow: '0 0 0 12px rgba(201,165,92,0.15)', animation: 'msPulse 2s ease infinite' }}>
        <Icon name="check" size={42} />
      </div>
      <div className="ms-eyebrow" style={{ marginBottom: 12 }}>{tab === 'visit' ? 'Site visit confirmed' : tab === 'brochure' ? 'Brochure on the way' : tab === 'callback' ? 'Callback scheduled' : 'Enquiry received'}</div>
      <h2 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 48, color: '#0a1f17', margin: '0 0 16px' }}>Thank you.</h2>
      <p style={{ fontSize: 16, color: '#4a4540', maxWidth: 540, margin: '0 auto 32px', lineHeight: 1.7 }}>
        A senior advisor will reach out within two business hours.
      </p>
      <div style={{ display: 'inline-block', padding: '16px 24px', background: '#0a1f17', color: '#e8dcc1', marginBottom: 32 }}>
        <div className="ms-meta" style={{ color: 'rgba(232,220,193,0.6)', marginBottom: 4 }}>REFERENCE</div>
        <div style={{ fontFamily: 'JetBrains Mono, monospace', fontSize: 18, color: '#e2bd6b' }}>{reference}</div>
      </div>
      <div style={{ display: 'flex', gap: 12, justifyContent: 'center', flexWrap: 'wrap' }}>
        <a href="https://wa.me/919849999708" target="_blank" rel="noopener" className="ms-btn ms-btn-primary"><Icon name="whatsapp" size={14} /> Continue on WhatsApp</a>
        <a href="/properties.html" className="ms-btn ms-btn-ghost-dark">Browse properties</a>
        <button onClick={onReset} className="ms-btn ms-btn-ghost-dark">Submit another</button>
      </div>
      {delivery && (
        <div style={{ marginTop: 40, padding: 16, background: 'rgba(78,166,118,0.08)', border: '1px solid rgba(78,166,118,0.25)', display: 'inline-flex', gap: 10, fontSize: 12, color: '#2e6b4a' }}>
          <Icon name="check" size={14} /> Webhook · {delivery.status} · {delivery.latency_ms}ms · HTTP {delivery.http || '—'}
        </div>
      )}
    </div>
  );
};

// === ABOUT ===
const AboutPage = () => {
  const C = window.MarsanComponents;
  const { CountUp } = C;
  return (
    <div className="ms-root" style={{ width: '100%', background: '#f6f1e6' }}>
      <C.Header active="About" light={false} />

      <section style={{ background: '#0a1f17', color: '#e8dcc1', padding: '80px 56px 120px', position: 'relative' }} className="ms-grain">
        <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative' }}>
          <div className="ms-eyebrow on-dark" style={{ marginBottom: 12 }}>About Marsan</div>
          <h1 className="ms-h1" style={{ fontFamily: 'Cormorant Garamond, serif', fontWeight: 300, fontSize: 76, color: '#f6f1e6', margin: '0 0 24px', lineHeight: 1, maxWidth: 900 }}>
            We curate land like<br /><em style={{ color: '#e2bd6b' }}>private bankers</em> curate portfolios.
          </h1>
          <p style={{ fontSize: 18, color: 'rgba(232,220,193,0.75)', maxWidth: 640, lineHeight: 1.7 }}>
            Marsan Properties was founded in 2018 on a simple belief — that buying land should feel like a private banking relationship, not a transaction. Today we steward 38 active projects across 7 corridors of Hyderabad.
          </p>
        </div>
      </section>

      <section style={{ padding: '80px 56px', maxWidth: 1100, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 32, marginBottom: 80 }} className="ms-collapse-mobile">
          {[
            { v: 8,    l: 'Years in practice' },
            { v: 38,   l: 'Active projects' },
            { v: 2100, suffix: '+',    l: 'Happy owners' },
            { v: 4200, prefix: '₹',  suffix: ' Cr', l: 'Inventory under management' },
          ].map(s => (
            <div key={s.l}>
              <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 56, color: '#0a1f17', lineHeight: 1, whiteSpace: 'nowrap' }}>
                <CountUp value={s.v} prefix={s.prefix || ''} suffix={s.suffix || ''} format={(n) => Math.round(n).toLocaleString('en-IN')} />
              </div>
              <div className="ms-meta" style={{ marginTop: 8 }}>{s.l}</div>
            </div>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 56, marginBottom: 80 }} className="ms-collapse-mobile">
          <div style={{ height: 480, position: 'relative', overflow: 'hidden', background: '#0a1f17' }}>
            <img src="/assets/founder-sandeep.png"
              alt="Sandeep Reddy Sanappa, Founder"
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', objectPosition: 'center top' }} />
          </div>
          <div>
            <div className="ms-eyebrow" style={{ marginBottom: 12 }}>Founder's note</div>
            <h2 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 40, color: '#0a1f17', margin: '0 0 24px', lineHeight: 1.15 }}>"Trust is the only asset that compounds."</h2>
            <p style={{ fontSize: 15, lineHeight: 1.8, color: '#4a4540', marginBottom: 16 }}>
              I started Marsan after a decade of watching families lose savings to opaque deals, missing approvals, and ghosted advisors. Real estate is the largest purchase most families ever make — and yet it's the industry where customers feel least informed.
            </p>
            <p style={{ fontSize: 15, lineHeight: 1.8, color: '#4a4540', marginBottom: 24 }}>
              At Marsan, we publish every approval, every deed, every encumbrance up-front. We sell only what we'd own ourselves. And we treat every customer as a long-term relationship, not a closed file.
            </p>
            <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
              <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 24, fontStyle: 'italic', color: '#0a1f17' }}>Sandeep Reddy Sanappa</div>
              <div style={{ height: 1, flex: 1, background: '#c9a55c' }} />
              <div className="ms-meta" style={{ color: '#a88841' }}>FOUNDER · MD</div>
            </div>
          </div>
        </div>

        <div className="ms-eyebrow" style={{ marginBottom: 12 }}>The way we work</div>
        <h2 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 40, color: '#0a1f17', margin: '0 0 32px' }}>Four principles, no exceptions.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 80 }} className="ms-collapse-mobile">
          {[
            { n: '01', t: 'Verified inventory', d: 'Every plot is title-checked by an external panel of advocates before it joins the catalogue.' },
            { n: '02', t: 'Transparent pricing', d: 'Published price-per-sqft. No hidden registration, GST, or "facing premiums" sprung at signing.' },
            { n: '03', t: 'Single point of contact', d: 'One named advisor for the lifetime of your relationship — including resale, ten years on.' },
            { n: '04', t: 'Buy-back guarantee', d: 'Five-year buy-back at original price + 6% on every plot we develop. Written into the deed.' },
          ].map(p => (
            <div key={p.n} className="ms-reveal" style={{ background: '#fff', border: '1px solid #d9cfb8', padding: 32, position: 'relative' }}>
              <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 18, color: '#a88841', marginBottom: 32 }}>{p.n}</div>
              <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 22, color: '#0a1f17', marginBottom: 12 }}>{p.t}</div>
              <p style={{ fontSize: 13, lineHeight: 1.7, color: '#4a4540', margin: 0 }}>{p.d}</p>
            </div>
          ))}
        </div>

        <div className="ms-eyebrow" style={{ marginBottom: 12 }}>The team</div>
        <h2 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 40, color: '#0a1f17', margin: '0 0 32px' }}>Advisors, architects, custodians.</h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 16, marginBottom: 80 }} className="ms-collapse-mobile">
          {[
            { n: 'Sandeep Reddy Sanappa', r: 'Founder · MD', y: '14 yrs' },
            { n: 'Rohit Iyer', r: 'Head of Acquisitions', y: '11 yrs' },
            { n: 'Meera Reddy', r: 'Head of Advisory', y: '9 yrs' },
            { n: 'Karthik Naidu', r: 'Head of Legal', y: '16 yrs' },
            { n: 'Anjali Verma', r: 'Brand & Marketing', y: '8 yrs' },
            { n: 'Vikram Joshi', r: 'Construction', y: '12 yrs' },
            { n: 'Priya Menon', r: 'Customer Success', y: '7 yrs' },
            { n: 'Suresh Babu', r: 'Investments — NRI', y: '10 yrs' },
          ].map(m => (
            <div key={m.n}>
              <div className="ms-img-ph" style={{ aspectRatio: '4/5', marginBottom: 16 }}><span style={{ fontSize: 9 }}>portrait</span></div>
              <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 20, color: '#0a1f17' }}>{m.n}</div>
              <div style={{ fontSize: 12, color: '#8c857b', marginTop: 2 }}>{m.r}</div>
              <div className="ms-meta" style={{ color: '#a88841', marginTop: 4 }}>{m.y} EXPERIENCE</div>
            </div>
          ))}
        </div>

        <div className="ms-eyebrow" style={{ marginBottom: 12 }}>Recognition</div>
        <h2 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 40, color: '#0a1f17', margin: '0 0 32px' }}>Awards & accreditations.</h2>
        <div style={{ background: '#fff', border: '1px solid #d9cfb8', padding: '32px 16px', display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 32 }} className="ms-collapse-mobile">
          {['CREDAI Member', 'TS-RERA Listed', 'NAREDCO 2024', 'TIMES Realty 2023', 'CONFLUENCE 2024', 'ECON Times 2025'].map(a => (
            <div key={a} style={{ borderLeft: '1px solid #efe8d8', paddingLeft: 16, fontFamily: 'Cormorant Garamond, serif', fontSize: 16, color: '#4a4540' }}>{a}</div>
          ))}
        </div>
      </section>

      <C.Footer />
    </div>
  );
};

// === GALLERY ===
const GalleryPage = () => {
  const C = window.MarsanComponents;
  const { Icon } = C;
  const [filter, setFilter] = React.useState('All');
  const filters = ['All', 'Drone', 'Site Photos', 'Master Plans', 'Construction', 'Lifestyle', 'Videos'];
  const u = (id, w = 1200) => `https://images.unsplash.com/photo-${id}?w=${w}&q=85&auto=format&fit=crop`;
  const tiles = [
    { f: 'Drone', t: 'Marsan Vista — twilight', s: 'tall', tag: 'Shadnagar · Mar 2026', img: u('1600585154340-be6161a56a0c', 1400) },
    { f: 'Site Photos', t: 'Avenue plantation', s: 'sq', tag: 'Vista · Phase II', img: u('1564013799919-ab600027ffc6') },
    { f: 'Lifestyle', t: 'Estancia clubhouse', s: 'wide', tag: 'Kokapet', img: u('1545324418-cc1a3fa10c00', 1600) },
    { f: 'Master Plans', t: 'Vista master plan', s: 'sq', tag: '142 plots · 38 acres', img: u('1500382017468-9049fed747ef') },
    { f: 'Drone', t: 'Verdane farms aerial', s: 'sq', tag: 'Moinabad · Apr 2026', img: u('1542621334-a254cf47733d') },
    { f: 'Construction', t: 'Marsan One — Tower B', s: 'tall', tag: 'Gachibowli · 18 floors up', img: u('1613490493576-7fde63acd811', 1400) },
    { f: 'Site Photos', t: 'Entrance arch', s: 'wide', tag: 'Vista', img: u('1497366216548-37526070297c', 1600) },
    { f: 'Videos', t: 'Walkthrough — Estancia', s: 'wide', tag: '02:48 · 4K', img: u('1486406146926-c627a92ad1ab', 1600) },
    { f: 'Lifestyle', t: 'Sky deck — Marsan One', s: 'sq', tag: 'Sunset', img: u('1600585154526-990dced4db0d') },
    { f: 'Drone', t: 'Boulevard — site survey', s: 'sq', tag: 'Kompally', img: u('1582268611958-ebfd161ef9cf') },
    { f: 'Master Plans', t: 'Verdane layout', s: 'wide', tag: '68 farm plots', img: u('1500076656116-558758c991c1', 1600) },
    { f: 'Construction', t: 'Estancia roof slab', s: 'sq', tag: 'Phase I complete', img: u('1613977257363-707ba9348227') },
  ];
  const filtered = filter === 'All' ? tiles : tiles.filter(t => t.f === filter);

  return (
    <div className="ms-root" style={{ width: '100%', background: '#f6f1e6' }}>
      <C.Header active="" light={false} />
      <section style={{ padding: '64px 56px 32px', maxWidth: 1340, margin: '0 auto' }}>
        <div className="ms-eyebrow" style={{ marginBottom: 12 }}>Gallery</div>
        <h1 className="ms-h1" style={{ fontFamily: 'Cormorant Garamond, serif', fontWeight: 300, fontSize: 64, color: '#0a1f17', margin: '0 0 24px', lineHeight: 1 }}>Drone, ground, lifestyle.</h1>
        <p style={{ fontSize: 16, color: '#4a4540', maxWidth: 600, lineHeight: 1.7, marginBottom: 32 }}>
          A curated archive across every Marsan project — captured by our in-house cinematography team. All images and footage are released under our Press Kit licence.
        </p>

        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 32 }}>
          {filters.map(f => (
            <button key={f} onClick={() => setFilter(f)} style={{
              padding: '10px 18px', border: '1px solid', borderColor: filter === f ? '#0a1f17' : '#d9cfb8',
              background: filter === f ? '#0a1f17' : 'transparent', color: filter === f ? '#e8dcc1' : '#4a4540',
              fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', cursor: 'pointer', fontFamily: 'Inter',
            }}>{f}</button>
          ))}
          <div style={{ flex: 1 }} />
          <button className="ms-btn ms-btn-ghost-dark ms-btn-sm"><Icon name="download" size={12} /> Press Kit</button>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, gridAutoRows: 200 }} className="ms-collapse-mobile">
          {filtered.map((t, i) => (
            <div key={i} className="ms-reveal" style={{
              gridRow: t.s === 'tall' ? 'span 2' : 'span 1',
              gridColumn: t.s === 'wide' ? 'span 2' : 'span 1',
              position: 'relative', overflow: 'hidden', cursor: 'pointer', background: '#0a1f17',
            }}>
              <img src={t.img} alt={t.t} loading="lazy"
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 0.6s ease' }} />
              {t.f === 'Videos' && (
                <div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%,-50%)', width: 56, height: 56, borderRadius: '50%', background: 'rgba(10,31,23,0.7)', border: '1px solid #c9a55c', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#e2bd6b' }}>
                  <Icon name="play" size={20} />
                </div>
              )}
              <div style={{ position: 'absolute', left: 0, bottom: 0, right: 0, padding: 12, background: 'linear-gradient(0deg, rgba(10,31,23,0.85), transparent)', color: '#e8dcc1' }}>
                <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 14 }}>{t.t}</div>
                <div className="ms-meta" style={{ color: '#c9a55c', marginTop: 2, fontSize: 9 }}>{t.tag}</div>
              </div>
              <div style={{ position: 'absolute', top: 12, right: 12, padding: '4px 8px', background: 'rgba(10,31,23,0.7)', color: '#e2bd6b', fontSize: 9, letterSpacing: '0.18em', textTransform: 'uppercase' }}>{t.f}</div>
            </div>
          ))}
        </div>

        <div style={{ textAlign: 'center', marginTop: 48 }}>
          <button className="ms-btn ms-btn-ghost-dark">Load more · {filtered.length} / 142</button>
        </div>
      </section>
      <C.Footer />
    </div>
  );
};

// === INSIGHTS ===
const InsightsPage = () => {
  const C = window.MarsanComponents;
  const { Icon } = C;
  const allArticles = window.MARSAN_DATA.ARTICLES || [];
  const [activeCat, setActiveCat] = React.useState('All');
  const articles = activeCat === 'All' ? allArticles : allArticles.filter(a => a.category === activeCat);
  const featured = articles[0];
  const sidebar = articles.slice(1, 5);
  const grid = articles.slice(5);
  const cats = ['All', ...Array.from(new Set(allArticles.map(a => a.category)))];

  const [email, setEmail] = React.useState('');
  const [subMsg, setSubMsg] = React.useState('');
  const subscribe = async (e) => {
    e.preventDefault();
    if (!email) return;
    try { await window.MarsanAPI.subscribers.add(email); setSubMsg('Subscribed.'); setEmail(''); }
    catch (err) { setSubMsg(err.message || 'Failed'); }
  };

  return (
    <div className="ms-root" style={{ width: '100%', background: '#f6f1e6' }}>
      <C.Header active="Insights" light={false} />
      <section style={{ padding: '64px 56px', maxWidth: 1200, margin: '0 auto' }}>
        <div className="ms-eyebrow" style={{ marginBottom: 12 }}>Insights · Vol. 12 · Spring 2026</div>
        <h1 className="ms-h1" style={{ fontFamily: 'Cormorant Garamond, serif', fontWeight: 300, fontSize: 64, color: '#0a1f17', margin: '0 0 48px', lineHeight: 1 }}>
          Field notes from the<br />Hyderabad land market.
        </h1>

        {featured && (
          <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 32, marginBottom: 64 }} className="ms-collapse-mobile">
            <a href={`/article.html?slug=${featured.slug}`} style={{ textDecoration: 'none', color: 'inherit' }}><article id={featured.slug}>
              <div style={{ aspectRatio: '4/3', marginBottom: 24, position: 'relative', overflow: 'hidden', background: '#0a1f17' }}>
                {featured.cover_url
                  ? <img src={featured.cover_url} alt={featured.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  : <div className="ms-img-ph" style={{ position: 'absolute', inset: 0 }}><span>cover</span></div>}
              </div>
              <span className="ms-chip gold" style={{ marginBottom: 12 }}>FEATURED · {featured.category.toUpperCase()}</span>
              <h2 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 36, color: '#0a1f17', margin: '12px 0 12px', lineHeight: 1.15 }}>{featured.title}</h2>
              <p style={{ fontSize: 14, lineHeight: 1.7, color: '#4a4540', marginBottom: 16 }}>{featured.excerpt}</p>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12, fontSize: 12, color: '#8c857b' }}>
                <span>By Sandeep Reddy Sanappa</span><span>·</span><span>{featured.read_min} min read</span><span>·</span>
                <span>{new Date(featured.published_at).toLocaleDateString()}</span>
              </div>
            </article></a>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
              {sidebar.map((p, i) => (
                <a key={p.slug} href={`/article.html?slug=${p.slug}`} style={{ display: 'grid', gridTemplateColumns: '120px 1fr', gap: 16, paddingBottom: 20, borderBottom: i < sidebar.length - 1 ? '1px solid #d9cfb8' : 'none', textDecoration: 'none', color: 'inherit' }}>
                  <div style={{ height: 90, position: 'relative', overflow: 'hidden', background: '#0a1f17' }}>
                    {p.cover_url
                      ? <img src={p.cover_url} alt={p.title} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                      : <div className="ms-img-ph" style={{ position: 'absolute', inset: 0 }}><span style={{ fontSize: 9 }}>·</span></div>}
                  </div>
                  <div>
                    <div className="ms-meta" style={{ color: '#a88841', marginBottom: 6 }}>{p.category.toUpperCase()}</div>
                    <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 18, color: '#0a1f17', lineHeight: 1.25, marginBottom: 6 }}>{p.title}</div>
                    <div style={{ fontSize: 11, color: '#8c857b' }}>{p.read_min} min · {new Date(p.published_at).toLocaleDateString()}</div>
                  </div>
                </a>
              ))}
            </div>
          </div>
        )}

        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap', marginBottom: 32, paddingBottom: 24, borderBottom: '1px solid #d9cfb8' }}>
          {cats.map(c => (
            <button key={c} onClick={() => setActiveCat(c)} style={{
              padding: '8px 14px', fontSize: 11, letterSpacing: '0.16em', textTransform: 'uppercase',
              border: '1px solid', borderColor: activeCat === c ? '#0a1f17' : '#d9cfb8',
              background: activeCat === c ? '#0a1f17' : 'transparent',
              color: activeCat === c ? '#e8dcc1' : '#4a4540', cursor: 'pointer',
            }}>{c}</button>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32 }} className="ms-collapse-mobile">
          {grid.map(p => (
            <a key={p.slug} href={`/article.html?slug=${p.slug}`} style={{ textDecoration: 'none', color: 'inherit', display: 'block' }}><article id={p.slug}>
              <div style={{ aspectRatio: '4/3', marginBottom: 16, position: 'relative', overflow: 'hidden', background: '#0a1f17' }}>
                {p.cover_url
                  ? <img src={p.cover_url} alt={p.title} loading="lazy" style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
                  : <div className="ms-img-ph" style={{ position: 'absolute', inset: 0 }}><span style={{ fontSize: 9 }}>article cover</span></div>}
              </div>
              <div className="ms-meta" style={{ color: '#a88841', marginBottom: 8 }}>{p.category.toUpperCase()}</div>
              <h3 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 22, color: '#0a1f17', margin: '0 0 12px', lineHeight: 1.2 }}>{p.title}</h3>
              <div style={{ fontSize: 12, color: '#8c857b' }}>{new Date(p.published_at).toLocaleDateString()} · {p.read_min} min read</div>
            </article></a>
          ))}
        </div>

        <div style={{ background: '#0a1f17', padding: 56, marginTop: 64, color: '#e8dcc1', display: 'grid', gridTemplateColumns: '1.2fr 1fr', gap: 56, alignItems: 'center', position: 'relative' }} className="ms-grain ms-collapse-mobile">
          <div style={{ position: 'relative' }}>
            <div className="ms-eyebrow on-dark" style={{ marginBottom: 12 }}>The Marsan dispatch</div>
            <h2 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 42, color: '#f6f1e6', margin: '0 0 16px', lineHeight: 1.1 }}>One letter, every quarter. No noise.</h2>
            <p style={{ fontSize: 14, lineHeight: 1.7, color: 'rgba(232,220,193,0.7)', maxWidth: 480 }}>
              Land market data, our acquisition thesis, and tax/legal updates that materially affect buyers. Read in 10 minutes. Never spam.
            </p>
          </div>
          <form onSubmit={subscribe} style={{ display: 'flex', flexDirection: 'column', gap: 12, position: 'relative' }}>
            <input value={email} onChange={e => setEmail(e.target.value)} type="email" required className="ms-input dark" placeholder="Email address" style={{ background: 'rgba(255,255,255,0.05)' }} />
            <button type="submit" className="ms-btn ms-btn-primary">Subscribe quarterly <Icon name="arrow" size={14} /></button>
            {subMsg && <div className="ms-meta" style={{ color: '#e2bd6b' }}>{subMsg}</div>}
            <div className="ms-meta" style={{ color: 'rgba(232,220,193,0.5)' }}>2,400+ subscribers · Unsubscribe anytime</div>
          </form>
        </div>
      </section>
      <C.Footer />
    </div>
  );
};

// === FAQ ===
const FAQPage = () => {
  const C = window.MarsanComponents;
  const [open, setOpen] = React.useState(0);
  const cats = [
    { c: 'Buying & Booking', qs: [
      ['What is the booking process?', 'A 10% token blocks the property for 21 days. Within that window we share legal due diligence, you complete documentation, and the registration is scheduled at the sub-registrar of your choice.'],
      ['Can I block a plot online?', 'Yes — booking the token amount via UPI / NEFT instantly reserves the plot, and you receive a digital allotment letter within 30 minutes.'],
      ['Is the price negotiable?', 'Pricing is published and the same for everyone. We do not run "festival discounts" or last-day pressure offers — we believe transparent pricing builds trust.'],
    ] },
    { c: 'Legal & RERA', qs: [
      ['Are all properties RERA registered?', 'Every Marsan project is registered with TS-RERA before launch. The RERA number, full project details, and quarterly compliance reports are linked on each property page.'],
      ['What documentation do you provide?', 'You receive the title deed chain (30 years), encumbrance certificate, mutation records, layout approval, RERA certificate, and a non-encumbrance affidavit at registration.'],
      ['Who handles the registration?', 'Our legal team coordinates with the sub-registrar, schedules your appointment, and a Marsan advisor accompanies you on the day.'],
    ] },
    { c: 'NRI buyers', qs: [
      ['Can I buy without coming to India?', 'Yes — we facilitate Power of Attorney to a relative or to a Marsan-empaneled lawyer. Site visits can be done virtually via 4K drone walkthroughs and live video.'],
      ['What about FEMA & repatriation?', 'For agricultural and farm-land, FEMA restrictions apply. For urban plots, villas, and commercial — repatriation is permissible up to 2 properties under the LRS / NRO route.'],
    ] },
    { c: 'Site visits', qs: [
      ['Is the site visit free?', 'Yes, including chauffeured pickup from any location within Hyderabad. Outstation visitors are reimbursed for fuel up to 250 km.'],
      ['Can I bring my family / architect?', 'Always. We provide refreshments on-site and the visit lasts as long as you need.'],
    ] },
  ];

  let idx = 0;
  return (
    <div className="ms-root" style={{ width: '100%', background: '#f6f1e6' }}>
      <C.Header active="About" light={false} />
      <section style={{ padding: '64px 56px', maxWidth: 1100, margin: '0 auto' }}>
        <div className="ms-eyebrow" style={{ marginBottom: 12 }}>Frequently asked</div>
        <h1 className="ms-h1" style={{ fontFamily: 'Cormorant Garamond, serif', fontWeight: 300, fontSize: 56, color: '#0a1f17', margin: '0 0 48px', lineHeight: 1 }}>Questions, considered.</h1>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 56 }} className="ms-collapse-mobile">
          <div style={{ position: 'sticky', top: 32, alignSelf: 'flex-start' }}>
            {cats.map((c, ci) => (
              <a key={c.c} href={'#cat-' + ci} style={{ display: 'block', padding: '12px 0', borderBottom: '1px solid #d9cfb8', fontSize: 13, color: ci === 0 ? '#0a1f17' : '#4a4540', fontWeight: ci === 0 ? 600 : 400, cursor: 'pointer', textDecoration: 'none' }}>{c.c}</a>
            ))}
            <div style={{ marginTop: 32, padding: 20, background: '#fff', border: '1px solid #d9cfb8' }}>
              <div className="ms-eyebrow" style={{ marginBottom: 8 }}>Still curious?</div>
              <p style={{ fontSize: 13, color: '#4a4540', lineHeight: 1.6, margin: '0 0 12px' }}>Speak with a senior advisor — no pitch, just answers.</p>
              <a href="/enquire.html?type=callback" className="ms-btn ms-btn-primary ms-btn-sm" style={{ width: '100%' }}>Book a 20-min call</a>
            </div>
          </div>

          <div>
            {cats.map((c, ci) => (
              <div key={c.c} id={'cat-' + ci} style={{ marginBottom: 48 }}>
                <h2 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 28, color: '#0a1f17', margin: '0 0 16px' }}>{c.c}</h2>
                {c.qs.map(([q, a]) => {
                  const my = idx++;
                  const isOpen = open === my;
                  return (
                    <div key={q} style={{ borderBottom: '1px solid #d9cfb8' }}>
                      <button onClick={() => setOpen(isOpen ? -1 : my)} style={{
                        width: '100%', padding: '20px 0', background: 'none', border: 'none',
                        display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                        cursor: 'pointer', fontFamily: 'Cormorant Garamond, serif', fontSize: 20, color: '#0a1f17', textAlign: 'left',
                      }}>
                        {q}
                        <span style={{ color: '#a88841', transform: isOpen ? 'rotate(45deg)' : 'rotate(0)', transition: 'transform 0.3s', display: 'inline-block' }}>+</span>
                      </button>
                      {isOpen && <p style={{ padding: '0 0 24px', fontSize: 14, lineHeight: 1.8, color: '#4a4540', margin: 0 }}>{a}</p>}
                    </div>
                  );
                })}
              </div>
            ))}
          </div>
        </div>
      </section>
      <C.Footer />
    </div>
  );
};

// === CONTACT ===
const ContactPage = () => {
  const C = window.MarsanComponents;
  const { Icon } = C;
  return (
    <div className="ms-root" style={{ width: '100%', background: '#f6f1e6' }}>
      <C.Header active="Contact" light={false} />
      <section style={{ padding: '64px 56px', maxWidth: 1200, margin: '0 auto' }}>
        <div className="ms-eyebrow" style={{ marginBottom: 12 }}>Contact</div>
        <h1 className="ms-h1" style={{ fontFamily: 'Cormorant Garamond, serif', fontWeight: 300, fontSize: 64, color: '#0a1f17', margin: '0 0 48px', lineHeight: 1 }}>Three ways to reach us.</h1>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16, marginBottom: 64 }} className="ms-collapse-mobile">
          {[
            { i: 'whatsapp', t: 'WhatsApp', s: 'Fastest', d: '+91 98499 99708', cta: 'Chat now', bg: '#0a1f17', fg: '#e8dcc1', href: 'https://wa.me/919849999708' },
            { i: 'phone', t: 'Phone', s: 'Mon – Sat · 9:30–7', d: '+91 98499 99708', cta: 'Call advisor', href: 'tel:+919849999708' },
            { i: 'mail', t: 'Email', s: 'Replies within 4 hrs', d: 'concierge@marsan.in', cta: 'Send email', href: 'mailto:concierge@marsan.in' },
          ].map(c => (
            <a href={c.href} target={c.href.startsWith('http') ? '_blank' : undefined} rel="noopener" key={c.t}
               style={{ background: c.bg || '#fff', color: c.fg || '#0a1f17', border: c.bg ? 'none' : '1px solid #d9cfb8', padding: 40, position: 'relative', textDecoration: 'none' }}
               className={c.bg ? 'ms-grain' : ''}>
              <div style={{ width: 48, height: 48, border: `1px solid ${c.bg ? 'rgba(201,165,92,0.4)' : '#c9a55c'}`, color: c.bg ? '#e2bd6b' : '#a88841', display: 'flex', alignItems: 'center', justifyContent: 'center', marginBottom: 24, position: 'relative' }}>
                <Icon name={c.i} size={20} />
              </div>
              <div className={c.bg ? 'ms-eyebrow on-dark' : 'ms-eyebrow'} style={{ marginBottom: 8, position: 'relative' }}>{c.s}</div>
              <h3 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 28, margin: '0 0 8px', position: 'relative' }}>{c.t}</h3>
              <div style={{ fontSize: 16, marginBottom: 24, position: 'relative', color: c.bg ? '#e2bd6b' : '#0a1f17' }}>{c.d}</div>
              <span className={c.bg ? 'ms-btn ms-btn-primary ms-btn-sm' : 'ms-btn ms-btn-ghost-dark ms-btn-sm'}>{c.cta} <Icon name="arrow" size={12} /></span>
            </a>
          ))}
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 32, marginBottom: 64 }} className="ms-collapse-mobile">
          <div>
            <div className="ms-eyebrow" style={{ marginBottom: 12 }}>The atelier</div>
            <h2 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 36, color: '#0a1f17', margin: '0 0 24px' }}>Visit our Banjara Hills studio.</h2>
            <p style={{ fontSize: 14, lineHeight: 1.8, color: '#4a4540', marginBottom: 24 }}>
              By appointment, with espresso. Our studio holds master plans, scale models, and material libraries for every Marsan project — designed for considered, unhurried conversations.
            </p>
            <div style={{ background: '#fff', border: '1px solid #d9cfb8', padding: 28 }}>
              <div className="ms-eyebrow" style={{ marginBottom: 8 }}>Address</div>
              <div style={{ fontSize: 14, lineHeight: 1.7, color: '#0a1f17', marginBottom: 16 }}>
                Marsan Atelier · 4th Floor<br />Road No 12, Banjara Hills<br />Hyderabad 500034
              </div>
              <div className="ms-eyebrow" style={{ marginBottom: 8 }}>Hours</div>
              <div style={{ fontSize: 14, color: '#0a1f17', marginBottom: 16 }}>
                Mon – Sat · 9:30 AM – 7:00 PM<br />Sun · By appointment
              </div>
              <a href="/enquire.html?type=visit" className="ms-btn ms-btn-ghost-dark ms-btn-sm" style={{ width: '100%' }}>
                <Icon name="calendar" size={12} /> Book Studio Visit
              </a>
            </div>
          </div>
          <div style={{ background: '#dbe7d8', border: '1px solid #d9cfb8', minHeight: 480, position: 'relative', overflow: 'hidden' }}>
            <iframe title="map" src="https://www.google.com/maps?q=17.4126,78.4310&z=14&output=embed" style={{ width: '100%', height: '100%', border: 0 }} loading="lazy" />
            <div style={{ position: 'absolute', top: 16, left: 16, background: '#fff', border: '1px solid #d9cfb8', padding: '8px 12px', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#0a1f17' }}>BANJARA HILLS</div>
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="ms-collapse-mobile">
          {[
            { t: 'Press & media', d: 'Logos, founder bio, brand assets, project shoot library.', c: 'press@marsan.in' },
            { t: 'Careers', d: 'Open roles in advisory, legal, construction, and brand.', c: 'careers@marsan.in' },
            { t: 'Channel partners', d: 'Empanelment for IPCs, agents, and architects.', c: 'partners@marsan.in' },
          ].map(b => (
            <div key={b.t} style={{ background: '#efe8d8', padding: 32, border: '1px solid #d9cfb8' }}>
              <h3 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 22, color: '#0a1f17', margin: '0 0 12px' }}>{b.t}</h3>
              <p style={{ fontSize: 13, color: '#4a4540', lineHeight: 1.7, margin: '0 0 16px' }}>{b.d}</p>
              <a href={'mailto:' + b.c} className="ms-meta" style={{ color: '#a88841', textDecoration: 'none' }}>{b.c}</a>
            </div>
          ))}
        </div>
      </section>
      <C.Footer />
    </div>
  );
};

window.LeadCapturePage = LeadCapturePage;
window.AboutPage = AboutPage;
window.GalleryPage = GalleryPage;
window.InsightsPage = InsightsPage;
window.FAQPage = FAQPage;
window.ContactPage = ContactPage;