/* All page sections except the inquiry form */

const ROOMS = [
  { id: 'hall',     n: 1,  title: 'Hall & Entrance',         tagline: 'The first impression.',           img: 'assets/img/villa-exterior-twilight.jpg', notes: 'Marble portals, statement lighting, full ceiling redesign and bespoke joinery for arrival moments that hold.' },
  { id: 'living',   n: 2,  title: 'Living / Drawing Room',   tagline: 'Where the home gathers.',         img: 'assets/img/interior-night.jpg',          notes: 'Layered lighting, custom media walls, fluted wood paneling, and reupholstered millwork tuned to UAE climate.' },
  { id: 'master',   n: 3,  title: 'Master Bedroom',          tagline: 'A private sanctuary.',            img: null, notes: 'Walk-in dressing rooms, continuous wood veneers, smart blackout systems and ensuite reflows.' },
  { id: 'guest',    n: 4,  title: 'Guest Bedrooms',          tagline: 'Hospitality, refined.',           img: null, notes: 'Hotel-grade headboards, integrated wardrobes, soft acoustic ceilings, individual climate zones.' },
  { id: 'maid',     n: 5,  title: 'Maid\u2019s Room',         tagline: 'Quietly upgraded.',               img: null, notes: 'Dignified staff quarters: ventilation, durable finishes, ensuite refit and storage that respects the role.' },
  { id: 'bath',     n: 6,  title: 'Bathrooms',                tagline: 'Hotel suite at home.',            img: null, notes: 'Full waterproofing reset, large-format porcelain, brass-trimmed glass enclosures, underfloor heating.' },
  { id: 'kitchen',  n: 7,  title: 'Kitchen',                  tagline: 'From much-loved to outstanding.',   img: 'assets/img/kitchen-before.jpg', notes: 'Open layouts, German-spec cabinetry, stone island tops, integrated appliances, hidden cooking pantries.' },
  { id: 'majlis',   n: 8,  title: 'Majlis',                   tagline: 'Tradition, modern hand.',         img: null, notes: 'Bespoke seating, gypsum ceilings, decorative panels, oud-friendly ventilation and acoustic isolation.' },
  { id: 'dining',   n: 9,  title: 'Dining',                   tagline: 'Set the table for memory.',       img: null, notes: 'Statement chandeliers, sideboard joinery, dimmable scene control and layout reflow for 10–18 covers.' },
  { id: 'outdoor',  n: 10, title: 'Outdoor & Landscape',      tagline: 'For the desert and the breeze.',  img: 'assets/img/pool-villa.jpg', notes: 'Pool deck refits, shading structures, irrigation, exterior cladding tuned for Dubai summer.' },
];

/* ============ Top Nav ============ */
function Nav({ onOpenInquiry, onOpenDownload }) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 30);
    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const items = [
    ['About', '#about'],
    ['Rooms', '#rooms'],
    ['Communities', '#communities'],
    ['Portfolio', '#portfolio'],
    ['Instagram', '#instagram'],
    ['Contact', '#contact'],
  ];
  return (
    <header style={{
      position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
      padding: scrolled ? '14px 6vw' : '24px 6vw',
      background: scrolled ? 'rgba(10,10,10,0.85)' : 'transparent',
      backdropFilter: scrolled ? 'blur(14px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'blur(14px)' : 'none',
      borderBottom: scrolled ? '1px solid rgba(245,239,230,0.06)' : '1px solid transparent',
      transition: 'all .3s ease',
      display: 'flex', alignItems: 'center', justifyContent: 'space-between',
    }}>
      <Wordmark size={scrolled ? 16 : 18} />
      <nav style={{ display: 'flex', gap: 36, alignItems: 'center' }} className="hn-desk">
        {items.map(([label, href]) => (
          <a key={href} href={href} style={{
            color: '#F5EFE6', fontSize: 13, fontFamily: 'Manrope', fontWeight: 500,
            letterSpacing: '0.08em', textTransform: 'uppercase', textDecoration: 'none',
            opacity: 0.78,
          }}
          onMouseEnter={(e) => e.target.style.opacity = 1}
          onMouseLeave={(e) => e.target.style.opacity = 0.78}>
            {label}
          </a>
        ))}
        <Btn variant="primary" onClick={onOpenInquiry} style={{ padding: '12px 18px', fontSize: 12 }}>
          Get a Quote →
        </Btn>
      </nav>
      <button className="hn-mob" onClick={() => setOpen(!open)} style={{
        display: 'none', background: 'transparent', border: 'none', color: '#F5EFE6', fontSize: 22, cursor: 'pointer'
      }}>{open ? '✕' : '≡'}</button>

      {open && (
        <div className="hn-mob-panel" style={{
          position: 'fixed', top: 60, left: 0, right: 0,
          background: '#0A0A0A', borderTop: '1px solid rgba(245,239,230,0.08)',
          padding: '24px 6vw', display: 'flex', flexDirection: 'column', gap: 18,
        }}>
          {items.map(([label, href]) => (
            <a key={href} href={href} onClick={() => setOpen(false)} style={{
              color: '#F5EFE6', fontFamily: 'Manrope', fontSize: 16, textDecoration: 'none',
              padding: '8px 0', borderBottom: '1px solid rgba(245,239,230,0.06)',
            }}>{label}</a>
          ))}
          <Btn variant="primary" onClick={() => { onOpenInquiry(); setOpen(false); }}>Get a Quote →</Btn>
        </div>
      )}

      <style>{`
        @media (max-width: 860px) {
          .hn-desk { display: none !important; }
          .hn-mob { display: block !important; }
        }
      `}</style>
    </header>
  );
}

