/* home.jsx — landing page */

const Home = ({onConsult, setRoute, setProductId, tweaks}) => {
  return (
    <div className="page-enter">
      <Hero onConsult={onConsult} setRoute={setRoute} />
      <Marquee />
      <SignaturesSection setRoute={setRoute} setProductId={setProductId} />
      <CollectionsSection setRoute={setRoute} />
      <HeritageSection />
      <BespokeTeaser onConsult={onConsult} setRoute={setRoute} />
      {tweaks.showTestimonial && <Testimonial />}
      {tweaks.showTrust && <TrustStrip />}
      <VisitSection />
      {tweaks.showInstagram && <InstagramStrip />}
    </div>
  );
};

// ===========================================================
// Hero
// ===========================================================
const Hero = ({onConsult, setRoute}) => (
  <div className="shell">
    <div className="hero">
      <div className="hero__left">
        <span className="eyebrow">Old Gold Souk · Deira · Since 1998</span>
        <h1 className="display" style={{
          fontSize: 'clamp(56px, 7.5vw, 112px)',
          margin: '24px 0 0',
          letterSpacing: '-0.015em',
        }}>
          Look regal, <br/>
          <span className="display-roman" style={{fontFamily: 'var(--font-display)', fontStyle: 'normal'}}>feel royal.</span>
        </h1>
        <p style={{
          marginTop: 32,
          maxWidth: 480,
          fontSize: 17,
          lineHeight: 1.6,
          color: 'var(--ink-60)',
        }}>
          A family jewellery house in Dubai's Gold Souk. Diamond &amp; coloured-gemstone pieces, bridal, and one-of-a-kind bespoke — crafted in our own atelier in Bangkok, finished by hand in Deira.
        </p>
        <div style={{display: 'flex', gap: 16, marginTop: 40, flexWrap: 'wrap'}}>
          <button className="btn btn-primary" onClick={onConsult}>Book a Private Consultation</button>
          <button className="btn btn-ghost" onClick={() => document.getElementById('collections')?.scrollIntoView({behavior: 'smooth'})}>
            Explore Collections
          </button>
        </div>

        <div style={{display: 'flex', gap: 48, marginTop: 64, paddingTop: 32, borderTop: '1px solid var(--gold-line)'}}>
          <HeroStat label="Showrooms" value="2" caption="Gold Souk, Deira" />
          <HeroStat label="Own Atelier" value="Bangkok" caption="Cast & set in-house" />
          <HeroStat label="Worldwide" value="Ship" caption="7–16 days" />
        </div>
      </div>

      <div className="hero__right">
        <img src="assets/lifestyle-2.webp" alt="Palaces Jewellery — Aureveris ring on hand" />
        <div className="hero__caption">The Aureveris · 18k rose gold · AED 48,399</div>
      </div>
    </div>
  </div>
);

const HeroStat = ({label, value, caption}) => (
  <div>
    <div className="label" style={{fontSize: 10}}>{label}</div>
    <div style={{
      fontFamily: 'var(--font-display)',
      fontStyle: 'italic',
      fontSize: 36,
      lineHeight: 1,
      color: 'var(--royal-night)',
      marginTop: 6,
    }}>{value}</div>
    <div style={{fontSize: 12, color: 'var(--ink-60)', marginTop: 6}}>{caption}</div>
  </div>
);

// ===========================================================
// Marquee
// ===========================================================
const Marquee = () => {
  const items = [
    'Bridal & engagement consultations',
    'Bespoke 3D-CAD design',
    'Coloured gemstones — sapphire, emerald, ruby',
    'Hand-finished in Deira',
    'Worldwide shipping',
    'Resizing · engraving · appraisal',
  ];
  const track = [...items, ...items];
  return (
    <div className="marquee" style={{marginTop: 32}}>
      <div className="marquee__track">
        {track.map((t, i) => (
          <span key={i} style={{display: 'inline-flex', alignItems: 'center', gap: 24}}>
            <span className="marquee__star"><Icon.Crown size={14} /></span>
            {t}
          </span>
        ))}
      </div>
    </div>
  );
};

