// ═══════════════════════════════════════════════
// JAGTAR STUDIO — How It Works Page
// ═══════════════════════════════════════════════

const JagtarHow = ({ onNavigate }) => {
  const { c, H1, H2, H3, Body, Label, CTA, TextBtn, Section, Img } = JAGTAR;

  const steps = [
    {
      num: '01',
      title: 'Choose your person',
      desc: 'A partner, a parent, a friend, a child. Someone whose face you want to see rendered in sculpture. Someone worth commemorating.',
      img: 'person choosing a photo on their phone',
      imgDark: false,
    },
    {
      num: '02',
      title: 'Send two photographs',
      desc: 'One from the front, one from the side. Good natural lighting. A clear view of the face, no sunglasses. We provide a photo guide to help you get it right.',
      img: 'example front + side profile photos',
      imgDark: false,
    },
    {
      num: '03',
      title: 'We sculpt',
      desc: 'Your photographs are translated into a precise 3D model. That model is printed in high-resolution resin, then hand-finished by our team over 10 working days. Every surface is sanded, primed, and painted.',
      img: 'sculptor hand-finishing a bust, close-up',
      imgDark: true,
    },
    {
      num: '04',
      title: 'It arrives at your door',
      desc: 'Fifteen days after you order, your sculpture is at your door. Carefully packaged in a presentation box with a felt-lined interior. Ready to display on a desk, shelf, or mantelpiece. Ready to give.',
      img: 'bust on a mantelpiece in a warm home',
      imgDark: false,
    },
  ];

  return (
    <div style={{ paddingTop: 72 }}>
      {/* ─── Hero ─── */}
      <Section style={{ textAlign: 'center', padding: 'clamp(60px,10vw,140px) clamp(24px,6vw,80px)' }}>
        <Label style={{ display: 'block', marginBottom: 20 }}>The Process</Label>
        <H1 style={{ maxWidth: 700, margin: '0 auto' }}>
          From photograph to sculpture.
        </H1>
        <Body style={{ color: c.gray, marginTop: 20, maxWidth: 460, margin: '20px auto 0' }}>
          The whole process takes fifteen days. Two photographs in, one hand-finished sculpture out. Here is what happens in between.
        </Body>
      </Section>

      {/* ─── Wide atmospheric image ─── */}
      <div style={{ padding: '0 clamp(0px, 2vw, 40px)' }}>
        <Img label="wide shot — studio workspace, resin busts on shelves" dark ratio="21/9" />
      </div>

      {/* ─── Steps ─── */}
      {steps.map((step, i) => (
        <Section key={i} cream={i % 2 === 1}>
          <div style={{
            display: 'grid',
            gridTemplateColumns: 'repeat(auto-fit, minmax(320px, 1fr))',
            gap: 'clamp(32px, 5vw, 80px)',
            alignItems: 'center',
            direction: i % 2 === 1 ? 'rtl' : 'ltr',
          }}>
            <div style={{ direction: 'ltr' }}>
              <div style={{
                fontFamily: "'Cormorant Garamond', Georgia, serif",
                fontSize: 'clamp(48px, 6vw, 80px)',
                color: c.border, lineHeight: 1, marginBottom: 16,
              }}>{step.num}</div>
              <H3 style={{ marginBottom: 16 }}>{step.title}</H3>
              <Body style={{ maxWidth: 440 }}>{step.desc}</Body>
              {i === 1 && (
                <div style={{ marginTop: 20 }}>
                  <TextBtn onClick={() => {}}>View the photo guide</TextBtn>
                </div>
              )}
            </div>
            <div style={{ direction: 'ltr' }}>
              <Img label={step.img} dark={step.imgDark} ratio="4/3" />
            </div>
          </div>
        </Section>
      ))}

      {/* ─── Photo Guide Preview ─── */}
      <Section>
        <div style={{ maxWidth: 680, margin: '0 auto' }}>
          <Label style={{ display: 'block', marginBottom: 20, textAlign: 'center' }}>Photo Guide</Label>
          <H3 style={{ textAlign: 'center', marginBottom: 32 }}>Getting the best result</H3>

          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 24,
          }}>
            <div>
              <div style={{
                padding: '12px 0', marginBottom: 12,
                fontFamily: "'Manrope', sans-serif", fontSize: 12,
                fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase',
                color: c.success,
              }}>Photos that work</div>
              <Img label="good — clear, natural light, front view" ratio="3/4" />
              <Body small style={{ marginTop: 12 }}>
                Clear lighting. Face visible. Neutral expression. No obstructions.
              </Body>
            </div>
            <div>
              <div style={{
                padding: '12px 0', marginBottom: 12,
                fontFamily: "'Manrope', sans-serif", fontSize: 12,
                fontWeight: 600, letterSpacing: '0.1em', textTransform: 'uppercase',
                color: c.error,
              }}>Photos to avoid</div>
              <Img label="bad — dark, blurry, sunglasses, group shot" ratio="3/4" />
              <Body small style={{ marginTop: 12 }}>
                Blurry, low light, sunglasses, extreme angles, or group photos make sculpting difficult.
              </Body>
            </div>
          </div>
        </div>
      </Section>

      {/* ─── FAQ ─── */}
      <Section cream>
        <div style={{ maxWidth: 640, margin: '0 auto' }}>
          <H3 style={{ textAlign: 'center', marginBottom: 48 }}>Common Questions</H3>
          {[
            ['How long does delivery take?', 'Fifteen working days from when you submit your photos. We ship worldwide, free of charge.'],
            ['What if the photos are not quite right?', 'We will let you know within 24 hours and ask for new ones. No charge, no pressure.'],
            ['Can I commission a bust of someone who has passed?', 'Yes. Many of our commissions are memorials. Any clear photograph will work.'],
            ['What size is the bust?', 'Approximately 15cm tall, on a weighted display base. It fits comfortably on a desk or shelf.'],
            ['Can I make changes after ordering?', 'You can send new photos within 48 hours of ordering. After sculpting begins, changes are not possible.'],
          ].map(([q, a], i) => (
            <details key={i} style={{
              borderBottom: `1px solid ${c.border}`,
              padding: '20px 0',
            }}>
              <summary style={{
                fontFamily: "'Manrope', sans-serif",
                fontSize: 16, fontWeight: 500, color: c.charcoal,
                cursor: 'pointer', listStyle: 'none',
                display: 'flex', justifyContent: 'space-between', alignItems: 'center',
              }}>
                {q}
                <span style={{ color: c.gray, fontSize: 20, fontWeight: 300, marginLeft: 16 }}>+</span>
              </summary>
              <Body small style={{ marginTop: 12, maxWidth: 540, color: '#6b665f' }}>{a}</Body>
            </details>
          ))}
        </div>
      </Section>

      {/* ─── CTA ─── */}
      <Section style={{ textAlign: 'center', padding: 'clamp(80px,10vw,160px) clamp(24px,6vw,80px)' }}>
        <H2 style={{ marginBottom: 12 }}>Made by hand, for the people you love.</H2>
        <Body style={{ color: c.gray, marginBottom: 40 }}>From $49. Free worldwide shipping.</Body>
        <CTA onClick={() => onNavigate('product')}>Begin Your Commission</CTA>
      </Section>
    </div>
  );
};

Object.assign(window, { JagtarHow });