/* ============ Hero ============ */
function Hero({ onOpenInquiry }) {
  return (
    <section id="top" data-screen-label="00 Hero" style={{
      position: 'relative',
      minHeight: '100vh',
      padding: '140px 6vw 80px',
      background: '#0A0A0A',
      overflow: 'hidden',
    }}>
      {/* Background image with overlay */}
      <div style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(assets/img/hero-pool.jpg)',
        backgroundSize: 'cover', backgroundPosition: 'center',
        filter: 'grayscale(0.2) brightness(0.55)',
      }} />
      <div style={{
        position: 'absolute', inset: 0,
        background: 'linear-gradient(180deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0.4) 50%, rgba(10,10,10,0.95) 100%)',
      }} />

      {/* Foreground */}
      <div style={{ position: 'relative', maxWidth: 1400, margin: '0 auto', height: 'calc(100vh - 220px)', minHeight: 600, display: 'flex', flexDirection: 'column', justifyContent: 'space-between' }}>
        <div style={{
          marginTop: 20,
          fontFamily: 'Manrope', fontSize: 12, fontWeight: 600, letterSpacing: '0.22em', textTransform: 'uppercase',
          color: '#C9A86A',
        }}>
          HNHUAE Technical Services LLC · UAE since 2014
        </div>

        <div>
          <h1 style={{
            fontSize: 'clamp(46px, 9vw, 148px)',
            color: '#F5EFE6',
            maxWidth: '12ch',
          }}>
            We give <Highlight>much-loved villas</Highlight> a new chapter.
          </h1>
          <p style={{
            marginTop: 32, maxWidth: 540,
            fontFamily: 'Manrope', fontSize: 18, lineHeight: 1.55, color: 'rgba(245,239,230,0.78)',
            fontWeight: 400,
          }}>
            Complete renovation and refurbishment for much-loved villas and flats across the UAE — managed end-to-end, room by room, finish by finish.
          </p>
          <div style={{ marginTop: 40, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
            <Btn variant="primary" onClick={onOpenInquiry}>Start an Inquiry →</Btn>
            <Btn variant="ghost" href="#rooms">Explore Rooms</Btn>
          </div>
        </div>

        <div style={{
          display: 'flex', gap: 48, flexWrap: 'wrap',
          paddingTop: 32, borderTop: '1px solid rgba(245,239,230,0.12)',
        }}>
          {[
            ['10+', 'Room categories'],
            ['200+', 'Villas refurbished'],
            ['UAE', 'Wide service area'],
            ['7', 'Specialist trades in-house'],
          ].map(([a, b]) => (
            <div key={b}>
              <div style={{ fontFamily: 'Archivo Black', fontSize: 32, color: '#F5B82E', letterSpacing: '-0.02em' }}>{a}</div>
              <div style={{ fontFamily: 'Manrope', fontSize: 12, color: 'rgba(245,239,230,0.6)', letterSpacing: '0.14em', textTransform: 'uppercase', marginTop: 6 }}>{b}</div>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ============ About ============ */
function About() {
  return (
    <Section id="about" label="01 About" eyebrow="About HNHUAE" dark>
      <div style={{ maxWidth: 1400, margin: '0 auto', display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 40 }}>
        <div style={{ gridColumn: 'span 7' }} className="about-text">
          <h2 style={{ fontSize: 'clamp(40px, 5.4vw, 76px)', color: '#F5EFE6' }}>
            Is your home ready for a <Highlight>new chapter</Highlight>?
          </h2>
          <p style={{ marginTop: 32, fontFamily: 'Manrope', fontSize: 19, lineHeight: 1.55, color: 'rgba(245,239,230,0.78)', maxWidth: 620 }}>
            We provide complete renovation and refurbishment solutions, managed the right way. From cracked exteriors that can't take another Dubai summer, to interiors that haven't been touched since handover — HNHUAE is the single team you call.
          </p>
          <p style={{ marginTop: 18, fontFamily: 'Manrope', fontSize: 19, lineHeight: 1.55, color: 'rgba(245,239,230,0.78)', maxWidth: 620 }}>
            One project manager. One contract. <span className="serif" style={{color:'#F5B82E'}}>Every</span> trade in-house — civil, MEP, joinery, finishing, smart-home, landscaping. The villa you walk back into doesn't feel renovated. It feels <span className="serif">considered.</span>
          </p>
        </div>
        <div style={{ gridColumn: 'span 5' }} className="about-side">
          <image-slot
            id="about-portrait"
            shape="rounded"
            radius="2"
            placeholder="Drop a portrait of the team / founder"
            style={{ width: '100%', aspectRatio: '4/5', display: 'block' }}
          ></image-slot>
          <div style={{
            marginTop: 24, padding: '20px 24px',
            background: '#141414', borderLeft: '2px solid #F5B82E',
          }}>
            <div className="serif" style={{ fontSize: 22, color: '#F5EFE6', lineHeight: 1.4 }}>
              "Every successful renovation begins with a real conversation about what the home needs to become."
            </div>
            <div style={{ marginTop: 14, fontFamily: 'Manrope', fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#C9A86A' }}>
              — Abid Abizher Mohammed · Founder
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .about-text, .about-side { grid-column: span 12 !important; }
        }
      `}</style>
    </Section>
  );
}

/* ============ Rooms ============ */
function Rooms({ onOpenInquiry }) {
  const [active, setActive] = useState(null);
  return (
    <Section id="rooms" label="02 Rooms" eyebrow="What we renovate">
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 64 }}>
          <h2 style={{ fontSize: 'clamp(40px, 5.4vw, 76px)', color: '#F5EFE6', maxWidth: '14ch' }}>
            Every room. <Highlight>One team.</Highlight>
          </h2>
          <p style={{ fontFamily: 'Manrope', fontSize: 16, color: 'rgba(245,239,230,0.7)', maxWidth: 380, lineHeight: 1.6 }}>
            Click any room to see how we approach it. Pricing is per-villa — every quote begins with a site visit.
          </p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 1, background: 'rgba(245,239,230,0.08)', border: '1px solid rgba(245,239,230,0.08)' }}>
          {ROOMS.map((r) => (
            <RoomCard key={r.id} room={r} active={active === r.id} onClick={() => setActive(active === r.id ? null : r.id)} onInquire={onOpenInquiry} />
          ))}
        </div>
      </div>
    </Section>
  );
}

function RoomCard({ room, active, onClick, onInquire }) {
  const [hover, setHover] = useState(false);
  return (
    <div
      onClick={onClick}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className="room-card"
      style={{
        gridColumn: active ? 'span 12' : 'span 4',
        background: active ? '#141414' : (hover ? '#131312' : '#0F0F0E'),
        cursor: 'pointer',
        padding: active ? 48 : 36,
        minHeight: active ? 360 : 280,
        position: 'relative',
        transition: 'all .35s ease',
        display: 'grid',
        gridTemplateColumns: active ? '1fr 1fr' : '1fr',
        gap: active ? 40 : 0,
      }}
    >
      <div>
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 24 }}>
          <NumMark n={room.n} />
          <span style={{ fontFamily: 'Manrope', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#8B847A' }}>
            Service
          </span>
        </div>
        <h3 style={{ fontSize: active ? 'clamp(36px, 4.4vw, 60px)' : 'clamp(22px, 2vw, 32px)', color: '#F5EFE6' }}>
          {room.title}
        </h3>
        <p className="serif" style={{ marginTop: 14, fontSize: active ? 22 : 17, color: '#C9A86A' }}>
          {room.tagline}
        </p>
        {active && (
          <>
            <p style={{ marginTop: 28, fontFamily: 'Manrope', fontSize: 17, lineHeight: 1.6, color: 'rgba(245,239,230,0.78)', maxWidth: 480 }}>
              {room.notes}
            </p>
            <div style={{ marginTop: 32, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <Btn variant="primary" onClick={(e) => { e.stopPropagation(); onInquire(room.title); }}>Quote this room →</Btn>
              <Btn variant="ghost" onClick={(e) => { e.stopPropagation(); onClick(); }}>Close</Btn>
            </div>
          </>
        )}
        {!active && (
          <div style={{
            position: 'absolute', bottom: 28, right: 32,
            fontFamily: 'Manrope', fontSize: 12, letterSpacing: '0.14em', textTransform: 'uppercase',
            color: hover ? '#F5B82E' : '#8B847A', transition: 'color .2s ease',
          }}>
            View →
          </div>
        )}
      </div>

      {active && (
        <div style={{ position: 'relative' }}>
          {room.img ? (
            <div style={{
              position: 'absolute', inset: 0,
              backgroundImage: `url(${room.img})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            }} />
          ) : (
            <image-slot
              id={`room-${room.id}-hero`}
              shape="rect"
              placeholder={`Drop a ${room.title} photo`}
              style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}
            ></image-slot>
          )}
        </div>
      )}

      <style>{`
        @media (max-width: 900px) {
          .room-card { grid-column: span 12 !important; }
        }
        @media (max-width: 900px) {
          .room-card[style*="grid-column: span 12"] {
            grid-template-columns: 1fr !important;
          }
        }
      `}</style>
    </div>
  );
}