// ===========================================================
// Signatures
// ===========================================================
const SignaturesSection = ({setRoute, setProductId}) => {
  const features = ['aureveris', 'velantrix', 'seraphelis', 'imperial-eagle', 'celeste', 'magnolia'].map(byId);
  const open = (id) => { setProductId(id); setRoute('product'); window.scrollTo(0, 0); };
  return (
    <section className="section-pad shell" id="signatures">
      <SectionHead
        eyebrow="Signature pieces"
        title={<>The house's <em>own hand</em>.</>}
        sub="A small, named family of pieces designed in-house and not made for anyone else. Most are made to order — allow four to six weeks."
        action={<button className="btn-link" onClick={() => open('aureveris')}>See all signatures →</button>}
      />
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 40, columnGap: 32}}>
        {features.map((p) => <ProductCard key={p.id} product={p} onOpen={open} />)}
      </div>
    </section>
  );
};

// ===========================================================
// Collections
// ===========================================================
const CollectionsSection = ({setRoute}) => {
  const tiles = [
    {key: 'bridal', name: 'Bridal & Engagement', desc: 'From a quiet solitaire to a piece built around your stone.', img: 'assets/collection-tile-1.webp', count: 64, range: 'AED 9,299 — 49,299'},
    {key: 'diamond', name: 'Diamond Jewellery', desc: 'White-on-white, pavé and brilliants — for the everyday and the never-everyday.', img: 'assets/collection-tile-2.webp', count: 112, range: 'AED 11,399 — 89,000'},
    {key: 'gemstone', name: 'Coloured Gemstones', desc: 'Sapphire, emerald, ruby and the rarer-than-most blue spinel.', img: 'assets/collection-tile-3.webp', count: 78, range: 'AED 12,729 — 269,899'},
    {key: 'signature', name: 'Signature — Eagle of Noor', desc: 'Our heraldic motif, drawn in gold and brilliant pavé.', img: 'assets/collection-tile-4.webp', count: 9, range: 'AED 14,189 — 30,499'},
  ];
  return (
    <section style={{background: 'var(--section-bg)'}} id="collections">
      <div className="shell section-pad">
        <SectionHead
          eyebrow="Collections"
          title="Four ways to begin."
          sub="Each collection is its own room. Step in — and a consultant will meet you there in person or on the phone."
        />
        <div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32}}>
          {tiles.map((t) => (
            <article key={t.key} style={{display: 'grid', gridTemplateColumns: '1.1fr 1fr', gap: 0, background: 'var(--card-bg)', minHeight: 320}}>
              <div style={{position: 'relative', overflow: 'hidden'}}>
                <img src={t.img} alt={t.name} style={{width: '100%', height: '100%', objectFit: 'cover'}} />
              </div>
              <div style={{padding: '36px 32px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between'}}>
                <div>
                  <span className="label">{t.count} pieces · {t.range}</span>
                  <h3 className="display" style={{margin: '14px 0 12px', fontSize: 30, lineHeight: 1.1}}>{t.name}</h3>
                  <p style={{margin: 0, color: 'var(--ink-60)', fontSize: 14, lineHeight: 1.6}}>{t.desc}</p>
                </div>
                <button className="btn-link" style={{alignSelf: 'flex-start', marginTop: 24}} onClick={() => {}}>
                  Enter the room →
                </button>
              </div>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
};

// ===========================================================
// Heritage strip with RTL toggle demonstration
// ===========================================================
const HeritageSection = () => {
  const [locale, setLocale] = React.useState('en');
  const isRtl = locale === 'ar';
  return (
    <section id="heritage" className="section-pad" style={{background: 'var(--page-bg)'}}>
      <div className="shell" style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 72, alignItems: 'center'}}>
        <div style={{position: 'relative'}}>
          <img src="assets/lifestyle-1.webp" alt="Atelier" style={{width: '100%', aspectRatio: '4/5', objectFit: 'cover'}} />
          <div style={{
            position: 'absolute',
            bottom: -28, right: -28,
            background: 'var(--royal-night)',
            color: 'var(--gold-soft)',
            padding: '28px 32px',
            maxWidth: 280,
          }}>
            <div className="eyebrow" style={{color: 'var(--palace-gold)'}}>The Atelier</div>
            <p style={{margin: '12px 0 0', fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 22, lineHeight: 1.35, color: '#FFF'}}>
              "Cast in Bangkok. Finished by hand in Deira."
            </p>
          </div>
        </div>

        <div dir={isRtl ? 'rtl' : 'ltr'} style={{textAlign: isRtl ? 'right' : 'left'}}>
          <div style={{display: 'flex', justifyContent: isRtl ? 'flex-end' : 'flex-start', gap: 8, marginBottom: 24}}>
            <button className="chip" data-selected={!isRtl} onClick={() => setLocale('en')}>English</button>
            <button className="chip" data-selected={isRtl} onClick={() => setLocale('ar')} style={{fontFamily: 'var(--font-arabic, "Noto Naskh Arabic", serif)'}}>العربية</button>
          </div>
          <span className="eyebrow">Heritage</span>
          {!isRtl ? (
            <React.Fragment>
              <h2 className="display" style={{fontSize: 'clamp(38px, 4.4vw, 60px)', margin: '14px 0 28px'}}>
                A family house in the <em>Old Gold Souk</em>.
              </h2>
              <p style={{fontSize: 16, color: 'var(--ink-60)', lineHeight: 1.7, maxWidth: 480}}>
                Palaces opened on the Deira side of Dubai Creek in 1998. Two showrooms, two gates of the Old Souk, one family at the door. Pieces are designed at the bench, drawn in 3D, cast in our own atelier in Bangkok, and finished by hand back in Deira.
              </p>
            </React.Fragment>
          ) : (
            <React.Fragment>
              <h2 className="display" style={{fontSize: 'clamp(38px, 4.4vw, 60px)', margin: '14px 0 28px', fontFamily: 'var(--font-arabic, "Noto Naskh Arabic", serif)', fontStyle: 'normal'}}>
                دار عائلية في سوق الذهب القديم
              </h2>
              <p style={{fontSize: 16, color: 'var(--ink-60)', lineHeight: 1.9, maxWidth: 480, fontFamily: 'var(--font-arabic, "Noto Naskh Arabic", serif)'}}>
                افتُتح "بالاسز" في ديرة على ضفاف خور دبي عام 1998. صالتا عرض، بوّابتان من السوق القديم، وعائلة واحدة عند المدخل. تُصمَّم القطع على طاولة العمل، تُرسم بصيغة ثلاثية الأبعاد، وتُسبَك في ورشتنا الخاصة في بانكوك، ثم تُنجَز يدويًا في ديرة.
              </p>
            </React.Fragment>
          )}

          <div style={{display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 32, marginTop: 40, paddingTop: 32, borderTop: '1px solid var(--gold-line)'}}>
            <TimelinePoint year="1998" label="House opens, Deira" />
            <TimelinePoint year="2013" label="Atelier · Bangkok" />
            <TimelinePoint year="Today" label="Two showrooms" />
          </div>
        </div>
      </div>
    </section>
  );
};

