const { useState, useEffect, useRef, useMemo } = React;

const BRANDS = JSON.parse(document.getElementById('brands-data').textContent);
const ROOMS = JSON.parse(document.getElementById('rooms-data').textContent);
const PROJECTS = JSON.parse(document.getElementById('projects-data').textContent);
const TEAM = JSON.parse(document.getElementById('team-data').textContent);

// Default tweak values — wrapped for host persistence
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "palette": "ivory",
  "serif": "fraunces",
  "density": "editorial",
  "accent": "#9C8458"
}/*EDITMODE-END*/;

const PALETTES = {
  ivory:  { bg:'#FAF8F5', paper:'#F5F0E8', stone:'#ECE7DD', ink:'#242625', muted:'#7C766B', line:'#E2DACB' },
  stone:  { bg:'#EFE9DD', paper:'#E7DFD0', stone:'#DDD2BE', ink:'#2A2820', muted:'#7A7160', line:'#D2C6AE' },
  noir:   { bg:'#15140F', paper:'#1E1D17', stone:'#28261E', ink:'#FAF8F5', muted:'#8A8478', line:'#3A382E' },
  chalk:  { bg:'#F4F1EC', paper:'#ECE7E0', stone:'#E1D9CE', ink:'#1B1B1B', muted:'#75716A', line:'#D8CFC1' },
};

const SERIFS = {
  fraunces:  { family: "'Fraunces', serif", varSettings: '"opsz" 144, "SOFT" 30' },
  cormorant: { family: "'Cormorant Garamond', serif", varSettings: 'normal' },
  ebgaramond:{ family: "'EB Garamond', serif", varSettings: 'normal' },
};

// ---------- Utilities ----------
function useReveal() {
  const ref = useRef();
  useEffect(() => {
    if (!ref.current) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach(e => { if (e.isIntersecting) e.target.classList.add('in'); });
    }, { threshold: 0.12 });
    obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);
  return ref;
}

function Reveal({ children, as = 'div', ...props }) {
  const ref = useReveal();
  const Tag = as;
  return <Tag ref={ref} className={`reveal ${props.className || ''}`} {...props}>{children}</Tag>;
}