/* ============ Process ============ */
function Process() {
  const steps = [
    { n: 1, title: 'Discovery', body: 'A site visit. We listen, measure, photograph, and understand what is and isn\u2019t working.' },
    { n: 2, title: 'Design', body: 'Mood, materials, drawings, fixed price. You approve before anything moves.' },
    { n: 3, title: 'Demolish & Build', body: 'Civil + MEP + finishing trades coordinated under one site manager. Daily progress reports.' },
    { n: 4, title: 'Finish & Style', body: 'Joinery, stone, paint, lighting, and the small things you only notice when they\'re right.' },
    { n: 5, title: 'Handover', body: 'A walkthrough, snag list, and a 12-month workmanship warranty. Then we leave you to enjoy it.' },
  ];
  return (
    <Section id="process" label="03 Process" eyebrow="How we work" dark>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <h2 style={{ fontSize: 'clamp(40px, 5.4vw, 76px)', color: '#F5EFE6', maxWidth: '14ch', marginBottom: 64 }}>
          A renovation, <Highlight>managed the right way.</Highlight>
        </h2>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 0 }} className="process-grid">
          {steps.map((s, i) => (
            <div key={s.n} style={{
              padding: '32px 28px 32px 0',
              borderTop: '1px solid rgba(245,239,230,0.18)',
              borderRight: i < steps.length - 1 ? '1px solid rgba(245,239,230,0.08)' : 'none',
              paddingRight: 28,
            }} className="process-step">
              <NumMark n={s.n} />
              <h3 style={{ fontSize: 22, color: '#F5EFE6', marginTop: 18 }}>{s.title}</h3>
              <p style={{ marginTop: 12, fontFamily: 'Manrope', fontSize: 14, lineHeight: 1.55, color: 'rgba(245,239,230,0.7)' }}>
                {s.body}
              </p>
            </div>
          ))}
        </div>
        <style>{`
          @media (max-width: 900px) {
            .process-grid { grid-template-columns: 1fr !important; }
            .process-step { border-right: none !important; padding-right: 0 !important; }
          }
        `}</style>
      </div>
    </Section>
  );
}

