/* Custom Boards builder (3-tab) + Mirror/Canvas/CustomFrame builders (sample structure) */
(() => {
const { FRAME_STYLES: FS, BOARD_PLACEHOLDERS } = window.SAM;

const BoardSurfacePreview = ({ type, frame }) => {
  const fills = {
    cork: { bg: 'radial-gradient(circle at 20% 20%, #C99A6A, #B5824D)', label: '📌 corkboard' },
    chalk: { bg: '#1F2A28', label: 'chalkboard' },
    white: { bg: '#FAFAFA', label: 'whiteboard' },
  };
  const f = fills[type];
  return (
    <div style={{
      background: frame.color, padding: 16, borderRadius: 4,
      boxShadow: 'inset 0 0 0 4px rgba(0,0,0,0.08)'
    }}>
      <div style={{
        aspectRatio: '4/3',
        background: f.bg,
        borderRadius: 2,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        color: type === 'chalk' ? '#fff' : 'var(--ink)',
        fontFamily: 'JetBrains Mono', fontSize: 12,
        letterSpacing: '0.08em', textTransform: 'uppercase'
      }}>
        {f.label}
      </div>
    </div>
  );
};

const BoardBuilder = () => {
  const [type, setType] = useState('cork');
  const [size, setSize] = useState({ w: 40, h: 30 });
  const [frame, setFrame] = useState(FS[3]); // light oak default
  const [magnetic, setMagnetic] = useState(false);
  const [contact, setContact] = useState({ name: '', email: '', phone: '' });
  const [submitted, setSubmitted] = useState(false);

  const tabs = [
    { id: 'cork', name: 'Corkboard', desc: 'Pin notes, photos, mementos.' },
    { id: 'chalk', name: 'Chalkboard', desc: 'Classic chalkboard surface, framed.' },
    { id: 'white', name: 'Whiteboard', desc: 'Dry-erase. Magnetic option available.' },
  ];

  return (
    <div className="page-fade" style={{ paddingTop: 32, paddingBottom: 80 }}>
      <div className="container">
        <div style={{ marginBottom: 24 }}>
          <a href="#/products" style={{ fontSize: 13, color: 'var(--muted)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <Icon name="ArrowLeft" size={13}/> Back to products
          </a>
          <div style={{ display: 'flex', alignItems: 'center', gap: 12, flexWrap: 'wrap', marginTop: 8 }}>
            <h1 className="display" style={{ fontSize: 'clamp(28px, 4vw, 40px)', fontWeight: 700, margin: 0 }}>
              Custom Boards
            </h1>
            <span className="pill">Only at Sam's</span>
          </div>
          <Eyebrow>Cork · Chalk · Whiteboard — all framed.</Eyebrow>
        </div>

        {/* 3-tab selector */}
        <div style={{
          display: 'flex', gap: 8, padding: 6, borderRadius: 10,
          background: '#fff', border: '1px solid var(--hair)',
          maxWidth: 540, marginBottom: 32
        }}>
          {tabs.map(t => (
            <button key={t.id} onClick={() => setType(t.id)} style={{
              flex: 1, padding: '10px 12px', borderRadius: 7, border: 0,
              background: type === t.id ? 'var(--ink)' : 'transparent',
              color: type === t.id ? '#fff' : 'var(--ink-body)',
              fontWeight: 600, fontSize: 14, cursor: 'pointer',
              transition: 'all .15s'
            }}>
              {t.name}
            </button>
          ))}
        </div>

        <div style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32
        }} className="b-grid">
          <div>
            <div style={{
              background: '#fff', border: '1px solid var(--hair)',
              borderRadius: 12, padding: 'clamp(20px, 3vw, 36px)'
            }}>
              <Eyebrow>Surface</Eyebrow>
              <div className="display" style={{ fontSize: 22, fontWeight: 700, marginTop: 8 }}>
                {tabs.find(t => t.id === type).name}
              </div>
              <p style={{ color: 'var(--ink-body)', marginTop: 4, marginBottom: 0 }}>
                {tabs.find(t => t.id === type).desc}
              </p>

              {submitted ? (
                <div style={{ marginTop: 32, padding: 28, background: '#ECFDF3', borderRadius: 10, textAlign: 'center' }}>
                  <Icon name="Check" size={28} stroke={2.4} style={{ color: 'var(--green)' }}/>
                  <div className="display" style={{ fontSize: 20, fontWeight: 700, marginTop: 10 }}>
                    Quote request sent.
                  </div>
                  <div style={{ fontSize: 14, color: 'var(--ink-body)', marginTop: 4 }}>
                    We'll reach back out within 24 hours.
                  </div>
                </div>
              ) : (
                <>
                  <div style={{ marginTop: 24 }}>
                    <label className="label">Size (inches)</label>
                    <div style={{ display: 'flex', gap: 12, alignItems: 'center' }}>
                      <input type="number" className="input input-lg" value={size.w}
                        onChange={e => setSize({ ...size, w: e.target.value })}/>
                      <span className="mono" style={{ color: 'var(--muted)' }}>×</span>
                      <input type="number" className="input input-lg" value={size.h}
                        onChange={e => setSize({ ...size, h: e.target.value })}/>
                    </div>
                    <div className="helper">Standard ranges: 12" → 96". Larger? Just ask.</div>
                  </div>

                  <div style={{ marginTop: 20 }}>
                    <label className="label">Frame style</label>
                    <div style={{
                      display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8
                    }}>
                      {FS.slice(0, 6).map(f => {
                        const sel = frame.id === f.id;
                        return (
                          <button key={f.id} onClick={() => setFrame(f)} style={{
                            padding: 8, borderRadius: 8,
                            border: '1.5px solid ' + (sel ? 'var(--ink)' : 'var(--hair-strong)'),
                            background: sel ? '#FAFAF8' : '#fff', cursor: 'pointer',
                            textAlign: 'left'
                          }}>
                            <div style={{
                              height: 28, borderRadius: 3, background: f.color,
                              border: '1px solid rgba(0,0,0,0.1)'
                            }}/>
                            <div style={{ fontSize: 11, color: 'var(--ink)', marginTop: 6, fontWeight: 600 }}>
                              {f.name}
                            </div>
                          </button>
                        );
                      })}
                    </div>
                  </div>

                  {type === 'white' && (
                    <div style={{ marginTop: 20 }}>
                      <label className="label">Whiteboard surface</label>
                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10 }}>
                        <button onClick={() => setMagnetic(false)} style={{
                          padding: 12, textAlign: 'left',
                          border: '1.5px solid ' + (!magnetic ? 'var(--ink)' : 'var(--hair-strong)'),
                          borderRadius: 8, background: !magnetic ? '#FAFAF8' : '#fff', cursor: 'pointer'
                        }}>
                          <div style={{ fontWeight: 600, fontSize: 14 }}>Standard</div>
                          <div style={{ fontSize: 12, color: 'var(--muted)' }}>Dry-erase</div>
                        </button>
                        <button onClick={() => setMagnetic(true)} style={{
                          padding: 12, textAlign: 'left',
                          border: '1.5px solid ' + (magnetic ? 'var(--ink)' : 'var(--hair-strong)'),
                          borderRadius: 8, background: magnetic ? '#FAFAF8' : '#fff', cursor: 'pointer'
                        }}>
                          <div style={{ fontWeight: 600, fontSize: 14 }}>Magnetic <span className="mono" style={{ fontSize: 11, color: 'var(--green)', marginLeft: 4 }}>+$40</span></div>
                          <div style={{ fontSize: 12, color: 'var(--muted)' }}>Holds magnets, dry-erase</div>
                        </button>
                      </div>
                    </div>
                  )}

                  <hr className="hairline" style={{ margin: '24px 0' }}/>

                  <Eyebrow>Get a quote</Eyebrow>
                  <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 10, marginTop: 12 }}>
                    <input className="input" placeholder="Name" value={contact.name}
                      onChange={e => setContact({ ...contact, name: e.target.value })}/>
                    <input className="input" placeholder="Email" type="email" value={contact.email}
                      onChange={e => setContact({ ...contact, email: e.target.value })}/>
                    <input className="input" placeholder="Phone" style={{ gridColumn: 'span 2' }}
                      value={contact.phone}
                      onChange={e => setContact({ ...contact, phone: e.target.value })}/>
                  </div>
                  <button className="btn btn-green btn-lg" style={{ marginTop: 16, width: '100%', justifyContent: 'center' }}
                    onClick={() => setSubmitted(true)}>
                    Get my quote <Icon name="ArrowRight" size={16}/>
                  </button>
                </>
              )}
            </div>
          </div>

          <div className="b-side">
            <div className="card" style={{ padding: 16, position: 'sticky', top: 96 }}>
              <BoardSurfacePreview type={type} frame={frame}/>
              <hr className="hairline" style={{ margin: '14px 0' }}/>
              <Row label="Surface" value={tabs.find(t => t.id === type).name}/>
              <Row label="Size" value={`${size.w}" × ${size.h}"`}/>
              <Row label="Frame" value={frame.name}/>
              {type === 'white' && <Row label="Magnetic" value={magnetic ? 'Yes' : 'No'}/>}
              <hr className="hairline" style={{ margin: '14px 0' }}/>
              <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                <span style={{ fontSize: 12, color: 'var(--muted)' }}>Est. price</span>
                <span className="display" style={{ fontSize: 22, fontWeight: 700, color: 'var(--ink)' }}>
                  ~${type === 'white' ? (magnetic ? 245 : 205) : 185}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .b-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
};