// ---------- Nav ----------
function Nav({ onEnquire }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 60);
    window.addEventListener('scroll', onScroll, { passive: true });
    onScroll();
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? 'scrolled' : ''}`}>
      <a href="#top" className="nav-logo"><span className="glyph"></span>OBEGI HOME</a>
      <div className="nav-links">
        <a href="#brands">Brands</a>
        <a href="#rooms">Rooms</a>
        <a href="#projects">Projects</a>
        <a href="#experience">Design Experience</a>
        <a href="#professionals">Professionals</a>
        <a href="#showroom">Showrooms</a>
      </div>
      <button className="nav-enquire" onClick={onEnquire}>Enquire</button>
    </nav>
  );
}

// ---------- Hero ----------
function Hero({ onEnquire }) {
  return (
    <header className="hero" id="top">
      <div className="hero-image" style={{ backgroundImage: "url('media/home-intro.webp')" }}></div>
      <div className="hero-inner">
        <div className="hero-meta">
          <div className="left">
            <span className="eyebrow"><span className="dot"></span>Est. Beirut · 1973</span>
            <span className="latlon">25.14335° N &nbsp;·&nbsp; 55.19198° E</span>
          </div>
          <div className="right">
            Jumeirah Beach Road<br/>
            Umm Suqeim 3, Dubai<br/>
            Beside Burj Al Arab
          </div>
        </div>

        <div className="hero-content">
          <h1 className="display display-xxl">
            Curating refined <em>residences</em><br/>since nineteen seventy-three.
          </h1>
          <div className="hero-actions">
            <button className="cta" onClick={onEnquire}>
              Book a private consultation
              <span style={{fontFamily:'var(--serif)', fontSize:18}}>→</span>
            </button>
            <a className="cta-ghost" href="#showroom">
              Visit the showroom
              <span style={{fontFamily:'var(--serif)', fontSize:18}}>→</span>
            </a>
          </div>
        </div>
      </div>
      <div className="hero-scroll">Continue</div>
    </header>
  );
}

// ---------- Intro band ----------
function Intro() {
  return (
    <section className="intro-band tight">
      <div className="container">
        <div className="intro-grid">
          <Reveal>
            <span className="eyebrow"><span className="dot"></span>A design destination</span>
            <h2 className="display display-l" style={{marginTop: 24}}>
              Five decades of <em>curation</em>, in a single address.
            </h2>
          </Reveal>
          <Reveal>
            <p className="lede" style={{margin: 0}}>
              OBEGI Home is a luxury interior and furniture destination across the GCC and Lebanon.
              We work with property owners and design professionals to fulfil their interior visions —
              from a single statement piece to the full curation of a residence, a yacht or a hospitality interior.
            </p>
            <div className="rule"></div>
            <p className="body" style={{margin:0, maxWidth: 640}}>
              Headquartered in the UAE, led by Karine and Yordan Obegi since 2006, and represented by
              the world's most exclusive Italian and European houses. By appointment.
            </p>
          </Reveal>
        </div>

        <div className="intro-stats">
          <Reveal className="stat">
            <div className="num">since <em>1973</em></div>
            <div className="label">Founded · Beirut</div>
          </Reveal>
          <Reveal className="stat">
            <div className="num"><em>20+</em> houses</div>
            <div className="label">Italian & European brands represented</div>
          </Reveal>
          <Reveal className="stat">
            <div className="num"><em>3</em> regions</div>
            <div className="label">UAE · KSA · Lebanon</div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ---------- Brand wall ----------
function BrandWall() {
  return (
    <section id="brands">
      <div className="container">
        <div className="section-head">
          <Reveal>
            <div className="label">01 — Brands we represent</div>
            <h2 className="display display-l">
              The houses<br/>we curate.
            </h2>
          </Reveal>
          <Reveal>
            <p className="lede max-560" style={{margin:0}}>
              A roster built one introduction at a time — Italian and European houses we have grown
              alongside, in many cases for decades. Bulthaup and Poliform anchor mono-brand showrooms
              alongside the flagship.
            </p>
            <a className="link-underline" style={{marginTop:32}} href="#brands">
              The full collection <span className="arrow">→</span>
            </a>
          </Reveal>
        </div>
      </div>

      <div className="container brand-wall">
        {BRANDS.map((b, i) => (
          <Reveal key={b.name} className="brand-row" as="div">
            <div className="idx">0{i+1 < 10 ? i+1 : i+1}</div>
            <div className="name serif">{b.name.includes('Maison') ? <>Elie Saab <em>Maison</em></> : b.name}</div>
            <div className="desc">{b.desc}</div>
            <div className="meta">{b.origin} · {b.since}</div>
          </Reveal>
        ))}
      </div>
    </section>
  );
}

// ---------- Rooms tabs ----------
function Rooms() {
  const [active, setActive] = useState(ROOMS[0].id);
  const current = ROOMS.find(r => r.id === active);
  return (
    <section id="rooms" style={{padding: '8rem 0 0'}}>
      <div className="container">
        <div className="section-head">
          <Reveal>
            <div className="label">02 — Rooms</div>
            <h2 className="display display-l">
              Designed by <em>room</em>,<br/>not by SKU.
            </h2>
          </Reveal>
          <Reveal>
            <p className="lede max-560" style={{margin:0}}>
              Pieces in context. The portfolio is composed across the rooms it furnishes —
              living, kitchen, dining, bathroom, dressing, terrace — so the decision is always about
              how a space will feel, not which catalogue it came from.
            </p>
          </Reveal>
        </div>
      </div>

      <div className="rooms-tabs">
        {ROOMS.map((r, i) => (
          <button
            key={r.id}
            className={`rooms-tab ${active === r.id ? 'active' : ''}`}
            onClick={() => setActive(r.id)}
          >
            <span className="num">0{i+1}</span>
            <span>{r.label}</span>
          </button>
        ))}
      </div>

      <div className="rooms-stage">
        {ROOMS.map(r => (
          <div key={r.id}
               className={`frame ${active === r.id ? 'active' : ''}`}
               style={{ backgroundImage: `url('${r.image}')` }} />
        ))}
        <div className="rooms-caption">
          <div>
            <h3 className="title">{current.title.split(' ').map((w, i, arr) => {
              // italicize one keyword for editorial feel
              const keywords = ['composed','quiet','holds','ritual','order','extended'];
              const clean = w.replace(/[.,]/g,'').toLowerCase();
              if (keywords.includes(clean)) return <em key={i}>{w} </em>;
              return <span key={i}>{w} </span>;
            })}</h3>
            <div className="sub">{current.sub}</div>
          </div>
          <div className="right">
            {current.credit}<br/>
            By appointment
          </div>
        </div>
      </div>
    </section>
  );
}

// ---------- Projects ----------
function Projects() {
  return (
    <section id="projects" style={{paddingTop: '12rem'}}>
      <div className="container">
        <div className="section-head">
          <Reveal>
            <div className="label">03 — Selected projects</div>
            <h2 className="display display-l">
              Work delivered,<br/>not <em>imagined</em>.
            </h2>
          </Reveal>
          <Reveal>
            <p className="lede max-560" style={{margin:0}}>
              A small selection from the last twenty-four months — residential, hospitality, and a
              130-foot yacht. Further case studies on request; some clients are visible only after
              an NDA review.
            </p>
          </Reveal>
        </div>

        <div className="projects-grid">
          {PROJECTS.map((p, i) => (
            <Reveal key={p.name} className={`project ${i % 2 === 1 ? 'reverse' : ''}`}>
              <div className="image" style={{backgroundImage:`url('${p.image}')`}}>
                <div className="index-tag">PJ · 0{i+1}</div>
              </div>
              <div className="copy">
                <span className="eyebrow"><span className="dot"></span>{p.kind} · {p.year}</span>
                <h3 className="serif" style={{marginTop: 16}}>
                  {p.name.split(' ').map((w, j) => {
                    const italicize = ['Villa', 'Center', 'Show'];
                    if (italicize.includes(w)) return <em key={j}>{w} </em>;
                    return <span key={j}>{w} </span>;
                  })}
                </h3>
                <div className="meta-row">
                  <span>{p.scope}</span>
                  <span>{p.brands}</span>
                </div>
                <p className="body" style={{margin:'0 0 28px'}}>{p.desc}</p>
                <a className="link-underline" href="#">View project <span className="arrow">→</span></a>
              </div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Design Experience ----------
const STEPS = [
  { num: "i", title: "Discovery", text: "We listen first — to the architecture, the client, the way the space will actually be lived in. A site visit and a brief.", dur: "Week 1–2" },
  { num: "ii", title: "Curation", text: "A scheme proposed from the houses we represent. Mood, materials, palette, layouts; alternatives where they earn their place.", dur: "Week 2–6" },
  { num: "iii", title: "Specification", text: "Drawings, sample boards, pricing schedule, lead times. The fine print that decides whether the room arrives on time.", dur: "Week 6–10" },
  { num: "iv", title: "Delivery", text: "Production, logistics, white-glove install. Our team is on site for the handover; nothing leaves until the room reads correctly.", dur: "Month 4–12" },
];
function Experience() {
  return (
    <section id="experience" className="experience">
      <div className="container">
        <div className="section-head">
          <Reveal>
            <div className="label">04 — Design Experience</div>
            <h2 className="display display-l">
              How a <em>residence</em><br/>comes together.
            </h2>
          </Reveal>
          <Reveal>
            <p className="lede max-560" style={{margin:0}}>
              A turnkey process led by an in-house team of architects, designers, project managers
              and installers. A single point of accountability from the first conversation to the
              final walk-through.
            </p>
          </Reveal>
        </div>
      </div>

      <div className="container-wide">
        <div className="experience-steps">
          {STEPS.map((s) => (
            <Reveal key={s.num} className="step">
              <div className="num"><em>{s.num}</em></div>
              <h4>{s.title}</h4>
              <p>{s.text}</p>
              <div className="duration">{s.dur}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Professionals ----------
function Professionals() {
  return (
    <section id="professionals" style={{padding: 0}}>
      <div className="split">
        <Reveal className="split-pane light">
          <div className="pane-head">
            <span className="eyebrow"><span className="dot"></span>05a — Private clients</span>
            <h2>For the <em>homeowner</em> with a project in mind.</h2>
            <p className="body" style={{marginTop:16, maxWidth: 440}}>
              A by-appointment service for property owners — a single piece, a room, or the full
              curation of a residence. We can begin from a floor plan, a mood board, or a conversation.
            </p>
            <ul>
              <li>Personal showroom visit, by appointment</li>
              <li>In-home consultation across the UAE</li>
              <li>Full interior curation, including kitchens and systems</li>
              <li>White-glove logistics and installation</li>
            </ul>
          </div>
          <div className="pane-foot">
            <button className="cta">Book a consultation <span style={{fontFamily:'var(--serif)', fontSize:18}}>→</span></button>
          </div>
        </Reveal>

        <Reveal className="split-pane image-bg" style={{backgroundImage:"url('media/our-brands-cta.webp')"}}>
          <div className="pane-head">
            <span className="eyebrow" style={{color:'rgba(250,248,245,0.85)'}}><span className="dot"></span>05b — Trade & professionals</span>
            <h2>For <em>architects</em>, designers and developers.</h2>
            <p className="body" style={{color:'rgba(250,248,245,0.85)', marginTop:16, maxWidth:440}}>
              The OBEGI Professionals Programme: specification support, trade pricing, catalogues,
              and a dedicated point of contact across our entire brand portfolio. For practices
              working in the GCC and beyond.
            </p>
            <ul>
              <li>Dedicated specification support</li>
              <li>Trade pricing across the represented houses</li>
              <li>Sample library and project catalogues</li>
              <li>Site coordination and installation services</li>
            </ul>
          </div>
          <div className="pane-foot">
            <button className="cta-ghost">Apply to the programme <span style={{fontFamily:'var(--serif)', fontSize:18}}>→</span></button>
          </div>
        </Reveal>
      </div>
    </section>
  );
}

// ---------- Team strip ----------
function Team() {
  return (
    <section style={{paddingTop:'12rem', paddingBottom:'8rem'}}>
      <div className="container">
        <div className="section-head">
          <Reveal>
            <div className="label">06 — The people</div>
            <h2 className="display display-l">
              The team behind<br/>the <em>curation</em>.
            </h2>
          </Reveal>
          <Reveal>
            <p className="lede max-560" style={{margin:0}}>
              Architects, interior designers, project managers and furniture specialists — a small
              team that handles each project from brief to handover. Karine Obegi (CEO) and Yordan
              Obegi (Chairman) lead the firm.
            </p>
          </Reveal>
        </div>

        <div style={{display:'grid', gridTemplateColumns:'repeat(4, 1fr)', gap:'24px'}}>
          {TEAM.map(p => (
            <Reveal key={p.name} style={{textAlign:'left'}}>
              <div style={{aspectRatio:'4/5', overflow:'hidden', background:'var(--paper)', marginBottom:16, position:'relative'}}>
                <img src={p.img} alt={p.name} style={{width:'100%', height:'100%', objectFit:'cover', transition:'transform 0.6s', filter:'grayscale(0.15)'}}
                     onMouseEnter={e=>e.currentTarget.style.transform='scale(1.04)'}
                     onMouseLeave={e=>e.currentTarget.style.transform='scale(1)'}/>
              </div>
              <div style={{fontFamily:'var(--serif)', fontSize:20, fontWeight:300, letterSpacing:'-0.01em'}}>{p.name}</div>
              <div style={{fontFamily:'var(--mono)', fontSize:10, letterSpacing:'0.2em', textTransform:'uppercase', color:'var(--muted)', marginTop:6}}>{p.role}</div>
            </Reveal>
          ))}
        </div>
      </div>
    </section>
  );
}

// ---------- Showroom + Map ----------
function MapSchematic() {
  // A schematic editorial map (no third-party iframe) — Jumeirah / Burj Al Arab area, abstracted.
  return (
    <svg className="map-svg" viewBox="0 0 600 420" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <pattern id="dots" x="0" y="0" width="14" height="14" patternUnits="userSpaceOnUse">
          <circle cx="2" cy="2" r="0.6" fill="#C8BFA9" />
        </pattern>
      </defs>
      <rect width="600" height="420" fill="#ECE7DD" />
      {/* sea */}
      <path d="M0,0 L600,0 L600,140 C480,170 360,150 240,180 C140,205 80,200 0,220 Z" fill="#DBD2BA" />
      <rect x="0" y="0" width="600" height="420" fill="url(#dots)" opacity="0.4" />
      {/* sea label */}
      <text x="60" y="40" fontFamily="JetBrains Mono, monospace" fontSize="9" letterSpacing="3" fill="#8A8475">PERSIAN GULF</text>
      {/* coastline highlight */}
      <path d="M0,220 C80,200 140,205 240,180 C360,150 480,170 600,140" stroke="#9C8458" strokeWidth="1" fill="none" />
      {/* Jumeirah Beach Road */}
      <path d="M0,290 C150,275 300,300 600,260" stroke="#242625" strokeWidth="1.2" fill="none" />
      <text x="380" y="278" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="2.5" fill="#242625">JUMEIRAH BEACH ROAD</text>
      {/* Sheikh Zayed Road */}
      <path d="M0,380 L600,360" stroke="#242625" strokeWidth="1.2" fill="none" />
      <text x="40" y="375" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="2.5" fill="#242625">E11 — SHEIKH ZAYED ROAD</text>
      {/* connectors */}
      <path d="M180,290 L200,378" stroke="#7C766B" strokeWidth="0.5" fill="none" strokeDasharray="3 3" />
      <path d="M380,275 L405,365" stroke="#7C766B" strokeWidth="0.5" fill="none" strokeDasharray="3 3" />
      {/* Burj Al Arab marker (triangle) */}
      <g transform="translate(320, 215)">
        <polygon points="0,-22 8,5 -8,5" fill="#242625" />
        <text x="14" y="2" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="1.5" fill="#242625">BURJ AL ARAB</text>
      </g>
      {/* Pin */}
      <g transform="translate(295, 282)">
        <circle r="20" fill="#9C8458" opacity="0.2">
          <animate attributeName="r" from="8" to="28" dur="2.4s" repeatCount="indefinite"/>
          <animate attributeName="opacity" from="0.4" to="0" dur="2.4s" repeatCount="indefinite"/>
        </circle>
        <circle r="7" fill="#242625" stroke="#FAF8F5" strokeWidth="2"/>
        <text x="14" y="-10" fontFamily="Fraunces, serif" fontStyle="italic" fontSize="14" fill="#242625">OBEGI Home</text>
        <text x="14" y="4" fontFamily="JetBrains Mono, monospace" fontSize="8" letterSpacing="1.5" fill="#7C766B">J844 · UMM SUQEIM 3</text>
      </g>
    </svg>
  );
}

function Showroom({ onEnquire }) {
  return (
    <section id="showroom" style={{paddingTop:'8rem', paddingBottom:'10rem'}}>
      <div className="container">
        <div className="section-head">
          <Reveal>
            <div className="label">07 — Showrooms</div>
            <h2 className="display display-l">
              The flagship, beside<br/>the <em>Burj Al Arab</em>.
            </h2>
          </Reveal>
          <Reveal>
            <p className="lede max-560" style={{margin:0}}>
              The flagship sits on Jumeirah Beach Road, in Umm Suqeim 3, with a dedicated ELIE SAAB
              Maison space inside. Poliform and bulthaup occupy mono-brand showrooms on the same road.
            </p>
          </Reveal>
        </div>

        <div className="showroom-grid">
          <Reveal>
            <div className="map-frame">
              <MapSchematic />
              <div className="map-label">25.14335° N · 55.19198° E</div>
            </div>
          </Reveal>

          <Reveal className="showroom-info">
            <h3>OBEGI Home Dubai — <em>by appointment</em>.</h3>

            <div className="info-block">
              <div className="k">Address</div>
              <div className="v">J844 Jumeirah Beach Road<br/>Umm Suqeim 3 · Dubai · United Arab Emirates</div>
            </div>
            <div className="info-block">
              <div className="k">Telephone</div>
              <div className="v"><a href="tel:+97143948161">+971 4 394 8161</a></div>
            </div>
            <div className="info-block">
              <div className="k">Email</div>
              <div className="v"><a href="mailto:uae@obegihome.com">uae@obegihome.com</a></div>
            </div>
            <div className="info-block">
              <div className="k">Visiting</div>
              <div className="v">By appointment — please enquire to book a visit.</div>
            </div>
            <div className="info-block">
              <div className="k">Mono-brand showrooms on the same road</div>
              <div className="v">Poliform Dubai &nbsp;·&nbsp; bulthaup Dubai</div>
            </div>

            <div style={{marginTop: 32}}>
              <button className="cta" onClick={onEnquire}>Book a visit <span style={{fontFamily:'var(--serif)', fontSize:18}}>→</span></button>
            </div>
          </Reveal>
        </div>

        <div className="region-strip">
          <Reveal className="region">
            <div className="city">Dubai <em>flagship</em></div>
            <div className="country">United Arab Emirates</div>
            <div className="address">J844 Jumeirah Beach Road, Umm Suqeim 3<br/>+971 4 394 8161</div>
          </Reveal>
          <Reveal className="region">
            <div className="city">Riyadh</div>
            <div className="country">Kingdom of Saudi Arabia</div>
            <div className="address">King Abdullah Financial District<br/>+966 56 890 5622</div>
          </Reveal>
          <Reveal className="region">
            <div className="city">Beirut</div>
            <div className="country">Lebanon</div>
            <div className="address">Jal El Dib<br/>+961 3 001 552</div>
          </Reveal>
        </div>
      </div>
    </section>
  );
}

// ---------- Closing CTA ----------
function Closing({ onEnquire }) {
  return (
    <section className="closing">
      <div className="closing-inner">
        <span className="eyebrow" style={{color:'rgba(250,248,245,0.7)'}}><span className="dot"></span>An invitation</span>
        <h2 style={{marginTop:24}}>
          Indulge in the<br/>art of <em>refined</em> living.
        </h2>
        <p className="lede" style={{color:'rgba(250,248,245,0.85)', maxWidth:680, margin:'0 auto 48px'}}>
          A conversation with the studio is the easiest way to begin. We respond within one working day.
        </p>
        <div style={{display:'flex', gap:16, justifyContent:'center', flexWrap:'wrap'}}>
          <button className="cta" style={{background:'var(--ivory)', color:'var(--ink)', borderColor:'var(--ivory)'}} onClick={onEnquire}>
            Enquire <span style={{fontFamily:'var(--serif)', fontSize:18}}>→</span>
          </button>
          <a className="cta-ghost" href="tel:+97143948161">
            +971 4 394 8161
          </a>
        </div>
      </div>
    </section>
  );
}

// ---------- Footer ----------
function Footer() {
  return (
    <footer>
      <div className="footer-grid">
        <div className="footer-brand">
          <div className="mark">OBEGI HOME</div>
          <p>A luxury furniture and interiors destination across the GCC and Lebanon. Founded in Beirut, 1973.</p>
          <div style={{marginTop: 24, display:'flex', gap:16, fontFamily:'var(--mono)', fontSize:11, letterSpacing:'0.18em', textTransform:'uppercase'}}>
            <a href="https://www.instagram.com/obegihome">Instagram</a>
            <a href="https://www.linkedin.com/company/obegi-home">LinkedIn</a>
            <a href="https://www.facebook.com/profile.php?id=100063575589855">Facebook</a>
          </div>
        </div>
        <div className="footer-col">
          <h5>The studio</h5>
          <ul>
            <li><a href="#">About</a></li>
            <li><a href="#experience">Design Experience</a></li>
            <li><a href="#projects">Projects</a></li>
            <li><a href="#">Design Journal</a></li>
            <li><a href="#">Careers</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Curation</h5>
          <ul>
            <li><a href="#brands">Brands</a></li>
            <li><a href="#rooms">Rooms</a></li>
            <li><a href="#">Kitchens</a></li>
            <li><a href="#">Wardrobes & Systems</a></li>
            <li><a href="#">Outdoor</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>For professionals</h5>
          <ul>
            <li><a href="#professionals">Trade Programme</a></li>
            <li><a href="#">Catalogues</a></li>
            <li><a href="#">Specification</a></li>
            <li><a href="#">Potential Partners</a></li>
          </ul>
        </div>
        <div className="footer-col">
          <h5>Contact</h5>
          <ul>
            <li><a href="#showroom">Showrooms</a></li>
            <li><a href="tel:+97143948161">+971 4 394 8161</a></li>
            <li><a href="mailto:uae@obegihome.com">uae@obegihome.com</a></li>
            <li><a href="#">Visit by appointment</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <div>© MMXXVI OBEGI Home · A reference for high-end interiors in the GCC.</div>
        <div>Privacy · Terms · Cookies</div>
      </div>
    </footer>
  );
}

// ---------- Enquire drawer ----------
function EnquireDrawer({ open, onClose }) {
  const [iAm, setIAm] = useState('Property Owner');
  const [scope, setScope] = useState([]);
  const [submitted, setSubmitted] = useState(false);
  const roles = ['Property Owner','Architect','Designer','Developer','Potential Supplier','Other'];
  const scopes = ['Full Interior Curation','Furniture','Kitchens','Wardrobes','Bathrooms','Doors','Other'];

  const toggleScope = (s) => {
    setScope(prev => prev.includes(s) ? prev.filter(x=>x!==s) : [...prev, s]);
  };

  useEffect(() => {
    if (open) setSubmitted(false);
  }, [open]);

  return (
    <>
      <div className={`drawer-backdrop ${open?'open':''}`} onClick={onClose} />
      <aside className={`drawer ${open?'open':''}`}>
        <div className="drawer-head">
          <h3>Enquire — <em>begin the conversation</em>.</h3>
          <button className="drawer-close" onClick={onClose} aria-label="Close">×</button>
        </div>

        {submitted ? (
          <div style={{padding:'64px 0', textAlign:'center'}}>
            <div className="eyebrow" style={{marginBottom: 24}}><span className="dot"></span>Thank you</div>
            <h3 className="display display-m" style={{margin:'0 0 16px'}}>We've received your enquiry.</h3>
            <p className="body" style={{maxWidth: 380, margin: '0 auto'}}>A member of the studio will be in touch within one working day. For urgent matters, call +971 4 394 8161.</p>
          </div>
        ) : (
        <form className="drawer-form" onSubmit={(e)=>{e.preventDefault(); setSubmitted(true);}}>
          <div className="field">
            <label>I am a</label>
            <div className="pill-group">
              {roles.map(r => (
                <button type="button" key={r} className={`pill ${iAm===r?'active':''}`} onClick={()=>setIAm(r)}>{r}</button>
              ))}
            </div>
          </div>

          <div className="field-row">
            <div className="field">
              <label>Name</label>
              <input required defaultValue="" placeholder="Your full name" />
            </div>
            <div className="field">
              <label>Phone</label>
              <input required defaultValue="" placeholder="+971 …" />
            </div>
          </div>

          <div className="field-row">
            <div className="field">
              <label>Email</label>
              <input type="email" required placeholder="you@example.com" />
            </div>
            <div className="field">
              <label>{iAm === 'Architect' || iAm === 'Designer' || iAm === 'Developer' ? 'Practice / Company' : 'Company (optional)'}</label>
              <input placeholder="—" />
            </div>
          </div>

          <div className="field">
            <label>Project location</label>
            <input required placeholder="e.g. Palm Jumeirah, Dubai" />
          </div>

          <div className="field">
            <label>Project scope (select all that apply)</label>
            <div className="pill-group">
              {scopes.map(s => (
                <button type="button" key={s} className={`pill ${scope.includes(s)?'active':''}`} onClick={()=>toggleScope(s)}>{s}</button>
              ))}
            </div>
          </div>

          <div className="field">
            <label>Message</label>
            <textarea placeholder="Tell us about the project — timing, address, what's on your mind." />
          </div>

          <div className="submit-row">
            <span className="small">We respond within one working day.</span>
            <button type="submit" className="cta">Send enquiry <span style={{fontFamily:'var(--serif)', fontSize:18}}>→</span></button>
          </div>
        </form>
        )}
      </aside>
    </>
  );
}

// ---------- App + Tweaks ----------
function App() {
  const [drawerOpen, setDrawerOpen] = useState(false);
  const useTweaksFn = window.useTweaks;
  const [tweaks, setTweak] = useTweaksFn ? useTweaksFn(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];

  // Apply palette / serif / density to the document
  useEffect(() => {
    const p = PALETTES[tweaks.palette] || PALETTES.ivory;
    const root = document.documentElement;
    root.style.setProperty('--ivory', p.bg);
    root.style.setProperty('--paper', p.paper);
    root.style.setProperty('--stone', p.stone);
    root.style.setProperty('--ink', p.ink);
    root.style.setProperty('--muted', p.muted);
    root.style.setProperty('--line', p.line);
    root.style.setProperty('--bronze', tweaks.accent || '#9C8458');

    const s = SERIFS[tweaks.serif] || SERIFS.fraunces;
    root.style.setProperty('--serif', s.family);

    document.body.classList.toggle('density-compact', tweaks.density === 'compact');
  }, [tweaks]);

  const TweaksPanel = window.TweaksPanel;
  const TweakSection = window.TweakSection;
  const TweakRadio = window.TweakRadio;
  const TweakColor = window.TweakColor;
  const TweakSelect = window.TweakSelect;

  return (
    <>
      <Nav onEnquire={() => setDrawerOpen(true)} />
      <Hero onEnquire={() => setDrawerOpen(true)} />
      <Intro />
      <BrandWall />
      <Rooms />
      <Projects />
      <Experience />
      <Professionals />
      <Team />
      <Showroom onEnquire={() => setDrawerOpen(true)} />
      <Closing onEnquire={() => setDrawerOpen(true)} />
      <Footer />
      <EnquireDrawer open={drawerOpen} onClose={() => setDrawerOpen(false)} />

      {TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection label="Palette" />
            <TweakRadio
              label="Tone"
              value={tweaks.palette}
              onChange={v => setTweak('palette', v)}
              options={[
                {value:'ivory', label:'Ivory'},
                {value:'stone', label:'Stone'},
                {value:'chalk', label:'Chalk'},
                {value:'noir',  label:'Noir'},
              ]}
            />
          <TweakColor
              label="Accent"
              value={tweaks.accent}
              onChange={v => setTweak('accent', v)}
              options={['#9C8458','#3D6B5C','#7C3A2C','#5E5C57','#B89D74']}
            />
          <TweakSection label="Typography" />
            <TweakRadio
              label="Display serif"
              value={tweaks.serif}
              onChange={v => setTweak('serif', v)}
              options={[
                {value:'fraunces', label:'Fraunces'},
                {value:'cormorant', label:'Cormorant'},
                {value:'ebgaramond', label:'EB Garamond'},
              ]}
            />
          <TweakSection label="Density" />
            <TweakRadio
              label="Rhythm"
              value={tweaks.density}
              onChange={v => setTweak('density', v)}
              options={[
                {value:'editorial', label:'Editorial'},
                {value:'compact', label:'Compact'},
              ]}
            />
        </TweaksPanel>
      )}
    </>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);