/* ============ Portfolio Gallery ============ */
function Portfolio() {
  // Use available crops + image-slots for user-supplied
  const real = [
    { src: 'assets/img/hero-pool.jpg',              tag: 'Outdoor / Pool deck',    span: 'span 7' },
    { src: 'assets/img/villa-exterior-twilight.jpg',tag: 'Villa exterior',         span: 'span 5' },
    { src: 'assets/img/kitchen-before.jpg',         tag: 'Kitchen before',         span: 'span 4' },
    { src: 'assets/img/glass-extension.jpg',        tag: 'Glass extension',        span: 'span 8' },
    { src: 'assets/img/interior-night.jpg',         tag: 'Interior at night',      span: 'span 5' },
    { src: 'assets/img/pool-villa.jpg',             tag: 'Outdoor lounge',         span: 'span 7' },
  ];
  const slots = [
    { id: 'gal-1', tag: 'Master bedroom (drop photo)',  span: 'span 6' },
    { id: 'gal-2', tag: 'Bathroom (drop photo)',        span: 'span 6' },
    { id: 'gal-3', tag: 'Majlis (drop photo)',          span: 'span 4' },
    { id: 'gal-4', tag: 'Dining (drop photo)',          span: 'span 8' },
  ];
  return (
    <Section id="portfolio" label="04 Portfolio" eyebrow="Selected work">
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
          <h2 style={{ fontSize: 'clamp(40px, 5.4vw, 76px)', color: '#F5EFE6', maxWidth: '16ch' }}>
            <Highlight>Every successful</Highlight> renovation.
          </h2>
          <a href="https://www.instagram.com/thehnhuae" target="_blank" rel="noopener" style={{ fontFamily: 'Manrope', fontSize: 13, letterSpacing: '0.14em', textTransform: 'uppercase', color: '#C9A86A', textDecoration: 'none', borderBottom: '1px solid #C9A86A', paddingBottom: 4 }}>
            @thehnhuae on Instagram →
          </a>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 12 }} className="gal-grid">
          {real.map((it, i) => (
            <figure key={i} className="gal-item" style={{
              gridColumn: it.span, position: 'relative', aspectRatio: '4/3', overflow: 'hidden',
              background: '#141414',
            }}>
              <img src={it.src} alt={it.tag} loading="lazy" style={{
                width: '100%', height: '100%', objectFit: 'cover',
                transition: 'transform .6s ease, filter .4s ease',
              }} />
              <figcaption style={{
                position: 'absolute', left: 16, bottom: 16,
                background: '#0A0A0A', color: '#F5EFE6',
                padding: '6px 10px',
                fontFamily: 'Manrope', fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
              }}>{it.tag}</figcaption>
            </figure>
          ))}
          {slots.map((it) => (
            <div key={it.id} className="gal-item" style={{ gridColumn: it.span, aspectRatio: '4/3' }}>
              <image-slot id={it.id} shape="rect" placeholder={it.tag} style={{ width: '100%', height: '100%', display: 'block' }}></image-slot>
            </div>
          ))}
        </div>
        <style>{`
          .gal-item img:hover { transform: scale(1.04); filter: brightness(1.05); }
          @media (max-width: 900px) {
            .gal-item { grid-column: span 12 !important; }
          }
        `}</style>
      </div>
    </Section>
  );
}

