// Marsan Properties — Home Page

const HomePage = () => {
  const { Icon, Header, Footer, PropertyCard, SectionHeader, CountUp } = window.MarsanComponents;
  const { PROPERTIES, CATEGORIES, TRUST_PILLARS, TESTIMONIALS, ARTICLES, HOMEPAGE } = window.MARSAN_DATA;
  const HP = HOMEPAGE || {};
  const [purpose, setPurpose] = React.useState('Buy');
  const [activeTestimonial, setActiveTestimonial] = React.useState(0);
  const [search, setSearch] = React.useState({ location: '', cat: '', budget: '' });

  React.useEffect(() => {
    if (!TESTIMONIALS.length) return;
    const t = setInterval(() => setActiveTestimonial(i => (i + 1) % TESTIMONIALS.length), 6000);
    return () => clearInterval(t);
  }, [TESTIMONIALS.length]);

  const featured = PROPERTIES.filter(p => p.featured).slice(0, 6);
  const cats = CATEGORIES.length ? CATEGORIES : [
    { name: 'Open Plots', count: 14, icon: 'plot' }, { name: 'Villas', count: 6, icon: 'villa' },
    { name: 'Apartments', count: 9, icon: 'tower' }, { name: 'Farm Lands', count: 5, icon: 'farm' },
    { name: 'Commercial', count: 7, icon: 'commercial' }, { name: 'Upcoming', count: 4, icon: 'upcoming' },
  ];

  const onSearch = (e) => {
    e.preventDefault();
    const q = new URLSearchParams();
    if (search.cat) q.set('cat', search.cat);
    if (search.budget) q.set('budget', search.budget);
    if (search.location) q.set('q', search.location);
    window.location.href = '/properties.html' + (q.toString() ? '?' + q.toString() : '');
  };

  return (
    <div className="ms-root" style={{ width: '100%', minHeight: '100%' }}>

      {/* HERO */}
      <section style={{ position: 'relative', minHeight: 880, overflow: 'hidden' }} className="ms-grain">
        <div style={{ position: 'absolute', inset: 0,
          background: `radial-gradient(ellipse at 70% 20%, rgba(20,76,56,0.55), transparent 60%),
                       radial-gradient(ellipse at 20% 80%, rgba(168,136,65,0.18), transparent 50%),
                       linear-gradient(135deg, #0a1f17 0%, #0f2a1f 50%, #143a2a 100%)`,
        }} />
        <div style={{ position: 'absolute', top: 0, right: 0, width: '52%', height: '100%',
          clipPath: 'polygon(15% 0, 100% 0, 100% 100%, 0 100%)',
        }}>
          {(() => {
            const img = (HP.hero && HP.hero.image_url) || '/assets/evara/hero-villa-twilight.jpg';
            const vid = (HP.hero && HP.hero.video_url) || '/assets/evara/hero-villa-twilight.mp4';
            // Autoplay loop muted — needed for browsers to auto-play. Image is the poster
            // so the first paint is instant and slow connections still see something premium.
            return (
              <video autoPlay muted loop playsInline poster={img}
                style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}>
                <source src={vid} type="video/mp4" />
                <img className="ms-kenburns" src={img} alt="Marsan estate at twilight"
                  style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
              </video>
            );
          })()}
          <div style={{ position: 'absolute', inset: 0,
            background: 'linear-gradient(90deg, #0a1f17 0%, transparent 35%, transparent 70%, rgba(10,31,23,0.3) 100%)' }} />
        </div>

        <Header active="Home" light />

        <div style={{ position: 'relative', padding: '100px 56px 0', maxWidth: 1440, margin: '0 auto' }}>
          <div style={{ maxWidth: 720 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 28 }}>
              <div className="ms-divider" />
              <span className="ms-eyebrow on-dark">{(HP.hero && HP.hero.eyebrow) || 'Est. 2014 · Hyderabad'}</span>
            </div>
            <h1 style={{
              fontFamily: 'Cormorant Garamond, serif', fontWeight: 300,
              fontSize: 92, lineHeight: 0.98, color: '#f6f1e6',
              margin: '0 0 28px', letterSpacing: '-0.015em',
            }} className="ms-type-reveal ms-h1">
              {(() => {
                const headline = (HP.hero && HP.hero.headline) || 'Premium properties for a *lifetime* of value.';
                // Split into words. Each word renders as inline-block (so it can animate
                // independently). The space between words must live OUTSIDE the
                // inline-block as a real text node, otherwise it collapses to nothing.
                const words = headline.split(/\s+/).filter(Boolean);
                const out = [];
                words.forEach((w, i) => {
                  const delay = `${0.05 + i * 0.08}s`;
                  const isItalic = /^\*.+\*$/.test(w);
                  const text = isItalic ? w.slice(1, -1) : w;
                  out.push(isItalic
                    ? <em   key={`w${i}`} style={{ fontStyle: 'italic', color: '#e2bd6b', fontWeight: 400, animationDelay: delay }}>{text}</em>
                    : <span key={`w${i}`} style={{ animationDelay: delay }}>{text}</span>);
                  if (i < words.length - 1) out.push(<React.Fragment key={`s${i}`}> </React.Fragment>);
                });
                return out;
              })()}
            </h1>
            <p style={{ fontSize: 18, lineHeight: 1.6, color: 'rgba(232,220,193,0.75)', maxWidth: 540, margin: '0 0 48px' }}>
              {(HP.hero && HP.hero.sub) || "A privately-curated portfolio of land, villas, residences and commercial spaces — assembled along Hyderabad's most resilient growth corridors and held to investor-grade due diligence."}
            </p>

            <div style={{ display: 'flex', gap: 4, background: 'rgba(255,255,255,0.04)', padding: 4, width: 'fit-content', border: '1px solid rgba(232,220,193,0.12)', borderBottom: 'none' }}>
              {['Buy', 'Invest', 'Build', 'Commercial'].map(t => (
                <button key={t} onClick={() => setPurpose(t)} style={{
                  padding: '10px 22px', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
                  border: 'none', cursor: 'pointer',
                  background: purpose === t ? 'linear-gradient(135deg, #c9a55c, #e2bd6b)' : 'transparent',
                  color: purpose === t ? '#0a1f17' : 'rgba(232,220,193,0.7)',
                  fontWeight: purpose === t ? 600 : 400,
                }}>{t}</button>
              ))}
            </div>

            <form onSubmit={onSearch} style={{
              background: 'rgba(255,255,255,0.06)',
              backdropFilter: 'blur(20px)', WebkitBackdropFilter: 'blur(20px)',
              border: '1px solid rgba(232,220,193,0.18)',
              padding: 24, display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr auto', gap: 0,
            }} className="ms-collapse-mobile">
              <div style={{ padding: '4px 24px', borderRight: '1px solid rgba(232,220,193,0.18)' }}>
                <div className="ms-label on-dark">Location</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: '#f6f1e6', fontSize: 15 }}>
                  <Icon name="pin" size={16} color="#c9a55c" />
                  <input value={search.location} onChange={(e) => setSearch(s => ({ ...s, location: e.target.value }))}
                    placeholder="Hyderabad — All"
                    style={{ background: 'transparent', border: 'none', color: '#f6f1e6', fontFamily: 'Inter', fontSize: 15, outline: 'none', flex: 1 }} />
                </div>
              </div>
              <div style={{ padding: '4px 24px', borderRight: '1px solid rgba(232,220,193,0.18)' }}>
                <div className="ms-label on-dark">Property Type</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: '#f6f1e6', fontSize: 15 }}>
                  <Icon name="plot" size={16} color="#c9a55c" />
                  <select value={search.cat} onChange={(e) => setSearch(s => ({ ...s, cat: e.target.value }))}
                    style={{ background: 'transparent', border: 'none', color: '#f6f1e6', fontFamily: 'Inter', fontSize: 15, outline: 'none', flex: 1 }}>
                    <option value="" style={{ color: '#0a1f17' }}>All Categories</option>
                    {cats.map(c => <option key={c.name} value={c.name} style={{ color: '#0a1f17' }}>{c.name}</option>)}
                  </select>
                </div>
              </div>
              <div style={{ padding: '4px 24px' }}>
                <div className="ms-label on-dark">Budget</div>
                <div style={{ display: 'flex', alignItems: 'center', gap: 10, color: '#f6f1e6', fontSize: 15 }}>
                  <Icon name="diamond" size={16} color="#c9a55c" />
                  <select value={search.budget} onChange={(e) => setSearch(s => ({ ...s, budget: e.target.value }))}
                    style={{ background: 'transparent', border: 'none', color: '#f6f1e6', fontFamily: 'Inter', fontSize: 15, outline: 'none', flex: 1 }}>
                    <option value="" style={{ color: '#0a1f17' }}>₹50L — ₹3Cr</option>
                    <option value="50-100" style={{ color: '#0a1f17' }}>Up to ₹1Cr</option>
                    <option value="100-300" style={{ color: '#0a1f17' }}>₹1Cr – ₹3Cr</option>
                    <option value="300-1000" style={{ color: '#0a1f17' }}>₹3Cr – ₹10Cr</option>
                    <option value="1000-99999" style={{ color: '#0a1f17' }}>₹10Cr+</option>
                  </select>
                </div>
              </div>
              <button type="submit" className="ms-btn ms-btn-primary" style={{ alignSelf: 'stretch', padding: '0 56px', minWidth: 180 }}>
                <Icon name="search" size={16} /> Search
              </button>
            </form>

            <div style={{ display: 'flex', gap: 16, marginTop: 28, flexWrap: 'wrap' }}>
              <a href="/properties.html" className="ms-btn ms-btn-ghost ms-btn-sm">Explore Properties <Icon name="arrow" size={14} /></a>
              <a href="/enquire.html?type=visit" className="ms-btn ms-btn-ghost ms-btn-sm">Book Site Visit</a>
              <a href="/enquire.html" className="ms-btn ms-btn-ghost ms-btn-sm">Talk to an Advisor</a>
            </div>

            <div style={{ display: 'flex', gap: 64, marginTop: 80, paddingTop: 32, borderTop: '1px solid rgba(232,220,193,0.12)', flexWrap: 'wrap' }}>
              {(HP.stats && HP.stats.length ? HP.stats : [
                { value: '₹1,400 Cr+', label: 'Inventory under management' },
                { value: '38',         label: 'Active developments' },
                { value: '2,100+',     label: 'Families settled' },
              ]).map(m => (
                <div key={m.label}>
                  <div style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 32, color: '#e2bd6b' }}>{m.value}</div>
                  <div style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(232,220,193,0.55)', marginTop: 6 }}>{m.label}</div>
                </div>
              ))}
            </div>
          </div>
        </div>

        <div className="ms-only-desktop" style={{ position: 'absolute', right: 56, bottom: 40, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 12, color: 'rgba(232,220,193,0.5)' }}>
          <div className="ms-divider-tall" />
          <span style={{ writingMode: 'vertical-rl', fontSize: 10, letterSpacing: '0.3em', textTransform: 'uppercase' }}>Scroll</span>
        </div>
      </section>

      {/* CATEGORIES STRIP */}
      <section style={{ background: '#f6f1e6', padding: '32px 56px', borderBottom: '1px solid #d9cfb8' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 16 }} className="ms-mobile-stack">
          <span className="ms-eyebrow">Browse by category</span>
          <div style={{ display: 'flex', gap: 0, flexWrap: 'wrap' }}>
            {cats.map((c, i) => (
              <a href={`/properties.html?cat=${encodeURIComponent(c.name)}`} key={c.name} style={{
                padding: '14px 28px',
                borderLeft: i === 0 ? '1px solid #d9cfb8' : 'none',
                borderRight: '1px solid #d9cfb8',
                display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
                textDecoration: 'none', color: 'inherit',
              }}>
                <Icon name={c.icon} size={18} color="#a88841" />
                <div>
                  <div style={{ fontSize: 13, fontWeight: 500, color: '#0a1f17' }}>{c.name}</div>
                  <div style={{ fontSize: 10, color: '#8c857b', letterSpacing: '0.1em' }}>{c.count} active</div>
                </div>
              </a>
            ))}
          </div>
        </div>
      </section>

      {/* FEATURED PROPERTIES */}
      <section style={{ background: '#f6f1e6', padding: '120px 56px' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto' }}>
          <SectionHeader
            eyebrow={(HP.featured && HP.featured.eyebrow) || 'The Marsan Portfolio'}
            title={(HP.featured && HP.featured.title) || (PROPERTIES.length === 1 ? 'One curated development. One standard.' : `${PROPERTIES.length || 'Several'} developments. One standard.`)}
            body={(HP.featured && HP.featured.body) || 'Our active inventory is small by design. Every project on this page has cleared a 14-point legal review, has approved master plans on file, and is escorted to handover by a dedicated relationship advisor.'}
            action={<a href="/properties.html" className="ms-btn ms-btn-ghost-dark ms-btn-sm">View {PROPERTIES.length === 1 ? 'the development' : `all ${PROPERTIES.length} properties`} <Icon name="arrow" size={14} /></a>}
          />
          <div className="ms-collapse-mobile ms-reveal-stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24 }}>
            {featured.length ? featured.map(p => (
              <div key={p.id} className="ms-reveal"><PropertyCard p={p} /></div>
            )) : (
              [0,1,2,3,4,5].map(i => <div key={i} className="ms-skel" style={{ height: 480 }} />)
            )}
          </div>
        </div>
      </section>

      {/* CATEGORY SHOWCASE */}
      <section style={{ background: '#0a1f17', padding: '120px 56px', position: 'relative' }} className="ms-grain">
        <div style={{ maxWidth: 1440, margin: '0 auto', position: 'relative', zIndex: 1 }}>
          <SectionHeader
            light
            eyebrow={(HP.categories && HP.categories.eyebrow) || 'A category for every conviction'}
            title={(HP.categories && HP.categories.title) || 'The categories we curate.'}
            body={(HP.categories && HP.categories.body) || 'Whether you are buying a forever home, building a legacy estate or deploying capital across asset classes — Marsan curates inventory across categories with different risk, holding and yield profiles.'}
          />
          {(() => {
            const META = {
              'Farm Lands':  { desc: 'Eco-luxury farm-villa plots within working organic communities.', img: '/assets/evara/farm-walk.jpg' },
              'Open Plots':  { desc: 'Approved, gated plotted communities along ORR & growth corridors.', img: 'https://images.unsplash.com/photo-1564013799919-ab600027ffc6?w=1600&q=85&auto=format&fit=crop' },
              'Villas':      { desc: 'Architect-led private residences.', img: 'https://images.unsplash.com/photo-1600596542815-ffad4c1539a9?w=1200&q=85&auto=format&fit=crop' },
              'Apartments':  { desc: 'Boutique & branded high-rises.', img: 'https://images.unsplash.com/photo-1613490493576-7fde63acd811?w=1200&q=85&auto=format&fit=crop' },
              'Commercial':  { desc: 'Grade-A offices, retail, mixed-use.', img: 'https://images.unsplash.com/photo-1486325212027-8081e485255e?w=1200&q=85&auto=format&fit=crop' },
              'Upcoming':    { desc: 'Pre-launch & invitation-only releases.', img: 'https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=1600&q=85&auto=format&fit=crop' },
            };
            const live = (cats.length ? cats : []).map(c => ({ name: c.name, count: c.count, ...(META[c.name] || META['Open Plots']) }));

            // Layout adapts to the number of live categories so the grid is balanced at any N.
            // 1 → single full-bleed; 2 → two equal; 3 → three equal; 4 → 2×2;
            // 5+ → 1 large + small tiles (the editorial 2fr|1fr|1fr × 2-row grid).
            const N = live.length;
            const grid =
              N === 0 ? null :
              N === 1 ? { cols: '1fr',                rows: '420px',           heroIdx: -1 } :
              N === 2 ? { cols: 'repeat(2, 1fr)',     rows: '380px',           heroIdx: -1 } :
              N === 3 ? { cols: 'repeat(3, 1fr)',     rows: '360px',           heroIdx: -1 } :
              N === 4 ? { cols: 'repeat(2, 1fr)',     rows: 'repeat(2, 280px)', heroIdx: -1 } :
                        { cols: '2fr 1fr 1fr',        rows: 'repeat(2, 300px)', heroIdx: 0  };
            if (!grid) return <div style={{ padding: 60, textAlign: 'center', color: 'rgba(232,220,193,0.5)' }}>Categories appear here as you publish properties.</div>;

            return (
              <div className="ms-collapse-mobile" style={{ display: 'grid', gridTemplateColumns: grid.cols, gridTemplateRows: grid.rows, gap: 16 }}>
                {live.map((c, i) => (
                  <a href={`/properties.html?cat=${encodeURIComponent(c.name)}`} key={c.name} style={{
                    gridColumn: i === grid.heroIdx ? 'span 1' : 'auto',
                    gridRow:    i === grid.heroIdx ? 'span 2' : 'auto',
                    position: 'relative', overflow: 'hidden', cursor: 'pointer',
                    textDecoration: 'none',
                  }}>
                    <img src={c.img} alt={c.name}
                      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 0.6s ease' }} />
                    <div style={{ position: 'absolute', inset: 0,
                      background: 'linear-gradient(180deg, transparent 40%, rgba(10,31,23,0.95) 100%)' }} />
                    <div style={{ position: 'absolute', left: 24, right: 24, bottom: 24 }}>
                      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', marginBottom: 8 }}>
                        <h3 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: i === grid.heroIdx ? 36 : 26, color: '#f6f1e6', margin: 0 }}>{c.name}</h3>
                        <span className="ms-meta" style={{ color: '#e2bd6b' }}>{c.count} ACTIVE</span>
                      </div>
                      <p style={{ fontSize: 13, color: 'rgba(232,220,193,0.7)', margin: 0 }}>{c.desc}</p>
                    </div>
                  </a>
                ))}
              </div>
            );
          })()}
        </div>
      </section>

      {/* TRUST PILLARS */}
      <section style={{ background: '#efe8d8', padding: '120px 56px' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto' }}>
          <SectionHeader
            eyebrow={(HP.trust && HP.trust.eyebrow) || 'Why families choose Marsan'}
            title={(HP.trust && HP.trust.title) || 'Six commitments. Independently audited. Delivered every time.'}
            body={(HP.trust && HP.trust.body) || "Real estate moves on trust. We've written ours down — and audit ourselves against it every quarter."}
          />
          <div className="ms-collapse-mobile ms-reveal-stagger" style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 0, border: '1px solid #d9cfb8', background: '#fff' }}>
            {TRUST_PILLARS.map((t, i) => (
              <div key={t.num} className="ms-reveal" style={{
                padding: '40px 36px',
                borderRight: (i + 1) % 3 !== 0 ? '1px solid #d9cfb8' : 'none',
                borderBottom: i < 3 ? '1px solid #d9cfb8' : 'none',
                position: 'relative',
              }}>
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start', marginBottom: 24 }}>
                  <span style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 36, color: '#c9a55c', fontStyle: 'italic' }}>{t.num}</span>
                  <div className="ms-divider" style={{ marginTop: 16 }} />
                </div>
                <h3 className="ms-h4" style={{ color: '#0a1f17', margin: '0 0 12px' }}>{t.title}</h3>
                <p style={{ fontSize: 14, lineHeight: 1.7, color: '#4a4540', margin: 0 }}>{t.body}</p>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* PROCESS */}
      <section id="process" style={{ background: '#f6f1e6', padding: '120px 56px' }}>
        <div style={{ maxWidth: 1440, margin: '0 auto' }}>
          <SectionHeader
            eyebrow={(HP.process && HP.process.eyebrow) || 'The Marsan process'}
            title={(HP.process && HP.process.title) || 'From first enquiry to keys in hand — in five guided steps.'}
          />
          {(() => {
            const steps = (HP.process && HP.process.steps && HP.process.steps.length) ? HP.process.steps : [
              { roman: 'I',   title: 'Private brief',         body: 'A 30-minute call to understand your goal, budget, horizon and family.' },
              { roman: 'II',  title: 'Curated shortlist',     body: 'A 3–5 property edit hand-picked to your brief, with full legal files.' },
              { roman: 'III', title: 'Concierged visits',     body: 'Chauffeured site visits with on-ground advisors and overnight stays.' },
              { roman: 'IV',  title: 'Transparent paperwork', body: 'Digital due-diligence pack, sale agreement walk-through, registration support.' },
              { roman: 'V',   title: 'Lifetime stewardship',  body: 'A single advisor on-call for mutation, construction, resale — even years later.' },
            ];
            return (
              <div className="ms-collapse-mobile" style={{ display: 'grid', gridTemplateColumns: `repeat(${steps.length}, 1fr)`, position: 'relative' }}>
                <div style={{ position: 'absolute', top: 30, left: '10%', right: '10%', height: 1, background: '#d9cfb8' }} />
                {steps.map(s => (
                  <div key={s.roman || s.step || s.title} style={{ padding: '0 16px', textAlign: 'center', position: 'relative' }}>
                    <div style={{
                      width: 60, height: 60, margin: '0 auto 28px',
                      border: '1px solid #c9a55c', background: '#f6f1e6',
                      display: 'flex', alignItems: 'center', justifyContent: 'center',
                      fontFamily: 'Cormorant Garamond, serif', fontSize: 24, fontStyle: 'italic', color: '#a88841',
                      position: 'relative', zIndex: 1,
                    }}>{s.roman || s.step}</div>
                    <h3 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 20, color: '#0a1f17', margin: '0 0 10px' }}>{s.title}</h3>
                    <p style={{ fontSize: 13, lineHeight: 1.6, color: '#4a4540', margin: 0 }}>{s.body}</p>
                  </div>
                ))}
              </div>
            );
          })()}
        </div>
      </section>

      {/* TESTIMONIALS */}
      {(HP.testimonials_section?.show !== false) && (
      <section style={{ background: '#0a1f17', padding: '120px 56px', position: 'relative' }} className="ms-grain">
        <div style={{ maxWidth: 1100, margin: '0 auto', position: 'relative', zIndex: 1, textAlign: 'center' }}>
          <div className="ms-eyebrow on-dark" style={{ marginBottom: 24 }}>{HP.testimonials_section?.eyebrow || 'From the families we serve'}</div>
          <div style={{ position: 'relative', minHeight: 280 }}>
            {(TESTIMONIALS.length ? TESTIMONIALS : [{ name: '', role: '', body: 'Testimonials coming soon.', property: '' }]).map((t, i) => (
              <div key={i} style={{
                position: i === activeTestimonial ? 'relative' : 'absolute',
                inset: 0, opacity: i === activeTestimonial ? 1 : 0,
                transition: 'opacity 0.4s',
              }}>
                <p style={{
                  fontFamily: 'Cormorant Garamond, serif', fontSize: 38, lineHeight: 1.35,
                  color: '#f6f1e6', fontStyle: 'italic', fontWeight: 300, margin: '0 0 40px',
                }}>"{t.body}"</p>
                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 16 }}>
                  <div style={{ width: 48, height: 48, borderRadius: '50%', background: 'linear-gradient(135deg, #c9a55c, #a88841)', display: 'flex', alignItems: 'center', justifyContent: 'center', color: '#0a1f17', fontFamily: 'Cormorant Garamond, serif', fontSize: 20 }}>
                    {(t.name || ' ').charAt(0)}
                  </div>
                  <div style={{ textAlign: 'left' }}>
                    <div style={{ color: '#e2bd6b', fontSize: 14, fontWeight: 500 }}>{t.name}</div>
                    <div style={{ color: 'rgba(232,220,193,0.6)', fontSize: 12, letterSpacing: '0.1em' }}>{t.role}{t.property ? ' · ' + t.property : ''}</div>
                  </div>
                </div>
              </div>
            ))}
          </div>
          {TESTIMONIALS.length > 1 && (
            <div style={{ display: 'flex', justifyContent: 'center', gap: 8, marginTop: 48 }}>
              {TESTIMONIALS.map((_, i) => (
                <button key={i} onClick={() => setActiveTestimonial(i)} aria-label={`Testimonial ${i+1}`} style={{
                  width: i === activeTestimonial ? 32 : 12, height: 2,
                  background: i === activeTestimonial ? '#c9a55c' : 'rgba(232,220,193,0.25)',
                  border: 'none', cursor: 'pointer', transition: 'all 0.3s',
                }} />
              ))}
            </div>
          )}
        </div>
      </section>
      )}

      {/* INSIGHTS STRIP */}
      {(HP.insights_section?.show !== false) && (
      <section style={{ background: '#f6f1e6', padding: '120px 56px' }}>
        <div className="ms-collapse-mobile" style={{ maxWidth: 1440, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1.4fr', gap: 80 }}>
          <div>
            <div className="ms-eyebrow" style={{ marginBottom: 16 }}>{HP.insights_section?.eyebrow || 'Marsan Insights'}</div>
            <h2 className="ms-h2" style={{ color: '#0a1f17', margin: '0 0 20px' }}>{HP.insights_section?.title || 'Notes on Hyderabad real estate.'}</h2>
            <p style={{ fontSize: 15, lineHeight: 1.7, color: '#4a4540', margin: '0 0 32px' }}>
              {HP.insights_section?.body || 'Quarterly intelligence on growth corridors, micro-market pricing, regulatory shifts and capital strategy — written for buyers and investors, not for clicks.'}
            </p>
            <a href="/insights.html" className="ms-btn ms-btn-ghost-dark">Read All Insights <Icon name="arrow" size={14} /></a>
          </div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 0 }}>
            {(ARTICLES.length ? ARTICLES : []).slice(0, 3).map((a, i) => (
              <a href={`/article.html?slug=${a.slug}`} key={a.slug} style={{
                padding: '28px 0', borderTop: '1px solid #d9cfb8',
                borderBottom: i === 2 ? '1px solid #d9cfb8' : 'none',
                display: 'grid', gridTemplateColumns: 'auto 140px 1fr auto', gap: 32, alignItems: 'center', cursor: 'pointer',
                textDecoration: 'none', color: 'inherit',
              }}>
                <span className="ms-meta">0{i + 1}</span>
                <span className="ms-chip">{a.category}</span>
                <h3 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 22, color: '#0a1f17', margin: 0 }}>{a.title}</h3>
                <Icon name="arrow" size={16} color="#a88841" />
              </a>
            ))}
          </div>
        </div>
      </section>
      )}

      {/* CTA */}
      <section style={{ background: '#143a2a', padding: '100px 56px', position: 'relative', overflow: 'hidden' }} className="ms-grain">
        <div style={{ maxWidth: 1440, margin: '0 auto', display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 80, position: 'relative', zIndex: 1 }} className="ms-mobile-stack">
          <div style={{ flex: 1 }}>
            <div className="ms-eyebrow on-dark" style={{ marginBottom: 16 }}>{HP.cta?.eyebrow || 'Begin your search'}</div>
            <h2 style={{ fontFamily: 'Cormorant Garamond, serif', fontSize: 56, color: '#f6f1e6', margin: '0 0 20px', lineHeight: 1.1 }}>
              {HP.cta?.title || 'Spend a quiet hour with us.'}
            </h2>
            <p style={{ fontSize: 16, color: 'rgba(232,220,193,0.7)', maxWidth: 540, margin: 0 }}>
              {HP.cta?.body || "Tell us your brief — horizon, budget, family, intent — and we'll send back a 3-property edit within 48 hours. No pressure. No mass mailers."}
            </p>
          </div>
          <div style={{ display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <a href="/enquire.html" className="ms-btn ms-btn-primary ms-btn-lg">{HP.cta?.primary || 'Request a Private Consultation'}</a>
            <a href="https://wa.me/919849999708" target="_blank" rel="noopener" className="ms-btn ms-btn-ghost ms-btn-lg"><Icon name="whatsapp" size={16} /> WhatsApp</a>
          </div>
        </div>
      </section>

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

window.HomePage = HomePage;