/* global React */
const { useState, useEffect, useRef } = React;

/* ===== Inline icons ===== */
const Icon = {
  search: (p) => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>),
  phone: (p) => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>),
  check: (p) => (<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="20 6 9 17 4 12"/></svg>),
  checkSm: (p) => (<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="20 6 9 17 4 12"/></svg>),
  chev: (p) => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="6 9 12 15 18 9"/></svg>),
  chevRight: (p) => (<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="9 18 15 12 9 6"/></svg>),
  arrLeft: (p) => (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="15 18 9 12 15 6"/></svg>),
  arrRight: (p) => (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><polyline points="9 18 15 12 9 6"/></svg>),
  bolt: (p) => (<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>),
  shield: (p) => (<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>),
  wallet: (p) => (<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M20 12V8H6a2 2 0 0 1-2-2c0-1.1.9-2 2-2h12v4"/><path d="M4 6v12c0 1.1.9 2 2 2h14v-4"/><path d="M18 12a2 2 0 0 0 0 4h4v-4z"/></svg>),
  gift: (p) => (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg>),
  star: (p) => (<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" {...p}><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>),
  award: (p) => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="8" r="6"/><path d="M15.477 12.89 17 22l-5-3-5 3 1.523-9.11"/></svg>),
  lock: (p) => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>),
  cert: (p) => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M20 6 9 17l-5-5"/></svg>),
  support: (p) => (<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>),
  close: (p) => (<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>),
  clock: (p) => (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>),
  doc: (p) => (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/></svg>),
  key: (p) => (<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" {...p}><circle cx="7.5" cy="15.5" r="5.5"/><path d="m21 2-9.6 9.6M15.5 7.5l3 3L22 7l-3-3"/></svg>),
};

/* ===== Logo ===== */
function Logo({ sub = "LONG-TERM LEASE" }) {
  return (
    <a className="logo" href="#">
      <span className="logo__mark">D</span>
      <span>드리브렌트</span>
      <span className="logo__sub">{sub}</span>
    </a>
  );
}

/* ===== Nav ===== */
function Nav({ onOpenMenu }) {
  const menu = ["메인", "빠른 견적", "무심사", "이벤트 특가", "계약 후기", "Q&A"];
  return (
    <header className="nav">
      <div className="wrap nav__inner">
        <Logo />
        <nav className="nav__menu">
          {menu.map((m, i) => (
            <a key={m} href="#" className={i === 0 ? "is-active" : ""}>{m}</a>
          ))}
        </nav>
        <div className="nav__right">
          <label className="nav__search">
            <Icon.search />
            <input placeholder="찾고 있는 차량이 있나요?" />
          </label>
          <a className="nav__phone" href="tel:1588-0000">
            <Icon.phone /> 1588-0000
          </a>
          <button className="nav__burger" onClick={onOpenMenu} aria-label="메뉴 열기"><span/></button>
        </div>
      </div>
    </header>
  );
}

/* ===== Mobile menu ===== */
function MobileMenu({ open, onClose }) {
  const menu = ["메인", "빠른 견적", "무심사", "이벤트 특가", "계약 후기", "Q&A"];
  return (
    <div className={"mobile-menu " + (open ? "is-open" : "")} onClick={onClose}>
      <div className="mobile-menu__panel" onClick={e => e.stopPropagation()}>
        <button className="mobile-menu__close" onClick={onClose} aria-label="닫기"><Icon.close /></button>
        <Logo />
        <nav className="mobile-menu__list">
          {menu.map(m => <a key={m} href="#" onClick={onClose}>{m}</a>)}
        </nav>
        <div className="mobile-menu__foot">
          고객센터 1588-0000<br/>평일 09:00 – 19:00
        </div>
      </div>
    </div>
  );
}

/* ===== Hero mark (decorative SVG — simple geometric, not a logo) ===== */
function HeroMark() {
  return (
    <svg className="hero__mark" viewBox="0 0 520 520" fill="none" aria-hidden="true">
      <g stroke="white" strokeWidth="1.2" opacity="0.55">
        <path d="M80 120 L260 40 L440 120 L440 360 L260 440 L80 360 Z" fill="white" fillOpacity="0.04"/>
        <path d="M140 160 L260 110 L380 160 L380 340 L260 390 L140 340 Z" fill="white" fillOpacity="0.05"/>
        <path d="M200 200 L260 175 L320 200 L320 300 L260 325 L200 300 Z" fill="white" fillOpacity="0.06"/>
      </g>
    </svg>
  );
}

window.Icon = Icon;
window.Logo = Logo;
window.Nav = Nav;
window.MobileMenu = MobileMenu;
window.HeroMark = HeroMark;