/* ============ FAQ ============ */
function FAQ() {
  const items = [
    ['How long does a full villa renovation take?', 'A typical 4-bedroom villa is 12–18 weeks from first hammer to handover. Apartments are usually 6–10 weeks. We give a fixed timeline before signing.'],
    ['Do you handle DEWA, RERA and approvals?', 'Yes. NOC submissions, DEWA disconnections/reconnections, and community approvals are all part of the project management fee — not a separate line item.'],
    ['Can we live in the villa during the renovation?', 'For full-villa work, we recommend short-term relocation. For room-by-room phasing we partition the site, set up dust barriers, and schedule loud trades around your hours.'],
    ['Do you give fixed prices or estimates?', 'Fixed price after the design phase. The discovery and design phase has its own fee that\'s rolled into the project if you proceed.'],
    ['What\'s your warranty?', '12 months on workmanship across every trade, plus the manufacturer warranty on materials and appliances we supply.'],
    ['Where in the UAE do you operate?', 'Across all seven emirates. The bulk of our work is in Dubai, Abu Dhabi, and Sharjah.'],
  ];
  const [open, setOpen] = useState(0);
  return (
    <Section id="faq" label="05 FAQ" eyebrow="Frequently asked" dark>
      <div style={{ maxWidth: 980, margin: '0 auto' }}>
        <h2 style={{ fontSize: 'clamp(36px, 5vw, 68px)', color: '#F5EFE6', marginBottom: 56 }}>
          Things people <Highlight>ask first.</Highlight>
        </h2>
        <div>
          {items.map(([q, a], i) => (
            <div key={i} style={{
              borderTop: '1px solid rgba(245,239,230,0.16)',
              borderBottom: i === items.length - 1 ? '1px solid rgba(245,239,230,0.16)' : 'none',
            }}>
              <button onClick={() => setOpen(open === i ? -1 : i)} style={{
                width: '100%', textAlign: 'left',
                background: 'transparent', border: 'none', color: '#F5EFE6',
                padding: '28px 0', cursor: 'pointer',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 24,
                fontFamily: 'Manrope', fontSize: 19, fontWeight: 500,
              }}>
                <span>{q}</span>
                <span style={{ fontFamily: 'Archivo Black', fontSize: 22, color: '#F5B82E', transform: open === i ? 'rotate(45deg)' : 'rotate(0deg)', transition: 'transform .3s ease', display: 'inline-block' }}>+</span>
              </button>
              <div style={{
                maxHeight: open === i ? 200 : 0, overflow: 'hidden', transition: 'max-height .35s ease',
              }}>
                <p style={{ paddingBottom: 28, fontFamily: 'Manrope', fontSize: 17, lineHeight: 1.6, color: 'rgba(245,239,230,0.7)', maxWidth: 720 }}>
                  {a}
                </p>
              </div>
            </div>
          ))}
        </div>
      </div>
    </Section>
  );
}

