// Product page shell — common Hero, Feature block, mockup primitives, CTA.
// Mỗi trang sản phẩm import shell + mockup primitives, define section riêng.

const PD_CREAM = '#FAF7F4';
const PD_INK = '#0A0E1A';
const PD_MUTED = 'rgba(10,14,26,0.62)';
const PD_LINE = 'rgba(10,14,26,0.08)';

// ─── HERO ────────────────────────────────────────────────────────────────
const ProductHero = ({ eyebrow, title, gradientWord, intro, mockup }) => (
  <div style={{ position: 'relative', background: NIGHT[1000], color: '#fff', padding: '120px 64px 90px', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
      background: `radial-gradient(ellipse 1100px 600px at 30% 0%, ${PINK[400]}28 0%, transparent 60%)` }}/>
    <div style={{ position: 'relative', maxWidth: 1280, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
      <div>
        <PinkEyebrow style={{ marginBottom: 18 }}>{eyebrow}</PinkEyebrow>
        <h1 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(34px, 4.5vw, 54px)', letterSpacing: '-0.03em', lineHeight: 1.05, margin: '0 0 18px' }}>
          {title}{' '}
          {gradientWord && <PinkGradientText gradient={PINK_CYAN_GRAD}>{gradientWord}</PinkGradientText>}
        </h1>
        <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 18, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, margin: '0 0 28px' }}>
          {intro}
        </p>
        <div style={{ display: 'flex', gap: 12, flexWrap: 'wrap' }}>
          <PinkBtn size="lg">Đặt lịch demo</PinkBtn>
          <PinkOutlineBtn size="lg" dark>Xem tất cả module</PinkOutlineBtn>
        </div>
      </div>
      <div>{mockup}</div>
    </div>
  </div>
);

// ─── FEATURE BLOCK (alternating image + text) ───────────────────────────
const ProductFeature = ({ eyebrow, title, body, bullets, mockup, reverse = false, dark = false }) => {
  const bg = dark ? NIGHT[950] : '#fff';
  const ink = dark ? '#fff' : PD_INK;
  const muted = dark ? 'rgba(255,255,255,0.65)' : PD_MUTED;
  return (
    <div style={{ background: bg, padding: '90px 64px', color: ink }}>
      <div style={{ maxWidth: 1180, margin: '0 auto', display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 56, alignItems: 'center' }}>
        <div style={{ order: reverse ? 2 : 1 }}>
          <PinkEyebrow style={{ marginBottom: 14 }}>{eyebrow}</PinkEyebrow>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 3.4vw, 40px)', letterSpacing: '-0.025em', lineHeight: 1.12, margin: '0 0 14px', color: ink }}>{title}</h2>
          <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 16, color: muted, lineHeight: 1.65, margin: '0 0 22px' }}>{body}</p>
          {bullets && bullets.length > 0 && (
            <ul style={{ listStyle: 'none', padding: 0, margin: 0, display: 'grid', gap: 10 }}>
              {bullets.map((b, i) => (
                <li key={i} style={{ display: 'flex', alignItems: 'flex-start', gap: 10, fontFamily: 'Inter, sans-serif', fontSize: 14.5, color: muted, lineHeight: 1.55 }}>
                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" style={{ marginTop: 2, flexShrink: 0 }}>
                    <path d="M5 12l5 5 9-10" stroke={PINK[400]} strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
                  </svg>
                  <span>{b}</span>
                </li>
              ))}
            </ul>
          )}
        </div>
        <div style={{ order: reverse ? 1 : 2 }}>{mockup}</div>
      </div>
    </div>
  );
};

