// VISANA — Visa Hàn Quốc V2 · single-column hero adapted from canvas option 14
// Reuses global Icon, Button, KoreaFlag (from visahanquoc/chrome.jsx).

// ---- Brand "V" mark with a swappable TOP motif (chevron for option 14) ----
function VFancyV2({ top = 'chevron', style, className }) {
  const gid = React.useMemo(() => 'vfv2' + Math.random().toString(36).slice(2), []);
  const aqua = '#00C99A';
  const tops = {
    dot: <circle cx="258" cy="150" r="57" fill={aqua} />,
    chevron: <polyline points="234,114 292,151 234,188" fill="none" stroke={aqua} strokeWidth="38" strokeLinecap="round" strokeLinejoin="round" />,
  };
  return (
    <svg viewBox="178 72 410 414" className={className} style={style} aria-hidden="true">
      <defs>
        <linearGradient id={gid} gradientUnits="userSpaceOnUse" x1="235" y1="200" x2="500" y2="470">
          <stop offset="0" stopColor="#09DFAB" />
          <stop offset="0.34" stopColor="#0EB2AC" />
          <stop offset="1" stopColor="#1A43AD" />
        </linearGradient>
      </defs>
      <path fill={`url(#${gid})`} d="M396.12,400.17l-42.75-100.98c-13.34-31.51-44.24-51.98-78.45-51.98h-36.73l90.43,215.31c5.43,15.74,17.73,27.68,32.86,32.98c5.76,2.05,11.94,3.1,18.31,3.03h32.64c8.04,0.09,15.78-1.63,22.77-4.84c13.02-5.93,23.47-17.02,28.39-31.17l120.98-344.98h-87.67L396.12,400.17z" />
      {tops[top] || tops.chevron}
    </svg>
  );
}

// ---- Wordmark lockup: fancy "V" symbol + VISANA ----
function WordmarkV2({ top = 'chevron', tag }) {
  return (
    <div className="wmk2">
      <VFancyV2 top={top} className="wmk2-v" />
      <div className="wmk2-words">
        <span className="wmk2-txt">VISANA</span>
        {tag && <span className="wmk2-tag">{tag}</span>}
      </div>
    </div>
  );
}

// ---- Single-column hero (option 14: wordmark + mint stat band) ----
function HeroV2({ onConsult }) {
  const goOffers = () => {
    const el = document.getElementById('uu-dai');
    if (el) { const y = el.getBoundingClientRect().top + window.scrollY - 80; window.scrollTo({ top: y, behavior: 'smooth' }); }
  };
  const stats = [['98,6%', 'Tỷ lệ đậu'], ['1.000.000+', 'Khách hàng'], ['17+', 'Năm kinh nghiệm'], ['4.9/5', '12K+ đánh giá']];
  return (
    <section className="hero-v2" data-screen-label="Hero">
      <div className="hv2-glow" />
      <div className="hv2-wrap">
        <span className="hv2-flag"><KoreaFlag /> Visa Hàn Quốc · Du lịch · Công tác · Thăm thân</span>
        <WordmarkV2 top="chevron" tag="Giải pháp visa an toàn · minh bạch · tận tâm" />
        <h1 className="hv2-h1">Dịch vụ tư vấn <span className="em">Visa Hàn Quốc</span></h1>
        <p className="hv2-sub">Tư vấn 1-1 cùng chuyên gia 17+ năm — VISANA lo trọn hồ sơ, đúng quy định ĐSQ, để tấm visa Hàn Quốc nằm gọn trong tầm tay bạn.</p>
        <div className="hv2-band">
          {stats.map(([n, l], i) => (
            <React.Fragment key={n}>
              {i > 0 && <i className="div" />}
              <div className="st"><b>{n}</b><span>{l}</span></div>
            </React.Fragment>
          ))}
        </div>
        <div className="hv2-cta">
          <Button variant="accent" size="lg" icon="arrow-right" onClick={onConsult}>Đăng ký tư vấn miễn phí</Button>
          <Button variant="secondary" size="lg" iconLeft="gift" onClick={goOffers}>Xem ưu đãi & bảng giá</Button>
        </div>
      </div>
    </section>
  );
}