/* ConceptSection — the three identity stories (Aging, Smoking, Venue). */
const CONCEPTS_NS = () => window.Panoramic65GrillDesignSystem_289460;

const CONCEPTS = [
  {
    index: 1,
    subtitle: "Double Aging & Oakwood Smoking",
    title: "에이징의 과학",
    image: window.__res("grillFlame", "./assets/web/grill-flame.jpg"),
    body: "72시간 허브 웻 에이징과 48시간 허브 버터 에이징의 결합. 단순한 향 부여를 넘어 '스모크 밸런싱' 기법으로 설계한 압도적인 풍미를 선사합니다.",
  },
  {
    index: 2,
    subtitle: "Trolley & Carving Service",
    title: "테이블 위의 퍼포먼스",
    image: window.__res("carving", "./assets/web/carving.jpg"),
    body: "고객의 테이블 앞을 직접 찾아가는 Live Dining 퍼포먼스. 카빙의 순간과 나이프 디테일로 현장감 넘치는 미식의 한 장면을 선사합니다.",
  },
  {
    index: 3,
    subtitle: "The Highest Venue · 65F",
    title: "65F 파노라믹 전망",
    image: window.__res("venueRender", "./assets/web/venue-render.jpg"),
    body: "통유리 창 너머로 펼쳐지는 환상적인 송도의 주야간 파노라믹 뷰. 다이닝과 바(Bar)의 동선이 하나로 이어지는 유기적인 공간 경험을 선사합니다.",
  },
];

function ConceptSection() {
  const { Eyebrow: ConEyebrow, ConceptCard: DSConceptCard } = CONCEPTS_NS();
  return (
    <section id="concept" className="section section-concept">
      <div className="section-head reveal">
        <ConEyebrow align="center">The Craft &amp; Concept</ConEyebrow>
        <h2 className="section-title">Three reasons to<br /><span className="serif-italic">ascend</span></h2>
      </div>
      <div className="concept-grid">
        {CONCEPTS.map((c, i) => (
          <div key={c.index} className="reveal" style={{ transitionDelay: `${i * 130}ms` }}>
            <DSConceptCard index={c.index} subtitle={c.subtitle} title={c.title} image={c.image}>
              {c.body}
            </DSConceptCard>
          </div>
        ))}
      </div>
    </section>
  );
}
window.ConceptSection = ConceptSection;