/* ============ Footer / Contact ============ */
function Footer({ onOpenInquiry, onOpenDownload }) {
  return (
    <footer id="contact" data-screen-label="06 Contact" style={{
      position: 'relative',
      padding: '120px 6vw 40px',
      background: '#080808',
      borderTop: '1px solid rgba(245,239,230,0.08)',
    }}>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(12, 1fr)', gap: 40 }} className="foot-grid">
          <div style={{ gridColumn: 'span 7' }} className="foot-main">
            <div style={{ fontFamily: 'Manrope', fontSize: 12, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#C9A86A', marginBottom: 24 }}>
              <span style={{ display: 'inline-block', width: 32, height: 1, background: '#C9A86A', verticalAlign: 'middle', marginRight: 12 }}></span>
              Let's talk
            </div>
            <h2 style={{ fontSize: 'clamp(48px, 8vw, 128px)', color: '#F5EFE6', lineHeight: 0.92 }}>
              Ready to <Highlight>begin</Highlight>?
            </h2>
            <p style={{ marginTop: 28, fontFamily: 'Manrope', fontSize: 18, lineHeight: 1.55, color: 'rgba(245,239,230,0.7)', maxWidth: 540 }}>
              Send us details about your villa or flat and we'll get a senior project manager on the first reply — usually within the same day.
            </p>
            <div style={{ marginTop: 36, display: 'flex', gap: 16, flexWrap: 'wrap' }}>
              <Btn variant="primary" onClick={onOpenInquiry}>Start an Inquiry →</Btn>
              <Btn variant="ghost" onClick={onOpenDownload}>Download Company Profile</Btn>
            </div>
          </div>
          <div style={{ gridColumn: 'span 5' }} className="foot-side">
            <div style={{ fontFamily: 'Manrope', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#8B847A', marginBottom: 18 }}>Direct contact</div>
            <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 14 }}>
              <li><span style={{color:'#8B847A',fontSize:12,letterSpacing:'0.14em',textTransform:'uppercase'}}>Founder</span><br/><span style={{fontSize:18,color:'#F5EFE6'}}>Abid Abizher Mohammed</span></li>
              <li><span style={{color:'#8B847A',fontSize:12,letterSpacing:'0.14em',textTransform:'uppercase'}}>Phone / WhatsApp</span><br/><a href="tel:+971555455375" style={{fontSize:18,color:'#F5EFE6',textDecoration:'none',borderBottom:'1px solid #F5B82E',paddingBottom:2}}>+971 55 545 5375</a></li>
              <li><span style={{color:'#8B847A',fontSize:12,letterSpacing:'0.14em',textTransform:'uppercase'}}>Email</span><br/><a href="mailto:abidabizher@gmail.com" style={{fontSize:18,color:'#F5EFE6',textDecoration:'none',borderBottom:'1px solid #F5B82E',paddingBottom:2}}>abidabizher@gmail.com</a></li>
              <li><span style={{color:'#8B847A',fontSize:12,letterSpacing:'0.14em',textTransform:'uppercase'}}>Instagram</span><br/><a href="https://www.instagram.com/thehnhuae" target="_blank" rel="noopener" style={{fontSize:18,color:'#F5EFE6',textDecoration:'none',borderBottom:'1px solid #F5B82E',paddingBottom:2}}>@thehnhuae</a></li>
            </ul>
          </div>
        </div>

        <div style={{
          marginTop: 96, paddingTop: 32, borderTop: '1px solid rgba(245,239,230,0.1)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 16,
        }}>
          <Wordmark size={16} />
          <div style={{ fontFamily: 'Manrope', fontSize: 12, color: '#8B847A', letterSpacing: '0.06em' }}>
            © 2026 HNHUAE Technical Services LLC · Renewing much-loved villas across the UAE.
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 900px) {
          .foot-main, .foot-side { grid-column: span 12 !important; }
        }
      `}</style>
    </footer>
  );
}

/* ============ Communities Served ============ */
function Communities() {
  // Curated list reflecting where HNHUAE typically renovates
  const tiers = [
    {
      label: 'Emaar communities',
      items: ['Arabian Ranches I & II', 'Dubai Hills Estate', 'The Springs', 'The Meadows', 'Emirates Hills', 'The Lakes', 'Jumeirah Park'],
      highlight: true,
    },
    {
      label: 'Damac & Nakheel',
      items: ['Damac Hills', 'Damac Hills 2', 'Palm Jumeirah', 'Jumeirah Islands', 'Al Furjan'],
    },
    {
      label: 'Freehold villas & flats',
      items: ['Mirdif', 'Al Barsha', 'Jumeirah Village Circle', 'Town Square', 'Mudon', 'Reem', 'Dubailand'],
    },
  ];
  return (
    <Section id="communities" label="03b Communities" eyebrow="Trusted in" dark>
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 32, marginBottom: 56 }}>
          <h2 style={{ fontSize: 'clamp(40px, 5.4vw, 76px)', color: '#F5EFE6', maxWidth: '16ch' }}>
            Refined for <Highlight>Dubai's best</Highlight> addresses.
          </h2>
          <p style={{ fontFamily: 'Manrope', fontSize: 16, color: 'rgba(245,239,230,0.7)', maxWidth: 420, lineHeight: 1.6 }}>
            Over 200 luxury villas and flats refurbished across Emaar, Damac, Nakheel, and the city's most-known freehold communities. We know the by-laws, the NOC steps, and the building details by heart.
          </p>
        </div>

        {/* Marquee strip of marquee community names */}
        <div className="comm-marquee" style={{
          overflow: 'hidden',
          padding: '24px 0',
          borderTop: '1px solid rgba(245,239,230,0.16)',
          borderBottom: '1px solid rgba(245,239,230,0.16)',
          marginBottom: 64,
          maskImage: 'linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%)',
          WebkitMaskImage: 'linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%)',
        }}>
          <div style={{
            display: 'flex', gap: 64, whiteSpace: 'nowrap',
            animation: 'commScroll 40s linear infinite',
            fontFamily: 'Archivo Black', fontSize: 'clamp(28px, 4vw, 56px)',
            color: '#F5EFE6', textTransform: 'uppercase', letterSpacing: '-0.01em',
          }}>
            {[...Array(2)].map((_, k) => (
              <React.Fragment key={k}>
                <span>Emaar</span><span style={{color:'#F5B82E'}}>★</span>
                <span>Damac Hills</span><span style={{color:'#F5B82E'}}>★</span>
                <span>The Springs</span><span style={{color:'#F5B82E'}}>★</span>
                <span>Meadows</span><span style={{color:'#F5B82E'}}>★</span>
                <span>Palm Jumeirah</span><span style={{color:'#F5B82E'}}>★</span>
                <span>Arabian Ranches</span><span style={{color:'#F5B82E'}}>★</span>
                <span>Dubai Hills</span><span style={{color:'#F5B82E'}}>★</span>
                <span>Emirates Hills</span><span style={{color:'#F5B82E'}}>★</span>
                <span>JVC</span><span style={{color:'#F5B82E'}}>★</span>
                <span>Mirdif</span><span style={{color:'#F5B82E'}}>★</span>
              </React.Fragment>
            ))}
          </div>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 1, background: 'rgba(245,239,230,0.1)', border: '1px solid rgba(245,239,230,0.1)' }} className="comm-grid">
          {tiers.map((t, i) => (
            <div key={t.label} style={{
              background: t.highlight ? '#141413' : '#0F0F0E',
              padding: '40px 36px',
              position: 'relative',
            }} className="comm-tier">
              {t.highlight && (
                <div style={{
                  position: 'absolute', top: 16, right: 16,
                  background: '#F5B82E', color: '#0A0A0A',
                  padding: '4px 10px', fontFamily: 'Manrope', fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 700,
                }}>Most served</div>
              )}
              <NumMark n={i + 1} />
              <h3 style={{ fontSize: 24, color: '#F5EFE6', marginTop: 16, marginBottom: 24 }}>
                {t.label}
              </h3>
              <ul style={{ listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 0 }}>
                {t.items.map((it, k) => (
                  <li key={it} style={{
                    padding: '14px 0',
                    borderTop: '1px solid rgba(245,239,230,0.08)',
                    borderBottom: k === t.items.length - 1 ? '1px solid rgba(245,239,230,0.08)' : 'none',
                    fontFamily: 'Manrope', fontSize: 15, color: 'rgba(245,239,230,0.85)',
                    display: 'flex', justifyContent: 'space-between', alignItems: 'center',
                  }}>
                    <span>{it}</span>
                    <span style={{ color: '#F5B82E', fontSize: 12 }}>✓</span>
                  </li>
                ))}
              </ul>
            </div>
          ))}
        </div>

        <div style={{
          marginTop: 56, padding: '36px 40px',
          background: '#141413', border: '1px solid rgba(245,184,46,0.2)',
          display: 'flex', justifyContent: 'space-between', alignItems: 'center', flexWrap: 'wrap', gap: 24,
        }}>
          <div>
            <div className="serif" style={{ fontSize: 26, color: '#F5EFE6', lineHeight: 1.4, maxWidth: '40ch' }}>
              Renovation in your community? We've likely worked next door.
            </div>
            <div style={{ marginTop: 8, fontFamily: 'Manrope', fontSize: 13, color: '#8B847A', letterSpacing: '0.1em', textTransform: 'uppercase' }}>
              Ask us for community-specific references
            </div>
          </div>
          <Btn variant="primary" href="#contact">Request a Reference →</Btn>
        </div>

        <style>{`
          @keyframes commScroll {
            from { transform: translateX(0); }
            to { transform: translateX(-50%); }
          }
          @media (max-width: 900px) {
            .comm-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </Section>
  );
}

/* ============ Instagram Embed ============ */
function Instagram() {
  // Instagram doesn't allow profile-level iframe embeds reliably without their JS SDK + an account/post URL.
  // We give a beautiful in-page "feed" preview that visually matches IG, with cards that link out, plus an
  // option to open the live profile in a side-panel iframe (works for many users; falls back to opening in new tab).
  const [openLive, setOpenLive] = useState(false);
  // Lay out the IG screenshot crops as if they were 6 grid posts
  const posts = [
    { src: 'assets/img/hero-pool.jpg',               caption: 'Every successful renovation starts with a plan.', tag: 'Reel' },
    { src: 'assets/img/villa-exterior-twilight.jpg', caption: 'Dubai summer is coming — is your exterior ready?', tag: 'Post' },
    { src: 'assets/img/kitchen-before.jpg',          caption: 'Ready to give your kitchen a fresh new chapter?', tag: 'Reel' },
    { src: 'assets/img/glass-extension.jpg',         caption: 'Glass extension on a Mirdif villa — handover week.', tag: 'Post' },
    { src: 'assets/img/interior-night.jpg',          caption: 'Twilight reveal · The Springs.', tag: 'Post' },
    { src: 'assets/img/pool-villa.jpg',              caption: 'Pool deck refit · Emaar Hills.', tag: 'Reel' },
  ];

  return (
    <Section id="instagram" label="04b Instagram" eyebrow="Live from @thehnhuae">
      <div style={{ maxWidth: 1400, margin: '0 auto' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-end', flexWrap: 'wrap', gap: 24, marginBottom: 48 }}>
          <div>
            <h2 style={{ fontSize: 'clamp(40px, 5.4vw, 76px)', color: '#F5EFE6' }}>
              Watch us <Highlight>at work.</Highlight>
            </h2>
            <p style={{ marginTop: 18, fontFamily: 'Manrope', fontSize: 16, color: 'rgba(245,239,230,0.7)', maxWidth: 540, lineHeight: 1.6 }}>
              Daily progress reels, before-and-afters, and the small details we obsess over. Tap any tile to open it on Instagram.
            </p>
          </div>
          <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Btn variant="primary" onClick={() => setOpenLive(!openLive)}>{openLive ? 'Hide live feed ✕' : 'Open live feed →'}</Btn>
            <Btn variant="ghost" href="https://www.instagram.com/thehnhuae" target="_blank" rel="noopener">@thehnhuae ↗</Btn>
          </div>
        </div>

        {/* Live-embed iframe — lazy-mounted */}
        {openLive && (
          <div style={{
            background: '#141413', border: '1px solid rgba(245,239,230,0.12)',
            padding: 16, marginBottom: 40,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
              <div style={{ fontFamily: 'Manrope', fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: '#C9A86A' }}>
                Live · instagram.com/thehnhuae
              </div>
              <a href="https://www.instagram.com/thehnhuae" target="_blank" rel="noopener" style={{ fontFamily: 'Manrope', fontSize: 12, color: '#F5B82E', textDecoration: 'none' }}>Open in new tab ↗</a>
            </div>
            <iframe
              src="https://www.instagram.com/thehnhuae/embed"
              title="HNHUAE on Instagram"
              loading="lazy"
              style={{ width: '100%', height: 720, border: 'none', background: '#fff' }}
              allow="encrypted-media"
              referrerPolicy="no-referrer-when-downgrade"
            ></iframe>
            <p style={{ marginTop: 12, fontFamily: 'Manrope', fontSize: 12, color: '#8B847A', lineHeight: 1.6 }}>
              If the embed doesn't render, Instagram has rate-limited unauthenticated previews — use the <a href="https://www.instagram.com/thehnhuae" target="_blank" rel="noopener" style={{color:'#F5B82E'}}>open-in-new-tab</a> link.
            </p>
          </div>
        )}

        {/* Grid of recent posts (visual preview) */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }} className="ig-grid">
          {posts.map((p, i) => (
            <a key={i} href="https://www.instagram.com/thehnhuae" target="_blank" rel="noopener" className="ig-tile" style={{
              position: 'relative', aspectRatio: '1/1', overflow: 'hidden',
              background: '#141413', textDecoration: 'none',
              border: '1px solid rgba(245,239,230,0.06)',
            }}>
              <img src={p.src} alt={p.caption} loading="lazy" style={{
                width: '100%', height: '100%', objectFit: 'cover',
                transition: 'transform .5s ease, filter .3s ease',
              }} />
              {/* Tag pill */}
              <span style={{
                position: 'absolute', top: 14, right: 14,
                background: 'rgba(10,10,10,0.85)', color: '#F5B82E',
                padding: '4px 10px',
                fontFamily: 'Manrope', fontSize: 10, fontWeight: 700, letterSpacing: '0.16em', textTransform: 'uppercase',
              }}>{p.tag}</span>
              {/* Hover overlay */}
              <div className="ig-over" style={{
                position: 'absolute', inset: 0,
                background: 'linear-gradient(180deg, rgba(10,10,10,0) 40%, rgba(10,10,10,0.92) 100%)',
                display: 'flex', flexDirection: 'column', justifyContent: 'flex-end',
                padding: 22,
                opacity: 0, transition: 'opacity .3s ease',
              }}>
                <div style={{ fontFamily: 'Manrope', fontSize: 14, color: '#F5EFE6', lineHeight: 1.4 }}>{p.caption}</div>
                <div style={{ marginTop: 10, fontFamily: 'Manrope', fontSize: 11, color: '#F5B82E', letterSpacing: '0.14em', textTransform: 'uppercase' }}>View on Instagram →</div>
              </div>
            </a>
          ))}
        </div>

        <style>{`
          .ig-tile:hover img { transform: scale(1.06); filter: brightness(0.7); }
          .ig-tile:hover .ig-over { opacity: 1; }
          @media (max-width: 900px) {
            .ig-grid { grid-template-columns: repeat(2, 1fr) !important; }
          }
          @media (max-width: 560px) {
            .ig-grid { grid-template-columns: 1fr !important; }
          }
        `}</style>
      </div>
    </Section>
  );
}

Object.assign(window, { Nav, Hero, About, Rooms, Process, Portfolio, FAQ, Footer, ROOMS, Communities, Instagram });