/* ============================================================
   WorkStay — Hero (3 layout variants via `variant` prop)
   exports: Hero, FloatSearch
   ============================================================ */
const { useState: useStateH } = React;

/* floating search bar — shared by hero variants */
function FloatSearch({ go, compact = false }) {
  const fields = [
    { label: 'Where', value: 'Manali, Himachal Pradesh', icon: 'pin' },
    { label: 'Duration', value: '3 months', icon: 'long' },
    { label: 'Work needs', value: 'Fiber · Quiet · Desk', icon: 'desk' },
    { label: 'Move in', value: 'Apr 12', icon: 'cal' },
  ];
  return (
    <div className="glass ws-floatsearch" style={{ display: 'flex', alignItems: 'stretch', gap: 0, padding: 7,
      borderRadius: 999, boxShadow: 'var(--shadow-soft), 0 0 50px -16px var(--violet-glow)',
      maxWidth: compact ? 720 : 860, width: '100%' }}>
      {fields.map((f, i) => (
        <React.Fragment key={f.label}>
          <button onClick={() => go('explore')} style={{ flex: i === 2 ? 1.3 : 1, textAlign: 'left',
            background: 'none', border: 'none', padding: '12px 20px', borderRadius: 999,
            display: 'flex', alignItems: 'center', gap: 12, transition: 'background .25s' }}
            onMouseEnter={e => e.currentTarget.style.background = 'rgba(255,255,255,0.06)'}
            onMouseLeave={e => e.currentTarget.style.background = 'none'}>
            <Icon name={f.icon} size={17} style={{ color: 'var(--violet-soft)' }} />
            <span style={{ display: 'flex', flexDirection: 'column', gap: 2, minWidth: 0 }}>
              <span style={{ fontSize: 10.5, letterSpacing: '0.14em', textTransform: 'uppercase', color: 'var(--text-faint)' }}>{f.label}</span>
              <span style={{ fontSize: 14, color: 'var(--text)', whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>{f.value}</span>
            </span>
          </button>
          {i < fields.length - 1 && <span className="ws-fs-sep" style={{ width: 1, background: 'var(--line)', margin: '10px 0' }} />}
        </React.Fragment>
      ))}
      <button onClick={() => go('explore')} aria-label="Search" className="ws-fs-go" style={{ flexShrink: 0, width: 54, height: 54, borderRadius: 999,
        background: 'var(--violet)', border: 'none', color: '#fff', display: 'flex', alignItems: 'center',
        justifyContent: 'center', boxShadow: '0 8px 24px -8px var(--violet-glow)', transition: 'all .3s' }}
        onMouseEnter={e => { e.currentTarget.style.background = 'var(--violet-soft)'; e.currentTarget.style.transform = 'scale(1.06)'; }}
        onMouseLeave={e => { e.currentTarget.style.background = 'var(--violet)'; e.currentTarget.style.transform = 'none'; }}>
        <Icon name="search" size={20} />
      </button>
    </div>
  );
}

const HERO_BADGES = [
  { icon: 'wifi', label: 'Verified Wi-Fi' },
  { icon: 'quiet', label: 'Quiet Spaces' },
  { icon: 'power', label: 'Power Backup' },
  { icon: 'desk', label: 'Dedicated Workspace' },
  { icon: 'long', label: 'Long Stay Ready' },
];

function HeroHeadline({ serif = true, size = 'd1' }) {
  return (
    <h1 className={size} style={{ margin: 0 }}>
      Live where<br />you <span className="italic" style={{ color: 'var(--beige)' }}>work</span> best.
    </h1>
  );
}

function Hero({ variant = 'centered', go, accent }) {
  const sub = 'Verified work-ready stays with fast Wi-Fi, quiet environments, and long-stay comfort — curated for people who build things.';

  /* ---------- VARIANT: split panel ---------- */
  if (variant === 'split') {
    return (
      <section className="ws-hero ws-hero-split" style={{ minHeight: '100vh', display: 'grid', gridTemplateColumns: '1.05fr 1fr', alignItems: 'stretch' }}>
        <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', padding: 'var(--gutter)', paddingTop: 140 }}>
          <div className="rise" style={{ animationDelay: '.05s' }}><Badge icon="bolt" glow>Deep Work Certified stays</Badge></div>
          <div className="rise" style={{ animationDelay: '.15s', marginTop: 26 }}><HeroHeadline /></div>
          <p className="rise" style={{ animationDelay: '.28s', marginTop: 26, fontSize: 18.5, lineHeight: 1.6, color: 'var(--text-dim)', maxWidth: 480 }}>{sub}</p>
          <div className="rise" style={{ animationDelay: '.4s', marginTop: 40, display: 'flex', gap: 12, flexWrap: 'wrap' }}>
            <Btn size="lg" onClick={() => go('explore')} icon="arrow">Find your stay</Btn>
            <Btn size="lg" variant="line" onClick={() => go('explore')}>How it works</Btn>
          </div>
          <div className="rise" style={{ animationDelay: '.52s', marginTop: 48, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {HERO_BADGES.map(b => <Badge key={b.label} icon={b.icon}>{b.label}</Badge>)}
          </div>
        </div>
        <div style={{ position: 'relative' }}>
          <Scene variant="ocean" style={{ position: 'absolute', inset: 0 }} />
          <div style={{ position: 'absolute', left: 0, top: 0, bottom: 0, width: 160, background: 'linear-gradient(90deg, var(--bg), transparent)' }} />
          <FloatingStatCard />
        </div>
      </section>
    );
  }

  /* ---------- VARIANT: left editorial ---------- */
  if (variant === 'editorial') {
    return (
      <section className="ws-hero" style={{ position: 'relative', minHeight: '100vh', display: 'flex', alignItems: 'flex-end', overflow: 'hidden' }}>
        <Scene variant="warm" style={{ position: 'absolute', inset: 0 }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(90deg, rgba(10,10,12,0.92) 0%, rgba(10,10,12,0.5) 45%, transparent 75%)' }} />
        <div style={{ position: 'absolute', inset: 0, background: 'linear-gradient(0deg, var(--bg) 2%, transparent 40%)' }} />
        <div className="wrap" style={{ position: 'relative', paddingBottom: 64 }}>
          <div className="rise" style={{ animationDelay: '.05s' }}><Badge icon="bolt" glow>A premium OS for remote living</Badge></div>
          <div className="rise" style={{ animationDelay: '.15s', marginTop: 26 }}>
            <h1 className="d1" style={{ margin: 0, maxWidth: 900 }}>Live where<br />you <span className="italic" style={{ color: 'var(--beige)' }}>work</span> best.</h1>
          </div>
          <p className="rise" style={{ animationDelay: '.3s', marginTop: 26, fontSize: 19, lineHeight: 1.6, color: 'var(--text-dim)', maxWidth: 560 }}>{sub}</p>
          <div className="rise" style={{ animationDelay: '.42s', marginTop: 40, maxWidth: 880 }}><FloatSearch go={go} /></div>
          <div className="rise" style={{ animationDelay: '.55s', marginTop: 28, display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            {HERO_BADGES.map(b => <Badge key={b.label} icon={b.icon}>{b.label}</Badge>)}
          </div>
        </div>
      </section>
    );
  }

  /* ---------- VARIANT: centered cinematic (default) ---------- */
  return (
    <section className="ws-hero" style={{ position: 'relative', minHeight: '100vh', display: 'flex', flexDirection: 'column',
      alignItems: 'center', justifyContent: 'center', textAlign: 'center', overflow: 'hidden', paddingTop: 90 }}>
      <Scene variant="warm" style={{ position: 'absolute', inset: 0 }} plants={true} />
      <div style={{ position: 'absolute', inset: 0, background: 'radial-gradient(80% 60% at 50% 30%, transparent, rgba(10,10,12,0.55) 80%), linear-gradient(0deg, var(--bg) 1%, transparent 38%)' }} />
      {/* floating ambient orbs */}
      <div style={{ position: 'absolute', left: '12%', top: '24%', width: 240, height: 240, borderRadius: '50%',
        background: 'radial-gradient(circle, var(--violet-glow), transparent 70%)', filter: 'blur(30px)', animation: 'floaty 9s ease-in-out infinite' }} />
      <div style={{ position: 'absolute', right: '10%', bottom: '26%', width: 200, height: 200, borderRadius: '50%',
        background: 'radial-gradient(circle, var(--amber-glow), transparent 70%)', filter: 'blur(30px)', animation: 'floaty 11s ease-in-out infinite reverse' }} />

      <div className="wrap" style={{ position: 'relative', display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
        <div className="rise" style={{ animationDelay: '.05s' }}><Badge icon="bolt" glow>Deep Work Certified · 230+ verified stays</Badge></div>
        <div className="rise" style={{ animationDelay: '.16s', marginTop: 30 }}>
          <h1 className="d1" style={{ margin: 0 }}>Live where you<br /><span className="italic" style={{ color: 'var(--beige)' }}>work</span> best.</h1>
        </div>
        <p className="rise" style={{ animationDelay: '.3s', marginTop: 28, fontSize: 19, lineHeight: 1.6, color: 'var(--text-dim)', maxWidth: 580 }}>{sub}</p>
        <div className="rise" style={{ animationDelay: '.44s', marginTop: 44, width: '100%', display: 'flex', justifyContent: 'center' }}><FloatSearch go={go} /></div>
        <div className="rise" style={{ animationDelay: '.58s', marginTop: 30, display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'center' }}>
          {HERO_BADGES.map(b => <Badge key={b.label} icon={b.icon}>{b.label}</Badge>)}
        </div>
      </div>
      <div className="ws-scrollcue" style={{ position: 'absolute', bottom: 30, left: '50%', transform: 'translateX(-50%)', display: 'flex',
        flexDirection: 'column', alignItems: 'center', gap: 8, color: 'var(--text-faint)' }}>
        <span style={{ fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase' }}>Scroll</span>
        <span style={{ width: 1, height: 38, background: 'linear-gradient(var(--text-faint), transparent)' }} />
      </div>
    </section>
  );
}

function FloatingStatCard() {
  return (
    <div className="glass" style={{ position: 'absolute', left: -40, bottom: 80, padding: 22, borderRadius: 'var(--r-md)',
      width: 260, boxShadow: 'var(--shadow-soft)', animation: 'floaty 8s ease-in-out infinite' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <WorkScore value={94} size={76} stroke={6} label="Work" />
        <div>
          <div style={{ fontSize: 12.5, color: 'var(--text-faint)' }}>Beas River Loft</div>
          <div style={{ fontFamily: 'var(--serif)', fontSize: 20, marginTop: 2 }}>Manali</div>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginTop: 8, fontSize: 12.5, color: 'var(--good)' }}>
            <Icon name="wifi" size={13} /> 940 Mbps verified
          </div>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { Hero, FloatSearch });