/* Variation C — "Pink immersive"
   Full-pink hero with two phones overlapping at slight angles.
   Value props on white as horizontal pill cards with big numerals.
   
   Changes:
   - Arabic-only (lang forced to 'ar')
   - Logo.svg as large transparent background watermark (replaces text wordmark)
   - Eyebrow pill removed
   - Arrow buttons on why-cards removed
   - Full-width pink hero (no white margins)
*/

function LandingImmersive({ role, lang, setRole, setLang }) {
  // Force Arabic only — EN removed per user request
  const effectiveLang = 'ar';
  const t = LANDING_COPY[effectiveLang];
  const hero = t.hero[role];
  const why = t.why[role];
  const dir = 'rtl';

  return (
    <div className={'landing dir-rtl'} dir="rtl" style={{ width: '100%', maxWidth: '100%' }}>
      {/* Hero — full pink, full width */}
      <section style={{
        position: 'relative',
        background: 'linear-gradient(180deg, #F3347F 0%, #EC2175 40%, #E84287 100%)',
        color: '#fff',
        paddingBottom: 0,
        overflow: 'visible',
        width: '100%',
      }}>
        <LandingNav role={role} lang={effectiveLang} setRole={setRole} setLang={setLang} t={t} variant="onPink" />

        {/* Logo watermark — centered behind content, large background element */}
        <img
          src="https://files.manuscdn.com/user_upload_by_module/session_file/115182585/KdhymMeGwHTUyZWN.svg"
          alt=""
          aria-hidden="true"
          className="hero-watermark"
          style={{
            position: 'absolute',
            top: '50%',
            right: '30%',
            transform: 'translateY(-50%)',
            width: 700,
            height: 700,
            opacity: 0.09,
            pointerEvents: 'none',
            zIndex: 1,
            filter: 'brightness(0) invert(1)',
          }}
        />

        <div className="hero-grid" style={{
          display: 'grid',
          gridTemplateColumns: '1.1fr 0.9fr',
          gap: 48,
          padding: '20px 56px 0',
          alignItems: 'start',
          minHeight: 700,
          position: 'relative',
          maxWidth: 1440,
          margin: '0 auto',
        }}>

          {/* Hero text block */}
          <div className="hero-text-block" style={{ position: 'relative', zIndex: 2, paddingBlock: '20px 80px' }}>
            <h1 className="hero-title" style={{
              font: '700 88px/1.25 "Expo Arabic"',
              color: '#fff',
              margin: 0, whiteSpace: 'pre-line',
              letterSpacing: 0,
            }}>{hero.title}</h1>
            <p className="hero-sub" style={{
              font: '400 22px/1.55 "Expo Arabic"',
              color: 'rgba(255,255,255,0.88)',
              maxWidth: 520, marginTop: 32, marginBottom: 44,
            }}>{hero.sub}</p>
            <div className="badge-row" style={{ display: 'flex', gap: 16, alignItems: 'center', flexWrap: 'wrap' }}>
              <StoreBadge kind="ios" lang={effectiveLang} light size={48} />
              <StoreBadge kind="android" lang={effectiveLang} light size={48} />
            </div>
            <div className="hero-meta" style={{ marginTop: 22, font: '500 14px/1 "Expo Arabic"', color: 'rgba(255,255,255,0.75)' }}>
              {hero.meta}
            </div>
          </div>

          {/* phone cluster — two phones layered, positioned higher */}
          <div className="hero-phones" style={{ position: 'relative', zIndex: 2, height: 760, display: 'flex', alignItems: 'flex-start', justifyContent: 'center', paddingTop: 20 }}>
            <div style={{
              position: 'absolute',
              transform: 'translateX(140px) translateY(60px) rotate(8deg)',
              opacity: 0.9, filter: 'blur(0.3px)',
              zIndex: 1,
            }}>
              {/* Back phone: second screenshot of same role (index 1) */}
              <PhoneMockup role={role === 'client' ? 'client' : 'artist'} lang={effectiveLang} screenshotIndex={1} />
            </div>
            <div style={{
              position: 'relative', zIndex: 2,
              transform: 'translateX(-60px) rotate(-4deg)',
            }}>
              {/* Front phone: first screenshot (index 0) */}
              <PhoneMockup role={role} lang={effectiveLang} screenshotIndex={0} />
            </div>
          </div>

          {/* Mobile-only badges (shown after phones on mobile, hidden on desktop) */}
          {/* Mobile: meta text centered below phones */}
          <div className="mobile-meta-text" style={{ display: 'none', order: 3, textAlign: 'center', font: '500 14px/1 "Expo Arabic"', color: 'rgba(255,255,255,0.75)', position: 'relative', zIndex: 2 }}>
            {hero.meta}
          </div>
          {/* Mobile: badges centered below meta */}
          <div className="mobile-badges" style={{ display: 'none', order: 4, flexDirection: 'row', gap: 12, alignItems: 'center', justifyContent: 'center', position: 'relative', zIndex: 2 }}>
            <StoreBadge kind="ios" lang={effectiveLang} light size={44} />
            <StoreBadge kind="android" lang={effectiveLang} light size={44} />
          </div>
        </div>

        {/* Extra pink space on mobile — added via CSS */}
        <div className="hero-pink-spacer" style={{ display: 'none' }} />

        {/* curve — bottom of pink section */}
        <svg viewBox="0 0 1440 80" preserveAspectRatio="none" style={{ display: 'block', width: '100%', height: 80 }}>
          <path d="M0,0 C480,80 960,80 1440,0 L1440,80 L0,80 Z" fill="#fff"/>
        </svg>
      </section>

      {/* Why Lamsa — horizontal pill cards, NO arrow buttons */}
      <section className="why-section" style={{ padding: '40px 56px 120px', background: '#fff' }}>
        <div style={{ textAlign: 'center', marginBottom: 64, maxWidth: 600, margin: '0 auto 64px' }}>
          <h2 className="why-section-title" style={{ font: '700 56px/1.05 "Expo Arabic"', color: 'var(--wine-900)', margin: 0 }}>
            {why.title}
          </h2>
          <p style={{ font: '400 20px/1.55 "Expo Arabic"', color: 'var(--wine-900)', opacity: 0.7, marginTop: 18, marginBottom: 0 }}>
            {why.sub}
          </p>
        </div>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 20, maxWidth: 1100, margin: '0 auto' }}>
          {why.items.map((item) => (
            <div key={item.kicker} className="why-card" style={{
              display: 'grid',
              gridTemplateColumns: '160px 1fr',  /* arrow column removed */
              gap: 40, alignItems: 'center',
              padding: '36px 44px',
              background: '#fff',
              borderRadius: 32,
              border: '1.5px solid rgba(232,66,135,0.18)',
              boxShadow: '0 0 30px 0 rgba(232,66,135,0.08)',
            }}>
              <div className="why-kicker" style={{
                font: '700 96px/1 "Expo Arabic"',
                background: 'linear-gradient(180deg, #F3347F 0%, #E84287 100%)',
                WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent',
                letterSpacing: -3,
              }}>{item.kicker}</div>
              <div>
                <h3 className="why-title" style={{ font: '700 30px/1.15 "Expo Arabic"', color: 'var(--wine-900)', margin: 0 }}>{item.title}</h3>
                <p className="why-body" style={{ font: '400 18px/1.55 "Expo Arabic"', color: 'var(--wine-900)', opacity: 0.72, margin: '12px 0 0', maxWidth: 620 }}>{item.body}</p>
              </div>
              {/* Arrow button REMOVED per user request */}
              {/* <div style={{ width: 56, height: 56, ... }}>...</div> */}
            </div>
          ))}
        </div>
      </section>

      <FaqSection role={role} />
      <DownloadBand lang={effectiveLang} t={t} dir={dir} variant="pink" />
      <LandingFooter t={t} lang={effectiveLang} />
    </div>
  );
}

window.LandingImmersive = LandingImmersive;