const TimelinePoint = ({year, label}) => (
  <div>
    <div style={{fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 32, color: 'var(--palace-gold)', lineHeight: 1}}>{year}</div>
    <div style={{fontSize: 12, color: 'var(--ink-60)', marginTop: 8, letterSpacing: '0.06em'}}>{label}</div>
  </div>
);

// ===========================================================
// Bespoke teaser
// ===========================================================
const BespokeTeaser = ({onConsult, setRoute}) => (
  <section style={{background: 'var(--royal-night)', color: 'var(--ivory)'}}>
    <div className="shell" style={{padding: '120px 48px', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 80, alignItems: 'center'}}>
      <div>
        <span className="eyebrow" style={{color: 'var(--palace-gold)'}}>Bespoke</span>
        <h2 className="display" style={{fontSize: 'clamp(40px, 5vw, 72px)', color: '#FFF', margin: '20px 0 28px', lineHeight: 1.05}}>
          Designed for one wrist, <br/>one finger, <em>one story.</em>
        </h2>
        <p style={{color: 'rgba(251, 247, 239, 0.7)', fontSize: 16, lineHeight: 1.7, maxWidth: 480}}>
          Bring us a sketch on a napkin, an heirloom that's stopped being worn, or a stone you've kept in a drawer for ten years. A five-step process — and somewhere between sapphire and setting, the piece becomes yours.
        </p>
        <div style={{display: 'flex', gap: 16, marginTop: 36}}>
          <button className="btn btn-gold" onClick={() => { setRoute('bespoke'); window.scrollTo(0, 0); }}>Begin a Bespoke Piece</button>
          <button className="btn" style={{color: 'var(--gold-soft)', borderColor: 'var(--gold-soft)'}} onClick={onConsult}>Book a Consultation</button>
        </div>
      </div>
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 1, background: 'var(--imperial-plum)'}}>
        {[
          {n: '01', t: 'Private Assessment', d: 'Brief, references, budget band.'},
          {n: '02', t: 'Stone Curation', d: 'Diamonds & coloured stones, side-by-side.'},
          {n: '03', t: '3D-CAD Design', d: 'Three renders, refined to one.'},
          {n: '04', t: 'Atelier · 4–6 weeks', d: 'Wax, cast, set, finish, hallmark.'},
        ].map((s) => (
          <div key={s.n} style={{padding: '36px 28px', background: 'var(--royal-night)'}}>
            <div style={{fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 14, color: 'var(--palace-gold)', letterSpacing: '0.06em'}}>{s.n}</div>
            <h4 style={{margin: '12px 0 8px', fontFamily: 'var(--font-display)', fontStyle: 'normal', fontSize: 22, color: '#FFF', fontWeight: 400}}>{s.t}</h4>
            <p style={{margin: 0, color: 'rgba(230, 210, 162, 0.65)', fontSize: 13, lineHeight: 1.55}}>{s.d}</p>
          </div>
        ))}
      </div>
    </div>
  </section>
);

