// Facette — Home page

const { SIGNATURES, REVIEWS, BRANCHES } = window.FacetteData;

function Home({ branch, setBranch, openBook, openQuiz, openLightbox, setPage, isMobile }) {
  const b = BRANCHES[branch];
  return (
    <React.Fragment>
      {/* HERO */}
      <section className="hero">
        <div className="hero-grid">
          <div className="hero-copy">
            <div className="hero-eyebrow eyebrow"><span className="dot"></span>Dubai’s first facial bar · est. 2019</div>
            <h1>
              Bespoke,<br/>
              high-tech<br/>
              facials —<br/>
              <em>book your glow.</em>
            </h1>
            <p className="hero-sub">
              Customisable, results-driven facials from AED 385 in Jumeirah and Business Bay.
              Layered modalities, premium-brand actives, named therapists.
            </p>
            <div className="hero-ctas">
              <button className="btn btn-primary" onClick={() => openBook()}>Book at {b.short}</button>
              <button className="btn btn-secondary" onClick={() => setPage('treatments')}>See Treatments</button>
            </div>
            <div className="hero-meta">
              <div className="chip"><span className="star">★</span> 4.9 on Fresha</div>
              <div className="chip">From <span style={{ fontFamily: 'var(--font-display)', fontSize: 14, marginLeft: 4 }}>AED 385</span></div>
              <div className="chip">Daily 10–20:00</div>
            </div>
          </div>
          <div>
            <div className="hero-art">
              <Img src="media/hero-facette-treatments.webp" alt="Facette treatment" />
              <div className="ha-tag">
                <div className="t-label">In the bar this week</div>
                <div className="t-name">The SuperNova · 75 min</div>
              </div>
            </div>
            {!isMobile && (
              <div className="hero-side-cards">
                <div className="hsc"><Img src="media/section-b-portrait.webp" alt="Glow" /></div>
                <div className="hsc"><Img src="media/section-c.webp" alt="Treatment" /></div>
              </div>
            )}
          </div>
        </div>
      </section>

      {/* TRUST STRIP */}
      <TrustStrip branch={branch} />

      {/* BRAND ROW */}
      <BrandRow />

      {/* SIGNATURES */}
      <section className="section">
        <div className="container">
          <SectionHead
            eyebrow="The signature menu"
            title="Four facials we built<br/>our reputation on."
            lede="Each protocol is a layered, named system — not a list of add-ons. Booked weekly by our regulars, monthly by everyone else."
          />
          <div className="sig-grid">
            <SigCard sig={SIGNATURES[0]} num="01" variant="tall" onClick={() => openBook(SIGNATURES[0])} />
            <SigCard sig={SIGNATURES[1]} num="02" variant="wide" onClick={() => openBook(SIGNATURES[1])} />
            <SigCard sig={SIGNATURES[2]} num="03" variant="half" onClick={() => openBook(SIGNATURES[2])} />
            <SigCard sig={SIGNATURES[3]} num="04" variant="tall" onClick={() => openBook(SIGNATURES[3])} />
            <FullMenuTeaser onClick={() => setPage('treatments')} />
          </div>
        </div>
      </section>

      {/* MEMBERSHIPS PREVIEW (dark band) */}
      <section className="memb-preview">
        <div className="container">
          <SectionHead
            eyebrow="Memberships"
            title="Cadence beats a one-off facial.<br/>Always."
            lede="Most of our regulars come in every 10 days to three weeks. Memberships make that affordable and routine — and unlock a 1-on-1 chat with your therapist."
            action={<button className="btn btn-secondary" style={{ borderColor: '#EFE4D6', color: '#EFE4D6' }} onClick={() => setPage('memberships')}>Compare tiers →</button>}
          />
          <div className="memb-grid">
            <MgCell name="VIP" cadence="Every 3 weeks" price="1,200" featured={false} />
            <MgCell name="Glow Factor" cadence="Every 2 weeks" price="1,920" featured={true} pre="Most popular" />
            <MgCell name="Face Yoga" cadence="Weekly" price="2,065" featured={false} />
            <MgCell name="Signature" cadence="Every 10 days" price="2,400" featured={false} pre="Brilliant / Absolute" />
          </div>
        </div>
      </section>

      {/* GALLERY STRIP */}
      <section className="section-tight" style={{ background: 'var(--bg)' }}>
        <div className="container">
          <SectionHead
            eyebrow="The glow"
            title="Real skin.<br/>Real Fridays."
            lede="Tagged from clients on Instagram — published with consent. Commission Jumeirah-specific shoots before launch."
            action={<button className="btn-ghost">View the gallery →</button>}
          />
          <div className="gallery-strip">
            {[
              'media/gallery-1a.webp', 'media/gallery-1b.webp', 'media/gallery-1c.webp',
              'media/gallery-1d.webp', 'media/gallery-10.webp', 'media/gallery-12.webp',
            ].map((src, i) => (
              <div className="gs-cell" key={i} onClick={() => openLightbox(src)}>
                <Img src={src} alt={`Glow ${i + 1}`} />
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* REVIEWS */}
      <section className="reviews-section section">
        <div className="container">
          <SectionHead
            eyebrow="The receipts"
            title="<em>4.9</em> on Fresha.<br/>794 reviews and counting."
            lede="Your strongest proof has been living off-site. We are bringing it home."
            action={<button className="btn btn-secondary">All reviews →</button>}
          />
          <div className="reviews-grid">
            {REVIEWS.map((r, i) => (
              <div className="review-card" key={i}>
                <div className="rc-stars">★ ★ ★ ★ ★</div>
                <div className="rc-quote">“{r.quote}”</div>
                <div className="rc-meta">
                  <div className="rc-name">{r.name} · {r.date}</div>
                  <div className="rc-source">{r.source}</div>
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>

      {/* QUIZ CTA */}
      <section className="quiz-cta">
        <div className="quiz-cta-inner">
          <div>
            <div className="eyebrow"><span className="dot"></span>Not sure where to start?</div>
            <h2 style={{
              fontFamily: 'var(--font-display)', fontWeight: 300,
              fontSize: 'clamp(40px, 4.4vw, 64px)', lineHeight: 1, letterSpacing: '-0.012em',
              margin: '20px 0 24px',
            }}>
              Take the 4-question<br/><em style={{ fontStyle: 'italic', color: 'var(--gold)' }}>skin quiz.</em>
            </h2>
            <p className="lede" style={{ marginBottom: 32 }}>
              Tell us what your skin is doing, how often you want to come in,
              and what fits your week. We will recommend a facial — and book it.
            </p>
            <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
              <button className="btn btn-primary" onClick={openQuiz}>Start the quiz</button>
              <button className="btn-ghost" style={{ alignSelf: 'center' }}>or, just talk to a therapist →</button>
            </div>
          </div>
          <div className="qc-art">
            <Img src="media/section-take-the-quiz.webp" alt="Skin quiz" />
          </div>
        </div>
      </section>

      {/* BRANCH PREVIEW */}
      <section className="section" style={{ background: 'var(--bg)' }}>
        <div className="container">
          <SectionHead
            eyebrow="Two branches"
            title="Pick yours —<br/>we will route the booking."
            action={<button className="btn btn-secondary" onClick={() => setPage('locations')}>See both →</button>}
          />
          <div style={{ display: 'grid', gridTemplateColumns: isMobile ? '1fr' : '1fr 1fr', gap: 24 }}>
            <BranchPreviewCard b={BRANCHES.jumeirah} active={branch === 'jumeirah'} onPick={() => setBranch('jumeirah')} />
            <BranchPreviewCard b={BRANCHES.business_bay} active={branch === 'business_bay'} onPick={() => setBranch('business_bay')} />
          </div>
        </div>
      </section>
    </React.Fragment>
  );
}

function SigCard({ sig, num, variant, onClick }) {
  const cls = variant === 'tall' ? 's-tall' : variant === 'wide' ? 's-wide' : 's-half';
  const priceLabel = sig.priceFrom ? `From ${sig.priceFrom} AED` : `${sig.price.toLocaleString()} AED`;
  return (
    <button className={`sig-card ${cls}`} onClick={onClick}>
      <div className="sc-img"><Img src={sig.img} alt={sig.name} /></div>
      <div className="sc-overlay"></div>
      <div className="sc-body">
        <div className="sc-num">{num} / {SIGNATURES.length.toString().padStart(2, '0')}</div>
        <div className="sc-name">{sig.name}</div>
        <div className="sc-meta">
          <span>{sig.duration}</span>
          <span className="sc-dot"></span>
          <span className="sc-price">{priceLabel}</span>
        </div>
      </div>
    </button>
  );
}

function FullMenuTeaser({ onClick }) {
  return (
    <button className="sig-card s-half" onClick={onClick} style={{
      background: 'var(--bg-warm)', aspectRatio: '3 / 4',
      display: 'flex', alignItems: 'center', justifyContent: 'center',
      flexDirection: 'column', gap: 14,
      gridColumn: 'span 3',
    }}>
      <div style={{ fontFamily: 'var(--font-display)', fontSize: 64, fontWeight: 300, color: 'var(--ink)', lineHeight: 0.9 }}>
        + 18
      </div>
      <div style={{
        fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase',
        color: 'var(--ink-2)', maxWidth: '18ch', textAlign: 'center', lineHeight: 1.6,
      }}>
        More facials, body protocols & wellness rituals
      </div>
      <div style={{
        marginTop: 8,
        fontSize: 12, letterSpacing: '0.2em', textTransform: 'uppercase',
        fontWeight: 600, color: 'var(--ink)',
        borderBottom: '1px solid var(--ink)', paddingBottom: 2,
      }}>
        See full menu →
      </div>
    </button>
  );
}

function MgCell({ name, cadence, price, featured, pre }) {
  return (
    <div className={`mg-cell ${featured ? 'feature' : ''}`}>
      <div className="mg-name">{name}</div>
      <div className="mg-cad">{cadence}</div>
      <div className="mg-price">
        {pre && <span className="pre">{pre}</span>}
        {price}<span className="aed">AED / mo</span>
      </div>
    </div>
  );
}

function BranchPreviewCard({ b, active, onPick }) {
  return (
    <div className={`loc-card ${b.flagship ? 'flagship' : ''}`} style={{
      cursor: 'pointer',
      borderColor: active ? 'var(--ink)' : 'var(--rule)',
      borderWidth: active ? 2 : 1,
    }} onClick={onPick}>
      <div className="lc-img">
        {b.id === 'jumeirah'
          ? <Img src="media/interior-facette-10.webp" alt={b.name} />
          : <Img label={`Business Bay\ninterior shot · TBC`} />}
      </div>
      <div className="lc-body">
        <h3>{b.name}</h3>
        <div className="lc-row">
          <div className="lc-lab">Address</div>
          <div className="lc-val">{b.address}<br/>{b.addressLine2}<br/>{b.addressLine3}</div>
        </div>
        <div className="lc-row">
          <div className="lc-lab">Phone</div>
          <div className="lc-val"><a href={b.phoneHref}>{b.phone}</a></div>
        </div>
        <div className="lc-row">
          <div className="lc-lab">Hours</div>
          <div className="lc-val">{b.hours}</div>
        </div>
        <div className="lc-ctas">
          <button className="btn btn-primary btn-sm" onClick={(e) => { e.stopPropagation(); onPick(); }}>
            {active ? '✓ Active branch' : 'Use this branch'}
          </button>
          <a href={b.fresha} className="btn btn-secondary btn-sm" target="_blank" rel="noopener" onClick={(e) => e.stopPropagation()}>Fresha →</a>
        </div>
      </div>
    </div>
  );
}

window.Home = Home;