// ═══════════════════════════════════════════════
// JAGTAR STUDIO — Product Page
// ═══════════════════════════════════════════════

const JagtarProduct = ({ onNavigate }) => {
  const { c, H1, H2, H3, Body, Label, CTA, TextBtn, Section, Img, Upload, Divider } = JAGTAR;
  const [selectedThumb, setSelectedThumb] = React.useState(0);

  const thumbs = [
    ['bust — front angle, warm light', '3/4'],
    ['bust — side profile', '3/4'],
    ['bust — three-quarter view', '3/4'],
    ['detail — texture close-up', '1/1'],
  ];

  return (
    <div style={{ paddingTop: 72 }}>
      {/* ─── Product Hero ─── */}
      <Section style={{ padding: 'clamp(32px,4vw,60px) clamp(24px,6vw,80px)' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(360px, 1fr))',
          gap: 'clamp(32px, 4vw, 60px)',
          alignItems: 'start',
        }}>
          {/* Image gallery */}
          <div>
            <Img label={thumbs[selectedThumb][0]} ratio="4/5"
              style={{ marginBottom: 12 }} />
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 8 }}>
              {thumbs.map(([label], i) => (
                <div key={i}
                  onClick={() => setSelectedThumb(i)}
                  style={{
                    cursor: 'pointer',
                    outline: selectedThumb === i ? `2px solid ${c.gold}` : `1px solid ${c.border}`,
                    outlineOffset: -1,
                    transition: 'outline 0.2s ease',
                  }}>
                  <Img label={label} ratio="1/1" />
                </div>
              ))}
            </div>
          </div>

          {/* Product info */}
          <div style={{ padding: 'clamp(0px, 2vw, 20px) 0' }}>
            <Label style={{ display: 'block', marginBottom: 16 }}>Personalized Sculpture</Label>
            <H2 style={{ marginBottom: 16 }}>Your Sculpture</H2>
            <Body style={{ maxWidth: 420, marginBottom: 24 }}>
              A hand-finished resin bust, sculpted from two photographs. Approximately 15cm tall. Each piece is unique, shaped by the likeness of someone you choose.
            </Body>

            {/* Price */}
            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 12,
              marginBottom: 32, paddingBottom: 24,
              borderBottom: `1px solid ${c.border}`,
            }}>
              <span style={{
                fontFamily: "'Cormorant Garamond', Georgia, serif",
                fontSize: 36, color: c.charcoal,
              }}>$49</span>
              <Body small style={{ color: c.gray }}>Free worldwide shipping</Body>
            </div>

            {/* Details */}
            {[
              ['Material', 'Hand-finished resin'],
              ['Height', 'Approximately 15cm'],
              ['Delivery', '15 working days'],
              ['Photos needed', '2 (front + side)'],
            ].map(([k, v]) => (
              <div key={k} style={{
                display: 'flex', justifyContent: 'space-between',
                padding: '12px 0',
                borderBottom: `1px solid ${c.border}`,
              }}>
                <Body small style={{ color: c.gray }}>{k}</Body>
                <Body small style={{ fontWeight: 500, color: c.charcoal }}>{v}</Body>
              </div>
            ))}

            <div style={{ marginTop: 32 }}>
              <CTA onClick={() => {
                document.getElementById('upload-section')?.scrollIntoView?.({behavior:'smooth',block:'start'});
              }} style={{ width: '100%', textAlign: 'center' }}>
                Begin Your Commission
              </CTA>
            </div>
          </div>
        </div>
      </Section>

      {/* ─── Photo Upload Section ─── */}
      <Section cream id="upload-section">
        <div style={{ maxWidth: 680, margin: '0 auto', textAlign: 'center' }}>
          <Label style={{ display: 'block', marginBottom: 16 }}>Step One</Label>
          <H3 style={{ marginBottom: 8 }}>Send us two photographs</H3>
          <Body style={{ color: c.gray, marginBottom: 40, maxWidth: 440, margin: '0 auto 40px' }}>
            One from the front, one from the side. Good lighting, a clear view of the face. We handle the rest.
          </Body>

          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))',
            gap: 20,
          }}>
            <Upload label="Front Photo" sublabel="Face clearly visible, looking straight ahead" />
            <Upload label="Side Profile" sublabel="90-degree side view, hair pulled back if possible" />
          </div>

          <div style={{ marginTop: 16, textAlign: 'left' }}>
            <TextBtn onClick={() => onNavigate('how')}>View the photo guide</TextBtn>
          </div>

          <div style={{ marginTop: 40 }}>
            <CTA onClick={() => onNavigate('checkout')} style={{ width: '100%', maxWidth: 400, textAlign: 'center' }}>
              Continue to Checkout
            </CTA>
            <Body small style={{ color: c.gray, marginTop: 12 }}>
              You can also email photos to hello@jagtarstudio.com after ordering.
            </Body>
          </div>
        </div>
      </Section>

      {/* ─── What you get ─── */}
      <Section>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
          gap: 'clamp(24px, 4vw, 60px)',
          alignItems: 'center',
        }}>
          <div>
            <Label style={{ display: 'block', marginBottom: 16 }}>What You Receive</Label>
            <H3 style={{ marginBottom: 16 }}>More than a gift.</H3>
            <Body style={{ marginBottom: 24, maxWidth: 400 }}>
              Each sculpture arrives in a custom presentation box with a felt-lined interior. The bust sits on a weighted base with a subtle nameplate. Ready to display, ready to give.
            </Body>
            {[
              'Hand-finished resin with a stone-like texture',
              'Weighted display base',
              'Custom presentation box',
              'Optional nameplate engraving',
            ].map((item, i) => (
              <div key={i} style={{
                display: 'flex', alignItems: 'center', gap: 12,
                marginBottom: 10,
              }}>
                <div style={{
                  width: 6, height: 6, borderRadius: '50%',
                  background: c.gold, flexShrink: 0,
                }} />
                <Body small>{item}</Body>
              </div>
            ))}
          </div>
          <Img label="unboxing — presentation box, tissue paper" ratio="4/5" />
        </div>
      </Section>

      {/* ─── Social proof strip ─── */}
      <Section cream style={{ textAlign: 'center' }}>
        <div style={{
          display: 'grid',
          gridTemplateColumns: 'repeat(auto-fit, minmax(160px, 1fr))',
          gap: 40,
        }}>
          {[
            ['500+', 'Commissions completed'],
            ['15 days', 'Photo to delivery'],
            ['Hand-finished', 'Every single one'],
            ['$49', 'Free worldwide shipping'],
          ].map(([stat, label], i) => (
            <div key={i}>
              <div style={{
                fontFamily: "'Cormorant Garamond', Georgia, serif",
                fontSize: 'clamp(24px, 3vw, 36px)', color: c.charcoal,
                marginBottom: 6,
              }}>{stat}</div>
              <Body small style={{ color: c.gray }}>{label}</Body>
            </div>
          ))}
        </div>
      </Section>

      {/* ─── CTA ─── */}
      <Section style={{ textAlign: 'center' }}>
        <H3 style={{ marginBottom: 32 }}>Ready to begin?</H3>
        <CTA onClick={() => onNavigate('checkout')}>Begin Your Commission</CTA>
      </Section>
    </div>
  );
};

Object.assign(window, { JagtarProduct });