/* ---- Generic single-page placeholder builders for Mirror / Canvas / Custom Frame ---- */
const PlaceholderBuilder = ({ title, eyebrow, blurb, slug, stockSize, basePrice, surface }) => {
  const [size, setSize] = useState(stockSize);
  const [frame, setFrame] = useState(FS[0]);
  return (
    <div className="page-fade" style={{ paddingTop: 32, paddingBottom: 80 }}>
      <div className="container">
        <div style={{ marginBottom: 24 }}>
          <a href="#/products" style={{ fontSize: 13, color: 'var(--muted)', display: 'inline-flex', alignItems: 'center', gap: 6 }}>
            <Icon name="ArrowLeft" size={13}/> Back to products
          </a>
          <h1 className="display" style={{ fontSize: 'clamp(28px, 4vw, 40px)', fontWeight: 700, margin: '8px 0 4px' }}>
            {title}
          </h1>
          <Eyebrow>{eyebrow}</Eyebrow>
          <p style={{ marginTop: 12, color: 'var(--ink-body)', maxWidth: 640 }}>{blurb}</p>
        </div>

        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 32 }} className="b-grid">
          <div style={{
            background: '#fff', border: '1px solid var(--hair)', borderRadius: 12,
            padding: 'clamp(20px, 3vw, 36px)'
          }}>
            <Eyebrow>Step 1 · Size</Eyebrow>
            <div style={{ display: 'flex', gap: 12, alignItems: 'center', marginTop: 12 }}>
              <input type="number" className="input input-lg" value={size.w}
                onChange={e => setSize({ ...size, w: e.target.value })}/>
              <span className="mono" style={{ color: 'var(--muted)' }}>×</span>
              <input type="number" className="input input-lg" value={size.h}
                onChange={e => setSize({ ...size, h: e.target.value })}/>
            </div>

            <div style={{ marginTop: 24 }}><Eyebrow>Step 2 · Frame style</Eyebrow></div>
            <div style={{
              marginTop: 12, display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 8
            }}>
              {FS.slice(0, 6).map(f => {
                const sel = frame.id === f.id;
                return (
                  <button key={f.id} onClick={() => setFrame(f)} style={{
                    padding: 8, borderRadius: 8,
                    border: '1.5px solid ' + (sel ? 'var(--ink)' : 'var(--hair-strong)'),
                    background: sel ? '#FAFAF8' : '#fff', cursor: 'pointer',
                    textAlign: 'left'
                  }}>
                    <div style={{ height: 28, borderRadius: 3, background: f.color }}/>
                    <div style={{ fontSize: 11, color: 'var(--ink)', marginTop: 6, fontWeight: 600 }}>
                      {f.name}
                    </div>
                  </button>
                );
              })}
            </div>

            <div style={{ marginTop: 24 }}><Eyebrow>Step 3 · Quote</Eyebrow></div>
            <p style={{ fontSize: 13, color: 'var(--muted)', marginTop: 4 }}>
              Builder structure same as TV Frame builder — full multi-step UX coming in next iteration.
            </p>
            <a href="#/build/tv-frame" className="btn btn-ghost-red" style={{ marginTop: 12 }}>
              See full builder pattern → Frame Your TV
            </a>
          </div>
          <div className="b-side">
            <div className="card" style={{ padding: 18, position: 'sticky', top: 96 }}>
              <div style={{
                aspectRatio: Number(size.w)/(Number(size.h)||1) > 1 ? '4/3' : '3/4',
                background: frame.color,
                padding: 16, borderRadius: 4
              }}>
                <div style={{
                  width: '100%', height: '100%',
                  background: surface,
                  borderRadius: 2,
                  display: 'flex', alignItems: 'center', justifyContent: 'center',
                  color: 'var(--muted)', fontFamily: 'JetBrains Mono', fontSize: 11
                }}>{slug}</div>
              </div>
              <hr className="hairline" style={{ margin: '14px 0' }}/>
              <Row label="Size" value={`${size.w}" × ${size.h}"`}/>
              <Row label="Frame" value={frame.name}/>
              <hr className="hairline" style={{ margin: '14px 0' }}/>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ fontSize: 12, color: 'var(--muted)' }}>Est.</span>
                <span className="display" style={{ fontSize: 22, fontWeight: 700, color: 'var(--ink)' }}>
                  ~${basePrice}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <style>{`
        @media (max-width: 880px) {
          .b-grid { grid-template-columns: 1fr !important; }
        }
      `}</style>
    </div>
  );
};