// ─── 3-card feature grid ────────────────────────────────────────────────
const ProductFeatureGrid = ({ eyebrow, title, gradientWord, items, dark = false }) => {
  const bg = dark ? NIGHT[1000] : PD_CREAM;
  const ink = dark ? '#fff' : PD_INK;
  const muted = dark ? 'rgba(255,255,255,0.6)' : PD_MUTED;
  const cardBg = dark ? 'rgba(255,255,255,0.04)' : '#fff';
  const cardBorder = dark ? 'rgba(255,255,255,0.08)' : PD_LINE;
  return (
    <div style={{ background: bg, padding: '100px 64px', color: ink }}>
      <div style={{ maxWidth: 1180, margin: '0 auto' }}>
        <div style={{ textAlign: 'center', marginBottom: 56 }}>
          <PinkEyebrow style={{ marginBottom: 14, justifyContent: 'center' }}>{eyebrow}</PinkEyebrow>
          <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(28px, 3.6vw, 42px)', letterSpacing: '-0.025em', lineHeight: 1.1, margin: 0, color: ink }}>
            {title}{' '}{gradientWord && <PinkGradientText gradient={PINK_CYAN_GRAD}>{gradientWord}</PinkGradientText>}
          </h2>
        </div>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 22 }}>
          {items.map((it, i) => (
            <div key={i} style={{ background: cardBg, border: `1px solid ${cardBorder}`, borderRadius: 18, padding: '28px 26px', display: 'flex', flexDirection: 'column', gap: 12 }}>
              <div style={{ width: 44, height: 44, borderRadius: 12, background: `${PINK[400]}18`, border: `1px solid ${PINK[400]}40`, display: 'flex', alignItems: 'center', justifyContent: 'center', color: PINK[600] }}>
                {typeof it.icon === 'string' && window.Icon ? <Icon name={it.icon} size={22}/> : it.icon}
              </div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, fontWeight: 800, letterSpacing: '-0.015em', color: ink }}>{it.title}</div>
              <div style={{ fontFamily: 'Inter, sans-serif', fontSize: 14, color: muted, lineHeight: 1.6 }}>{it.body}</div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

// ─── BOTTOM CTA ─────────────────────────────────────────────────────────
const ProductCTA = ({ heading, body }) => (
  <div style={{ background: NIGHT[1000], padding: '110px 64px', color: '#fff', position: 'relative', overflow: 'hidden' }}>
    <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
      background: `radial-gradient(ellipse 1100px 700px at 50% 50%, ${PINK[400]}22 0%, transparent 60%)` }}/>
    <div style={{ position: 'relative', maxWidth: 760, margin: '0 auto', textAlign: 'center' }}>
      <h2 style={{ fontFamily: 'Inter, sans-serif', fontWeight: 800, fontSize: 'clamp(32px, 4.4vw, 48px)', letterSpacing: '-0.03em', lineHeight: 1.08, margin: '0 0 18px' }}>
        {heading || 'Sẵn sàng chuyển team lên CNV Work?'}
      </h2>
      <p style={{ fontFamily: 'Inter, sans-serif', fontSize: 17, color: 'rgba(255,255,255,0.7)', lineHeight: 1.6, margin: '0 0 32px' }}>
        {body || 'Đặt lịch demo 30 phút — đội sales tư vấn lộ trình triển khai phù hợp với doanh nghiệp của bạn.'}
      </p>
      <div style={{ display: 'flex', gap: 14, justifyContent: 'center', flexWrap: 'wrap' }}>
        <PinkBtn size="lg">Đặt lịch demo</PinkBtn>
        <PinkOutlineBtn size="lg" dark
          onClick={() => { window.location.href = '/pricing'; }}>
          Xem bảng giá
        </PinkOutlineBtn>
      </div>
    </div>
  </div>
);

// ─── Browser frame wrapper for mockups ──────────────────────────────────
const MockFrame = ({ children, dark = false, label }) => (
  <div style={{
    background: dark ? NIGHT[900] : '#fff',
    border: `1px solid ${dark ? 'rgba(255,255,255,0.1)' : PD_LINE}`,
    borderRadius: 14,
    overflow: 'hidden',
    boxShadow: dark ? `0 30px 80px ${PINK[400]}22, 0 0 0 1px rgba(255,255,255,0.04)` : `0 30px 80px ${PINK[400]}22, 0 1px 0 rgba(255,255,255,0.5) inset`,
  }}>
    <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 14px', borderBottom: `1px solid ${dark ? 'rgba(255,255,255,0.08)' : PD_LINE}`, background: dark ? 'rgba(255,255,255,0.02)' : '#FAFAFA' }}>
      <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#FF5F56' }}/>
      <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#FFBD2E' }}/>
      <span style={{ width: 10, height: 10, borderRadius: '50%', background: '#27C93F' }}/>
      {label && <span style={{ marginLeft: 12, fontFamily: 'Inter, sans-serif', fontSize: 11, color: dark ? 'rgba(255,255,255,0.5)' : PD_MUTED }}>{label}</span>}
    </div>
    <div style={{ padding: 0 }}>{children}</div>
  </div>
);

Object.assign(window, {
  PD_CREAM, PD_INK, PD_MUTED, PD_LINE,
  ProductHero, ProductFeature, ProductFeatureGrid, ProductCTA, MockFrame,
});