// sections.jsx — page composition for the AHS Properties project microsite.
// Loaded after data.js, React/Babel/ReactDOM, and modals.jsx.

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

// Tiny utilities ─────────────────────────────────────────────────────────────
function Eyebrow({ children, light }) {
  return <span className={'eyebrow' + (light ? ' eyebrow-light' : '')}>{children}</span>;
}
function MultilineText({ value }) {
  return <>{value.split('\n').map((line, i) => <React.Fragment key={i}>{i > 0 && <br />}{line}</React.Fragment>)}</>;
}

// Navbar ─────────────────────────────────────────────────────────────────────
function Navbar({ lang, setLang, copy, onOpen }) {
  const [solid, setSolid] = useState(false);
  useEffect(() => {
    const onScroll = () => setSolid(window.scrollY > 80);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);
  const LANGS = [['en','EN'],['ar','عر'],['ru','RU'],['zh','中']];
  return (
    <nav className={'nav' + (solid ? ' solid' : '')}>
      <a href="#top" className="nav-logo">AHS</a>
      <div className="nav-links">
        <a href="#overview">{copy.nav.projects}</a>
        <a href="#founder">{copy.nav.developer}</a>
        <a href="#press">{copy.nav.press}</a>
        <a href="#contact">{copy.nav.contact}</a>
      </div>
      <div className="nav-right">
        <div className="nav-lang" role="tablist" aria-label="Language">
          {LANGS.map(([code, label]) => (
            <button key={code} onClick={() => setLang(code)} className={lang === code ? 'active' : ''} aria-pressed={lang === code}>
              <span>{label}</span>
            </button>
          ))}
        </div>
        <button className="btn btn-outline" style={{ padding: '10px 18px', borderColor: 'currentColor' }} onClick={() => onOpen('register')}>
          {copy.nav.register}
        </button>
      </div>
    </nav>
  );
}

// Hero ───────────────────────────────────────────────────────────────────────
function Hero({ project, copy, onOpen }) {
  const ref = useRef(null);
  useEffect(() => {
    if (!ref.current) return;
    let raf = null;
    const onScroll = () => {
      if (raf) return;
      raf = requestAnimationFrame(() => {
        const y = window.scrollY;
        if (ref.current) ref.current.style.transform = `scale(1.06) translateY(${y * 0.18}px)`;
        raf = null;
      });
    };
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, [project.slug]);
  return (
    <section className="hero" id="top">
      <div className="hero-media" ref={ref} style={{ backgroundImage: `url(${project.hero})` }}></div>
      <div className="hero-inner">
        <div className="hero-meta">
          <div className={'hero-chip ' + (project.status === 'sold' ? 'sold' : '')}>
            <span className="dot"></span>
            <span>{project.statusLabel[copy._lang] || project.statusLabel.en}</span>
          </div>
          <span style={{ color: 'rgba(255,255,255,0.7)', fontSize: 11, letterSpacing: '0.32em', textTransform: 'uppercase', fontWeight: 500 }}>{project.eyebrow}</span>
        </div>
        <h1 className="hero-title">
          <MultilineText value={project.headline[copy._lang] || project.headline.en} />
        </h1>
        <p className="hero-sub">{project.tagline[copy._lang] || project.tagline.en}</p>
        <div className="hero-actions">
          <button className="btn btn-accent" onClick={() => onOpen('register')}>{copy.hero.register}</button>
          <button className="btn btn-ghost" onClick={() => onOpen('brochure')}>{copy.hero.brochure}</button>
          <button className="btn btn-ghost" onClick={() => onOpen('viewing')}>{copy.hero.viewing}</button>
        </div>
      </div>
      <div className="hero-scroll" aria-hidden="true">{copy.hero.scroll}</div>
    </section>
  );
}

// Project rail — sub-nav under hero ─────────────────────────────────────────
function ProjectRail({ project, copy, onOpen }) {
  return (
    <div className="project-rail" id="project-rail">
      <div className="project-rail-inner">
        <div className="crumbs">
          <span>{copy.rail.breadcrumbProjects}</span>
          <span className="sep">/</span>
          <span className="here">{project.name}</span>
        </div>
        <div className="quick">
          <a href="#overview">{copy.rail.overview}</a>
          <a href="#residences">{copy.rail.residences}</a>
          <a href="#amenities">{copy.rail.amenities}</a>
          <a href="#gallery">{copy.rail.gallery}</a>
          <a className="cta" href="#contact" onClick={(e) => { e.preventDefault(); onOpen('register'); }}>{copy.rail.cta}</a>
        </div>
      </div>
    </div>
  );
}

// Overview ───────────────────────────────────────────────────────────────────
function Overview({ project, copy }) {
  return (
    <section className="section container" id="overview">
      <div className="overview-grid">
        <div className="left">
          <Eyebrow>{copy.sections.overview}</Eyebrow>
          <h2>
            {project.name === 'Casa Canal' && (copy._lang === 'en' ? <>The canal,<br /><em>in residence.</em></> : <MultilineText value={project.headline[copy._lang] || project.headline.en} />)}
            {project.name === 'Casa AHS' && (copy._lang === 'en' ? <>Thirty-two<br /><em>rare addresses.</em></> : <MultilineText value={project.headline[copy._lang] || project.headline.en} />)}
            {project.name === 'One Crescent' && (copy._lang === 'en' ? <>The Palm,<br /><em>at one stroke.</em></> : <MultilineText value={project.headline[copy._lang] || project.headline.en} />)}
            {project.name === 'One Canal' && (copy._lang === 'en' ? <>The canal,<br /><em>by Fendi.</em></> : <MultilineText value={project.headline[copy._lang] || project.headline.en} />)}
          </h2>
        </div>
        <div className="right">
          <p className="lead">{project.tagline[copy._lang] || project.tagline.en}</p>
          <hr className="hairline" style={{ margin: '32px 0' }} />
          <p>{project.overview[copy._lang] || project.overview.en}</p>
          <p style={{ color: 'var(--muted)', fontSize: 13.5, marginTop: 32, paddingTop: 24, borderTop: '1px solid var(--border)' }}>
            <strong style={{ color: 'var(--text)', letterSpacing: '0.18em', textTransform: 'uppercase', fontSize: 10.5 }}>Prices · </strong>
            By enquiry. AHS Properties does not headline prices. Per-unit DLD records are referenced privately with verified buyers only.
          </p>
        </div>
      </div>
      <div className="facts">
        {project.facts.map((f, i) => (
          <div className="fact" key={i}>
            <div className="k">{f.k}</div>
            <div className="v">{f.v}{f.sub && <small>{f.sub}</small>}</div>
            <div className="note">{f.note}</div>
          </div>
        ))}
      </div>
    </section>
  );
}

// Location — map + amenities list ────────────────────────────────────────────
function Location({ project, copy }) {
  return (
    <section className="section location">
      <div className="container">
        <div className="location-grid">
          <div className="location-map">
            {/* Stylised map — placeholder for Google output=embed at build */}
            <svg viewBox="0 0 600 480" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
              <defs>
                <pattern id="dots" width="14" height="14" patternUnits="userSpaceOnUse">
                  <circle cx="2" cy="2" r="0.6" fill="rgba(20,20,24,0.18)" />
                </pattern>
              </defs>
              <rect width="600" height="480" fill="url(#dots)" />
              <path d="M -20 280 Q 120 260 220 220 T 480 180 T 640 130" stroke="#5E7377" strokeWidth="24" fill="none" opacity="0.85" />
              <path d="M -20 280 Q 120 260 220 220 T 480 180 T 640 130" stroke="#E4EAEB" strokeWidth="2" fill="none" opacity="0.6" strokeDasharray="4 6" />
              <g opacity="0.55" stroke="#1E1E22" strokeWidth="1" fill="none">
                <path d="M 0 380 L 600 320" />
                <path d="M 0 100 L 600 60" />
                <path d="M 180 0 L 160 480" />
                <path d="M 420 0 L 440 480" />
              </g>
              <text x="40" y="380" fill="rgba(30,30,34,0.45)" fontSize="9" letterSpacing="2" textAnchor="start" style={{ fontFamily: 'Inter, sans-serif' }}>SHEIKH ZAYED RD</text>
              <text x="380" y="170" fill="#1E1E22" fontSize="11" letterSpacing="2" style={{ fontFamily: 'Inter, sans-serif' }} fontWeight="500">DUBAI WATER CANAL</text>
              <text x="120" y="450" fill="rgba(30,30,34,0.45)" fontSize="9" letterSpacing="2" style={{ fontFamily: 'Inter, sans-serif' }}>AL WASL</text>
            </svg>
            <div className="location-pin" aria-label="Project location">
              <span style={{ position: 'absolute', left: 20, top: -8, fontFamily: 'var(--serif)', fontSize: 18, whiteSpace: 'nowrap', color: 'var(--text)' }}>{project.name}</span>
            </div>
          </div>
          <div>
            <Eyebrow>{copy.sections.location}</Eyebrow>
            <h2 className="display-light" style={{ fontSize: 'clamp(32px, 4vw, 56px)', margin: '16px 0 8px' }}>
              <MultilineText value={copy.location.heading} />
            </h2>
            <p className="body-md" style={{ marginBottom: 28 }}>{copy.location.neighborhood} · {project.location.neighborhood}</p>
            <div className="location-list">
              {project.location.proximities.map((p, i) => (
                <div className="location-item" key={i}>
                  <span className="name">{p.name}</span>
                  <span className="dist">{p.dist}</span>
                </div>
              ))}
            </div>
            <p style={{ marginTop: 28, fontSize: 12.5, color: 'var(--muted)' }}>
              Indicative distances · interactive map activated at build (Google <code style={{ fontFamily: 'monospace', fontSize: 11 }}>output=embed</code>).
            </p>
          </div>
        </div>
      </div>
    </section>
  );
}

// Partners ───────────────────────────────────────────────────────────────────
function Partners({ project, copy }) {
  return (
    <section className="section container partners" id="design">
      <Eyebrow>{copy.sections.design}</Eyebrow>
      <h2 className="display-light" style={{ fontSize: 'clamp(36px, 4.5vw, 64px)', margin: '16px auto 16px', maxWidth: '20ch' }}>
        <MultilineText value={copy.partners.heading} />
      </h2>
      <p className="body-md" style={{ maxWidth: '52ch', margin: '0 auto' }}>{copy.partners.sub}</p>
      <div className="partners-grid">
        {project.partners.map((p, i) => (
          <div className="partner-cell" key={i} title={`${p.name} — ${p.role}`}>
            <img src={p.img} alt={p.name} />
            <span className="role">{p.role}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

// Residences ─────────────────────────────────────────────────────────────────
function Residences({ project, copy, onOpen }) {
  return (
    <section className="section residences" id="residences">
      <div className="container">
        <div className="residences-header">
          <div>
            <Eyebrow>{copy.sections.residences}</Eyebrow>
            <h2><MultilineText value={copy.residences.heading} /></h2>
          </div>
          <p className="body-md" style={{ maxWidth: '38ch', margin: 0 }}>{copy.residences.sub}</p>
        </div>
        <div className="residence-list">
          {project.residences.map((r, i) => (
            <div className="residence" key={i} onClick={() => onOpen('register')}>
              <span className="index">{r.idx}</span>
              <span className="name">{r.name}</span>
              <span className="desc">{r.desc}</span>
              <span className="meta">{r.meta}<small>{r.sub}</small></span>
            </div>
          ))}
        </div>
        <div style={{ marginTop: 48, display: 'flex', gap: 20, alignItems: 'center', flexWrap: 'wrap' }}>
          <button className="btn-link" onClick={() => onOpen('brochure')}>
            <span>Download full residence brochure</span>
            <Arrow />
          </button>
          <span style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'var(--muted)' }}>Email-gated · floor concepts · partner credits</span>
        </div>
      </div>
    </section>
  );
}

function Arrow({ inverted }) {
  return (
    <svg width="22" height="10" viewBox="0 0 22 10" fill="none" aria-hidden="true" style={{ transform: inverted ? 'scaleX(-1)' : 'none' }}>
      <path d="M0 5 H20 M14 0 L20 5 L14 10" stroke="currentColor" strokeWidth="1" fill="none" />
    </svg>
  );
}

// Amenities ─────────────────────────────────────────────────────────────────
function Amenities({ project, copy }) {
  return (
    <section className="section container" id="amenities">
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 40, marginBottom: 56, flexWrap: 'wrap' }}>
        <div>
          <Eyebrow>{copy.sections.amenities}</Eyebrow>
          <h2 className="display-light" style={{ fontSize: 'clamp(40px, 5vw, 64px)', margin: '12px 0 0' }}>
            <MultilineText value={copy.amenities.heading} />
          </h2>
        </div>
      </div>
      <div className="amenities-grid">
        {project.amenities.map((a, i) => (
          <div className={'amenity ' + a.cls} key={i} style={{ backgroundImage: `url(${a.img})` }}>
            <div className="label">
              <span className="sub">{a.sub}</span>
              <span className="name">{a.name}</span>
            </div>
          </div>
        ))}
      </div>
    </section>
  );
}

// Gallery ───────────────────────────────────────────────────────────────────
function Gallery({ project, copy, onLightbox }) {
  return (
    <section className="section gallery-wrap" id="gallery">
      <div className="container">
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'end', gap: 40, marginBottom: 56, flexWrap: 'wrap' }}>
          <div>
            <Eyebrow>{copy.sections.gallery}</Eyebrow>
            <h2 className="display-light" style={{ fontSize: 'clamp(36px, 4.5vw, 60px)', margin: '12px 0 0' }}>
              <MultilineText value={copy.gallery.heading} />
            </h2>
          </div>
          <p className="body-md" style={{ maxWidth: '32ch', margin: 0 }}>{project.gallery.length} images · click to enlarge. Film and high-resolution stills available on enquiry.</p>
        </div>
        <div className="gallery-grid">
          {project.gallery.map((g, i) => (
            <div
              key={i}
              className={'gallery-tile ' + g.cls}
              style={{ backgroundImage: `url(${g.img})` }}
              role="button"
              tabIndex={0}
              onClick={() => onLightbox(i)}
              onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && onLightbox(i)}
              aria-label={g.label}
            ></div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Founder ───────────────────────────────────────────────────────────────────
function Founder({ copy }) {
  return (
    <section className="section founder" id="founder">
      <div className="container">
        <div className="founder-grid">
          <div className="founder-portrait" style={{ backgroundImage: `url(media/founder-abbas-sajwani.webp)` }}></div>
          <div className="founder-text">
            <Eyebrow light>{copy.founder.eyebrow}</Eyebrow>
            <h3>{copy.founder.title}</h3>
            <blockquote>{copy.founder.quote}</blockquote>
            <div className="attr">{copy.founder.attr}</div>
            <p>{copy.founder.body}</p>
          </div>
        </div>
      </div>
    </section>
  );
}

// Press strip ───────────────────────────────────────────────────────────────
function Press({ copy }) {
  return (
    <section className="container" id="press" style={{ paddingBlock: 64, textAlign: 'center' }}>
      <Eyebrow>{copy.press.heading}</Eyebrow>
      <div className="press-row" style={{ marginTop: 24 }}>
        <span>Forbes</span>
        <span>Bloomberg</span>
        <span>Businesswire</span>
        <span>Entrepreneur</span>
        <span>Luxury Lifestyle Awards 2024</span>
      </div>
      <p style={{ fontSize: 11.5, color: 'var(--muted)', marginTop: 16, letterSpacing: '0.06em' }}>
        Awards and press names referenced. AHS Properties: Top 100 Luxury Real Estate Developers of the World 2024 (Luxury Lifestyle Awards).
      </p>
    </section>
  );
}

// CTA band ──────────────────────────────────────────────────────────────────
function CTABand({ copy, onOpen }) {
  return (
    <section className="cta-band" id="contact">
      <div className="container">
        <div className="cta-grid">
          <div>
            <Eyebrow light>{copy.cta.eyebrow}</Eyebrow>
            <h2><MultilineText value={copy.cta.heading} /></h2>
            <p>{copy.cta.sub}</p>
            <div style={{ marginTop: 36, display: 'flex', flexDirection: 'column', gap: 14, color: 'rgba(255,255,255,0.84)', fontSize: 14, lineHeight: 1.6 }}>
              <div>
                <span style={{ fontSize: 10.5, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>Sales Centre</span><br />
                City Walk, Building 5, Unit 2,<br />Happiness Street, Dubai
              </div>
              <div>
                <span style={{ fontSize: 10.5, letterSpacing: '0.32em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>Contact</span><br />
                <a href="tel:+97144581821" style={{ color: '#fff' }}>+971 4 458 1821</a> · <a href="mailto:info@ahs-properties.com" style={{ color: '#fff' }}>info@ahs-properties.com</a>
              </div>
            </div>
          </div>
          {['register','brochure','viewing'].map((k) => {
            const c = copy.cta[k];
            return (
              <div className="cta-card" key={k} onClick={() => onOpen(k)} role="button" tabIndex={0}
                onKeyDown={(e) => (e.key === 'Enter' || e.key === ' ') && onOpen(k)}>
                <span className="num">{c.num}</span>
                <span className="title">{c.title}</span>
                <span className="desc">{c.desc}</span>
                <span className="go">{c.go} <Arrow /></span>
              </div>
            );
          })}
        </div>
      </div>
    </section>
  );
}

// Footer ────────────────────────────────────────────────────────────────────
function Footer({ copy }) {
  return (
    <footer className="footer">
      <div className="container footer-grid">
        <div className="brand-block">
          <div className="word">AHS</div>
          <p>{copy.footer.tagline}</p>
          <div style={{ fontSize: 11, letterSpacing: '0.24em', textTransform: 'uppercase', color: 'rgba(255,255,255,0.5)' }}>{copy.footer.lic}</div>
        </div>
        <div>
          <h4>{copy.footer.projects}</h4>
          <ul>
            <li><a href="#">Casa Canal</a></li>
            <li><a href="#">Casa AHS</a></li>
            <li><a href="#">One Crescent</a></li>
            <li><a href="#">One Canal</a></li>
            <li><a href="#">AHS Tower</a></li>
          </ul>
        </div>
        <div>
          <h4>{copy.footer.developer}</h4>
          <ul>
            <li><a href="#founder">About</a></li>
            <li><a href="#press">Press</a></li>
            <li><a href="#">Partners</a></li>
            <li><a href="#">Sustainability</a></li>
          </ul>
        </div>
        <div>
          <h4>{copy.footer.contact}</h4>
          <ul>
            <li><a href="tel:+97144581821">+971 4 458 1821</a></li>
            <li><a href="mailto:info@ahs-properties.com">info@ahs-properties.com</a></li>
            <li><a href="#">City Walk Sales Centre</a></li>
            <li><a href="#">WhatsApp (confirm)</a></li>
          </ul>
          <ul style={{ marginTop: 20, flexDirection: 'row', gap: 18 }}>
            <li><a href="#" aria-label="Instagram">IG</a></li>
            <li><a href="#" aria-label="LinkedIn">LI</a></li>
            <li><a href="#" aria-label="YouTube">YT</a></li>
            <li><a href="#" aria-label="Facebook">FB</a></li>
            <li><a href="#" aria-label="X">X</a></li>
          </ul>
        </div>
      </div>
      <div className="container footer-bottom">
        <span>{copy.footer.rights}</span>
        <span>ahsproperties.com · canonical domain</span>
      </div>
    </footer>
  );
}

// WhatsApp FAB ──────────────────────────────────────────────────────────────
function WhatsAppFab({ onOpen }) {
  return (
    <button className="whatsapp-fab" onClick={() => onOpen('register')} aria-label="Contact us — register interest">
      <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
        <path d="M17.5 14.4c-.3-.1-1.6-.8-1.9-.9-.3-.1-.4-.1-.6.1-.2.3-.7.9-.8 1.1-.2.2-.3.2-.6.1-.3-.1-1.2-.5-2.3-1.4-.9-.8-1.4-1.8-1.6-2.1-.2-.3 0-.4.1-.6.1-.1.3-.3.4-.5.1-.2.2-.3.2-.5 0-.2 0-.4-.1-.5-.1-.1-.6-1.5-.8-2.1-.2-.5-.4-.5-.6-.5h-.5c-.2 0-.5.1-.7.3-.2.3-.9.9-.9 2.2 0 1.3.9 2.5 1 2.7.1.2 1.8 2.8 4.4 3.9.6.3 1.1.4 1.5.5.6.2 1.2.2 1.6.1.5-.1 1.6-.6 1.8-1.3.2-.6.2-1.2.2-1.3-.1-.1-.3-.2-.6-.3z M12 2C6.5 2 2 6.5 2 12c0 1.8.5 3.4 1.3 4.9L2 22l5.3-1.4C8.7 21.5 10.3 22 12 22c5.5 0 10-4.5 10-10S17.5 2 12 2zm0 18c-1.6 0-3.1-.4-4.4-1.2l-.3-.2-3.2.8.8-3.1-.2-.3C3.9 14.7 3.5 13.4 3.5 12 3.5 7.3 7.3 3.5 12 3.5S20.5 7.3 20.5 12 16.7 20 12 20z" />
      </svg>
    </button>
  );
}

Object.assign(window, {
  Navbar, Hero, ProjectRail, Overview, Location, Partners, Residences,
  Amenities, Gallery, Founder, Press, CTABand, Footer, WhatsAppFab, Arrow,
  Eyebrow, MultilineText,
});