const MirrorBuilder = () => (
  <PlaceholderBuilder
    title="Custom Mirrors"
    eyebrow="Bespoke mirrors · any size · any space"
    blurb="Framed mirrors built to your dimensions. Bathroom, entryway, commercial spaces. Pick a size, pick a frame, get a quote."
    slug="mirror surface"
    stockSize={{ w: 30, h: 42 }}
    basePrice={195}
    surface="linear-gradient(135deg, #DCE3E5 0%, #A8B5BB 100%)"
  />
);

const CanvasBuilder = () => (
  <PlaceholderBuilder
    title="Canvas Prints"
    eyebrow="Your photos · Epson Pro 9880 · premium canvas"
    blurb="Turn your photos into gallery-wrap or framed canvas wall art. We tweak each photo for the best possible print on premium Epson papers."
    slug="canvas surface · upload photo"
    stockSize={{ w: 24, h: 36 }}
    basePrice={115}
    surface="#F5F1E8"
  />
);

const CustomFrameBuilder = () => (
  <PlaceholderBuilder
    title="Custom Frames"
    eyebrow="Build a frame to your spec"
    blurb="Size, moulding, mat, and glass — for art, photos, jerseys, certificates, 3D objects, golf clubs… anything you bring us."
    slug="your art / object goes here"
    stockSize={{ w: 24, h: 18 }}
    basePrice={145}
    surface="#FAF6EB"
  />
);

Object.assign(window, { BoardBuilder, MirrorBuilder, CanvasBuilder, CustomFrameBuilder });
})();