/* 히어로 섹션 — Variant A (centered) / Variant B (split) */

const HeroBadges = () => (
  <div style={{display: 'flex', gap: 8, flexWrap: 'wrap', justifyContent: 'inherit'}}>
    <span className="chip">업계 유일 AI 얼굴인식</span>
    <span className="chip chip--gray">별도 단말기 불필요</span>
    <span className="chip chip--yellow">1계정 200명 영구 무료</span>
  </div>
);

const HeroPrimaryButtons = ({onContactClick}) => (
  <div className="row" style={{gap: 10}}>
    <button type="button" className="btn btn-lg btn-primary" onClick={onContactClick}>
      무료 도입 상담 →
    </button>
    <a className="btn btn-lg btn-outline" href="https://docs.shuttle.id" target="_blank" rel="noreferrer">
      이용 가이드 보기
    </a>
  </div>
);

const HeroStoreButtons = () => (
  <div className="row" style={{gap: 6, marginTop: 8}}>
    <a href="https://play.google.com/store/apps/details?id=com.schoolbus.shuttle.id" target="_blank" rel="noreferrer"
       style={{display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--sid-fg-mid)', fontWeight: 600}}>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M3 20.5V3.5c0-.6.3-1 .7-1.3l10.4 9.8L3.7 21.8c-.4-.3-.7-.7-.7-1.3zm12.4-7.6l2.6 2.4-3.3 1.9-1.9-1.8 2.6-2.5zm-1.4-1.4L4.4 2.2c.4 0 .8.1 1 .3l11.7 6.6-3.1 3zm0 2.8l3.1 3-11.7 6.6c-.2.2-.6.3-1 .3l9.6-9.9zm6.6-2.6c.6.4 1 1.1 1 1.8s-.4 1.5-1 1.8l-3 1.8-3-2.8 3-2.8 3 2.2z"/></svg>
      Google Play
    </a>
    <span style={{color: 'var(--sid-fg-light)'}}>·</span>
    <a href="https://apps.apple.com/kr/app/id6758934194" target="_blank" rel="noreferrer"
       style={{display: 'inline-flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--sid-fg-mid)', fontWeight: 600}}>
      <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M17.7 12.2c0-2.6 2.1-3.8 2.2-3.9-1.2-1.7-3-2-3.7-2-1.6-.2-3 .9-3.8.9-.8 0-2-.9-3.3-.9-1.7 0-3.3 1-4.2 2.5-1.8 3.1-.5 7.7 1.3 10.3.9 1.2 1.9 2.6 3.3 2.6 1.3-.1 1.8-.9 3.4-.9s2 .9 3.3.8c1.4 0 2.3-1.3 3.2-2.5 1-1.4 1.4-2.8 1.4-2.8-.1 0-2.7-1-2.7-3.6zm-2.6-6.5C15.9 5 16.4 4 16.3 3c-1 0-2.1.6-2.8 1.4-.6.7-1.2 1.8-1 2.8 1.1.1 2.2-.5 2.6-1.5z"/></svg>
      App Store
    </a>
  </div>
);

/* small floating proof badges that float around the phone */
const FloatTag = ({top, left, right, bottom, children, color = 'blue', delay = 0}) => {
  const colors = {
    blue: {bg: '#fff', text: 'var(--sid-blue-link)', border: 'var(--sid-blue-soft)', dot: 'var(--sid-blue)'},
    green: {bg: '#fff', text: '#0E7A3D', border: '#BCEBCC', dot: 'var(--sid-success)'},
    yellow: {bg: '#fff', text: '#7A5800', border: '#FFE99A', dot: 'var(--sid-yellow)'},
  };
  const c = colors[color];
  return (
    <div className="hero-float-tag" style={{
      position: 'absolute', top, left, right, bottom,
      background: c.bg, border: `1px solid ${c.border}`,
      borderRadius: 999, padding: '10px 16px',
      display: 'inline-flex', alignItems: 'center', gap: 8,
      fontSize: 13, fontWeight: 700, color: c.text,
      boxShadow: 'var(--site-shadow-card)',
      animation: `floatY 5s ease-in-out ${delay}s infinite`,
      whiteSpace: 'nowrap',
    }}>
      <span style={{width: 8, height: 8, borderRadius: 4, background: c.dot}} />
      {children}
    </div>
  );
};

/* ---- Variant A: centered, editorial ---- */
const HeroVariantA = ({onContactClick}) => (
  <section id="top" style={{
    paddingTop: 80, paddingBottom: 64, position: 'relative', overflow: 'hidden',
  }}>
    {/* soft blue glow background */}
    <div aria-hidden style={{
      position: 'absolute', top: -200, left: '50%', transform: 'translateX(-50%)',
      width: 1200, height: 800, pointerEvents: 'none',
      background: 'radial-gradient(50% 50% at 50% 50%, rgba(69,132,255,0.13), transparent 70%)',
    }} />
    <div className="shell" style={{textAlign: 'center', position: 'relative'}}>
      <div className="eyebrow" style={{justifyContent: 'center', marginBottom: 20}}>
        <span className="dot" />업계 유일 AI 얼굴인식 · 별도 단말기 불필요
      </div>
      <h1 style={{
        fontSize: 'clamp(40px, 6vw, 76px)',
        fontWeight: 800,
        lineHeight: 1.05,
        letterSpacing: '-0.04em',
        color: 'var(--sid-ink)',
        margin: '0 auto 24px',
        maxWidth: 980,
        textWrap: 'balance',
      }}>
        임직원 통근버스 탑승 관리,<br/>
        <span style={{color: 'var(--sid-blue)'}}>AI 얼굴인식</span>으로 완결합니다.
      </h1>
      <p style={{
        fontSize: 18, color: 'var(--sid-fg-mid)', lineHeight: 1.6,
        margin: '0 auto 28px', maxWidth: 680, textWrap: 'pretty',
      }}>
        사원증·QR·AI 얼굴인식 멀티 인증으로 탑승을 자동 기록하고,
        운행일지·노선·근태 연동까지 1개 앱으로 통합 관리합니다.
      </p>
      <div style={{display: 'flex', justifyContent: 'center', marginBottom: 20}}>
        <HeroPrimaryButtons onContactClick={onContactClick} />
      </div>
      <div style={{display: 'flex', justifyContent: 'center', marginBottom: 56}}>
        <HeroStoreButtons />
      </div>

      {/* phone with floating proof tags */}
      <div style={{position: 'relative', display: 'inline-block', maxWidth: '100%'}}>
        <div style={{transform: 'scale(0.78)', transformOrigin: 'top center'}}>
          <Phone>
            <HomeScreen />
          </Phone>
        </div>
        <FloatTag top={60} left={-140} color="blue">사원증 매칭 완료</FloatTag>
        <FloatTag top={200} right={-160} color="green" delay={0.8}>실시간 GPS 관제</FloatTag>
        <FloatTag bottom={120} left={-160} color="yellow" delay={1.6}>운행일지 자동화</FloatTag>
        <FloatTag bottom={260} right={-140} color="blue" delay={2.4}>0.9초 인식</FloatTag>
      </div>
    </div>

    {/* KPI strip below phone */}
    <div className="shell" style={{marginTop: 80}}>
      <KpiStrip />
    </div>
  </section>
);

/* ---- Variant B: split, product-forward ---- */
const HeroVariantB = ({onContactClick}) => (
  <section id="top" style={{
    paddingTop: 72, paddingBottom: 72, position: 'relative', overflow: 'hidden',
    background: 'linear-gradient(180deg, var(--sid-blue-tint) 0%, #fff 80%)',
  }}>
    <div className="shell" style={{
      display: 'grid', gridTemplateColumns: '1.05fr 1fr', gap: 60, alignItems: 'center', position: 'relative',
    }} >
      <div>
        <div className="eyebrow" style={{marginBottom: 20}}>
          <span className="dot" />FOR B2B COMMUTER
        </div>
        <h1 style={{
          fontSize: 'clamp(36px, 5vw, 64px)',
          fontWeight: 800, lineHeight: 1.05, letterSpacing: '-0.04em',
          color: 'var(--sid-ink)', margin: '0 0 20px', textWrap: 'balance',
        }}>
          임직원 통근버스,<br/>
          스마트폰 1대로<br/>
          <span style={{
            background: 'linear-gradient(120deg, var(--sid-yellow) 0%, var(--sid-yellow) 60%, transparent 60%)',
            backgroundSize: '100% 38%',
            backgroundRepeat: 'no-repeat',
            backgroundPosition: '0 88%',
            padding: '0 4px',
          }}>통합 관리합니다.</span>
        </h1>
        <p style={{
          fontSize: 17, color: 'var(--sid-fg-mid)', lineHeight: 1.65,
          margin: '0 0 28px', maxWidth: 480,
        }}>
          QR 리더기·NFC 단말기·전용 카드 시스템 없이.
          사원증·QR·AI 얼굴인식 3가지 인증을 1개 앱이 처리합니다.
        </p>
        <div style={{marginBottom: 14}}>
          <HeroPrimaryButtons onContactClick={onContactClick} />
        </div>
        <HeroStoreButtons />

        {/* mini KPIs inline */}
        <div style={{
          display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 24,
          marginTop: 40, paddingTop: 32, borderTop: '1px solid var(--sid-line)',
        }}>
          <MiniKpi big="200" unit="명" label="1계정 무료" />
          <MiniKpi big="0" unit="원" label="HW 도입·유지비" />
          <MiniKpi big="30" unit="분" label="당일 운영 개시" />
        </div>
      </div>

      <div style={{position: 'relative', justifySelf: 'center'}}>
        <div style={{transform: 'scale(0.82)', transformOrigin: 'center'}}>
          <Phone>
            <HomeScreen />
          </Phone>
        </div>
        <FloatTag top={80} left={-100} color="blue">사원증 매칭</FloatTag>
        <FloatTag top={260} right={-120} color="green" delay={0.8}>3명 동시 인식</FloatTag>
        <FloatTag bottom={150} left={-130} color="yellow" delay={1.6}>운행일지 자동화</FloatTag>
      </div>
    </div>

    <style>{`
      @media (max-width: 920px) {
        #top .shell { grid-template-columns: 1fr !important; }
      }
    `}</style>
  </section>
);

const MiniKpi = ({big, unit, label}) => (
  <div>
    <div style={{display: 'flex', alignItems: 'baseline', gap: 4}}>
      <span style={{
        fontFamily: 'var(--font-numeric)', fontSize: 40, fontWeight: 800,
        letterSpacing: '-0.04em', color: 'var(--sid-ink)', lineHeight: 1,
      }}>{big}</span>
      <span style={{fontSize: 18, fontWeight: 700, color: 'var(--sid-ink)'}}>{unit}</span>
    </div>
    <div style={{fontSize: 13, color: 'var(--sid-fg-mid)', marginTop: 6, fontWeight: 500}}>{label}</div>
  </div>
);

const KpiStrip = () => {
  const items = [
    {big: '200', unit: '명', label: '1계정 무료', sub: '영구 무료, PoC도 부담 없이'},
    {big: '3', unit: '가지', label: '멀티 인증', sub: '사원증 · QR · 얼굴인식'},
    {big: '0', unit: '원', label: 'HW 도입·유지비', sub: '스마트폰 1대로 즉시 운영'},
    {big: '30', unit: '분', label: '당일 운영 개시', sub: '설치공사·교육 불필요'},
  ];
  return (
    <div style={{
      display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
      background: '#fff', border: '1px solid var(--sid-line)', borderRadius: 20,
      boxShadow: 'var(--site-shadow-card)', overflow: 'hidden',
    }} className="kpi-strip">
      {items.map((it, i) => (
        <div key={it.label} style={{
          padding: '28px 24px', borderLeft: i > 0 ? '1px solid var(--sid-line-soft)' : 'none',
          display: 'flex', flexDirection: 'column', gap: 4,
        }}>
          <div style={{display: 'flex', alignItems: 'baseline', gap: 4}}>
            <span style={{fontFamily: 'var(--font-numeric)', fontSize: 44, fontWeight: 800, letterSpacing: '-0.04em', color: 'var(--sid-blue)', lineHeight: 1}}>{it.big}</span>
            <span style={{fontSize: 18, fontWeight: 700, color: 'var(--sid-ink)'}}>{it.unit}</span>
          </div>
          <div style={{fontSize: 14, fontWeight: 700, color: 'var(--sid-ink)', marginTop: 6}}>{it.label}</div>
          <div style={{fontSize: 12, color: 'var(--sid-fg-mid)'}}>{it.sub}</div>
        </div>
      ))}
      <style>{`
        @media (max-width: 720px) {
          .kpi-strip { grid-template-columns: repeat(2, 1fr) !important; }
          .kpi-strip > div { border-left: none !important; border-top: 1px solid var(--sid-line-soft); }
          .kpi-strip > div:nth-child(1), .kpi-strip > div:nth-child(2) { border-top: none; }
          .kpi-strip > div:nth-child(odd) { border-left: none !important; }
          .kpi-strip > div:nth-child(even) { border-left: 1px solid var(--sid-line-soft) !important; }
        }
      `}</style>
    </div>
  );
};

const Hero = ({variant, onContactClick}) => (
  variant === 'B' ? <HeroVariantB onContactClick={onContactClick} /> : <HeroVariantA onContactClick={onContactClick} />
);

Object.assign(window, {Hero, HeroVariantA, HeroVariantB, FloatTag, KpiStrip, MiniKpi});