// ===========================================================
// Testimonial
// ===========================================================
const Testimonial = () => (
  <section className="shell section-pad" style={{textAlign: 'center'}}>
    <span className="eyebrow">A guest, in their words</span>
    <blockquote style={{
      fontFamily: 'var(--font-display)',
      fontStyle: 'italic',
      fontSize: 'clamp(28px, 3.6vw, 48px)',
      lineHeight: 1.25,
      maxWidth: 920,
      margin: '32px auto 0',
      color: 'var(--royal-night)',
    }}>
      "Beautiful range of designs and very fair prices. They walked us through every certificate on a 2-carat emerald-cut diamond — and then took an extra hour to design the band around it."
    </blockquote>
    <div style={{marginTop: 36, fontSize: 13, color: 'var(--ink-60)', letterSpacing: '0.12em', textTransform: 'uppercase'}}>
      Mohammed B. · 17 November 2025 · Tripadvisor
    </div>
  </section>
);

// ===========================================================
// Trust strip
// ===========================================================
const TrustStrip = () => (
  <div className="shell" style={{padding: '0 48px 80px'}}>
    <div className="trust-strip">
      {[
        {t: 'Own atelier', s: 'Cast & set in-house — Bangkok'},
        {t: 'Certified stones', s: 'Diamond & gemstone certificates with every piece'},
        {t: 'Worldwide shipping', s: '7–16 days, insured, door-to-door'},
        {t: 'Lifetime care', s: 'Cleaning, repair, resize & re-polish'},
      ].map((i) => (
        <div className="trust-strip__item" key={i.t}>
          <div style={{fontFamily: 'var(--font-display)', fontStyle: 'italic', fontSize: 20, color: 'var(--royal-night)'}}>{i.t}</div>
          <div style={{marginTop: 8, fontSize: 12, color: 'var(--ink-60)', lineHeight: 1.5}}>{i.s}</div>
        </div>
      ))}
    </div>
  </div>
);

