const { Button, Icon, StatBadge, Badge } = window.MyMailerDesignSystem_77208c || {};

function Hero() {
  return (
    <section style={{background:"var(--navy-900)",color:"var(--text-inverse)",padding:"96px 0 88px",position:"relative",overflow:"hidden"}}>
      <div style={{maxWidth:"var(--container-max)",margin:"0 auto",padding:"0 var(--gutter)",display:"grid",gridTemplateColumns:"1.15fr .85fr",gap:56,alignItems:"start"}}>
        <div style={{display:"grid",gap:26}}>
          <Badge tone="managed" variant="solid">캠페인 1회당 · 구독 아님</Badge>
          <h1 style={{font:"var(--type-hero)",letterSpacing:"var(--tracking-display)",color:"var(--text-inverse)"}}>
            전문적인 메일 발송,<br/>처음서비스에 맡기세요.
          </h1>
          <p style={{font:"var(--type-lead)",color:"var(--navy-200)",maxWidth:600}}>
            HTML 제작 → 주소록 정제 → 테스트 컨펌 → 예약 발송 → 결과 리포트.<br/>
            캠페인 한 건을 통째로 맡기세요.
          </p>
          <div style={{display:"flex",gap:12,flexWrap:"wrap"}}>
            <Button size="xl" href="https://cheom.zendesk.com/hc/ko/requests/new" iconRight={<Icon name="arrow-right" size={18}/>}>무료 견적 받기</Button>
            <Button size="xl" variant="ghost" href="#process" style={{color:"var(--navy-200)",border:"1px solid rgba(255,255,255,.2)"}}>진행 절차 보기</Button>
          </div>
          <div style={{display:"flex",gap:10,flexWrap:"wrap",marginTop:6}}>
            <StatBadge tone="inverse" icon="send" value="4,200건" label="누적 대행" />
            <StatBadge tone="inverse" icon="clock" value="2시간" label="평균 첫 응답" />
            <StatBadge tone="inverse" icon="repeat" value="78%" label="재구매율" />
          </div>
          <p style={{font:"var(--type-caption)",color:"var(--navy-300)"}}>
            ※ 수치는 예시입니다 — 공개 범위 확정 후 실제 값으로 교체해야 합니다.
          </p>
        </div>

        <aside style={{display:"grid",gap:16,marginTop:8}}>
          <div style={{padding:"22px 24px",borderRadius:"var(--radius-lg)",background:"rgba(16,163,170,.14)",border:"1px solid rgba(111,203,208,.34)"}}>
            <div style={{display:"flex",gap:10,alignItems:"flex-start"}}>
              <span style={{marginTop:2,color:"var(--signal-300)"}}><Icon name="info" size={18} strokeWidth={2}/></span>
              <div>
                <strong style={{font:"var(--weight-semibold) var(--text-md)/1.4 var(--font-sans)",color:"var(--text-inverse)"}}>캠페인 1회 단위로 신청합니다.</strong>
                <p style={{marginTop:6,font:"var(--type-body-sm)",color:"var(--navy-200)"}}>서버 계약이나 월 정액이 필요 없습니다.</p>
              </div>
            </div>
          </div>
          <a href="#compare" style={{display:"flex",alignItems:"center",justifyContent:"space-between",gap:12,padding:"20px 22px",borderRadius:"var(--radius-lg)",background:"rgba(255,255,255,.05)",border:"1px solid rgba(255,255,255,.14)",color:"var(--navy-200)"}}>
            <span style={{display:"grid",gap:4,flex:1,minWidth:0}}>
              <span style={{font:"var(--type-caption)",letterSpacing:"var(--tracking-normal)",color:"var(--navy-300)"}}>월 구독형을 찾으시나요?</span>
              <span style={{font:"var(--weight-semibold) var(--text-md)/1 var(--font-sans)",color:"var(--text-inverse)"}}>전용서버 요금제 보기</span>
            </span>
            <Icon name="arrow-up-right" size={18} color="var(--navy-200)" />
          </a>
        </aside>
      </div>
    </section>
  );
}
Object.assign(window, { Hero });