// ===========================================================
// Visit
// ===========================================================
const VisitSection = () => (
  <section id="visit" className="section-pad" style={{background: 'var(--section-bg)'}}>
    <div className="shell">
      <SectionHead eyebrow="Visit" title="Two doors into the Souk." sub="Both showrooms sit on the spice-warmed lanes of the Deira side, a minute apart on foot." />
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 32}}>
        {[
          {
            tag: 'Gate 3',
            name: 'Dalmook Building',
            shop: 'Shop #5',
            phone: '+971 4 591 2373',
            tel: 'tel:+97145912373',
            map: 'https://www.google.com/maps?q=Palaces%20Jewellery%20Dalmook%20Building%20Gate%203%20Old%20Gold%20Souk%20Deira%20Dubai&z=16&output=embed',
            directions: 'https://www.google.com/maps/search/?api=1&query=Palaces%20Jewellery%20Dalmook%20Building%20Gate%203%20Old%20Gold%20Souk%20Deira%20Dubai',
          },
          {
            tag: 'Gate 1',
            name: 'Mohammed Al Ghurair Building',
            shop: 'Shop #4 & 5',
            phone: '+971 4 225 5972',
            tel: 'tel:+97142255972',
            map: 'https://www.google.com/maps?q=Palaces%20Jewellery%20Mohammed%20Al%20Ghurair%20Building%20Gate%201%20Old%20Gold%20Souk%20Deira%20Dubai&z=16&output=embed',
            directions: 'https://www.google.com/maps/search/?api=1&query=Palaces%20Jewellery%20Mohammed%20Al%20Ghurair%20Building%20Gate%201%20Old%20Gold%20Souk%20Deira%20Dubai',
          },
        ].map((s) => (
          <article key={s.tag} style={{background: 'var(--card-bg)', padding: 40}}>
            <div style={{display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start'}}>
              <div>
                <span className="tag">{s.tag}</span>
                <h3 className="display" style={{margin: '20px 0 4px', fontSize: 32}}>{s.name}</h3>
                <div style={{color: 'var(--ink-60)', fontSize: 14}}>{s.shop} · Old Gold Souk · Deira · Dubai</div>
              </div>
              <Icon.Map size={20} />
            </div>
            <div style={{height: 180, background: 'var(--champagne)', marginTop: 28, position: 'relative', overflow: 'hidden'}}>
              <iframe
                title={`${s.name} map`}
                src={s.map}
                loading="lazy"
                referrerPolicy="no-referrer-when-downgrade"
                style={{position: 'absolute', inset: 0, width: '100%', height: '100%', border: 0, filter: 'grayscale(.24) contrast(1.04)'}}
              />
            </div>
            <div style={{display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginTop: 28, paddingTop: 24, borderTop: '1px solid var(--ink-10)'}}>
              <div>
                <div className="label" style={{fontSize: 10}}>Hours</div>
                <div style={{marginTop: 4, fontSize: 14}}>Daily 10:00 — 22:00</div>
              </div>
              <div>
                <div className="label" style={{fontSize: 10}}>Direct line</div>
                <div style={{marginTop: 4, fontSize: 14}}><a href={s.tel}>{s.phone}</a></div>
              </div>
            </div>
            <div style={{display: 'flex', gap: 12, marginTop: 28}}>
              <a className="btn btn-ghost" href={s.tel} style={{flex: 1}}>
                <Icon.Phone size={14} /> Call showroom
              </a>
              <a className="btn btn-primary" href="https://wa.me/971545839411" target="_blank" rel="noreferrer" style={{flex: 1}}>
                WhatsApp
              </a>
              <a className="btn btn-ghost" href={s.directions} target="_blank" rel="noreferrer" style={{flex: 1}}>
                Directions
              </a>
            </div>
          </article>
        ))}
      </div>
    </div>
  </section>
);

// ===========================================================
// Instagram strip
// ===========================================================
const InstagramStrip = () => {
  const imgs = ['assets/banner-1.webp', 'assets/banner-2.webp', 'assets/banner-3.webp', 'assets/banner-4.webp', 'assets/lifestyle-1.webp', 'assets/lifestyle-2.webp'];
  return (
    <section className="shell section-pad" style={{paddingBottom: 0}}>
      <SectionHead
        eyebrow="@palacesjewellery"
        title={<>Drawn in the <em>moment.</em></>}
        sub="On Instagram — atelier shots, new pieces, and the occasional Souk-cat."
      />
      <div style={{display: 'grid', gridTemplateColumns: 'repeat(6, 1fr)', gap: 6}}>
        {imgs.map((src, i) => (
          <div key={i} style={{aspectRatio: '1/1', overflow: 'hidden', position: 'relative', cursor: 'pointer'}}>
            <img src={src} alt="" style={{width: '100%', height: '100%', objectFit: 'cover', transition: 'transform 0.7s'}}
                 onMouseEnter={(e) => e.currentTarget.style.transform = 'scale(1.06)'}
                 onMouseLeave={(e) => e.currentTarget.style.transform = 'scale(1)'} />
          </div>
        ))}
      </div>
    </section>
  );
};

Object.assign(window, { Home });