// Possibilities.jsx — what can be made, and how a custom order works
const POSSIBLE = [
  { material: 'Wood', how: 'Laser engraved', items: ['Phone cases', 'Coasters', 'Keychains', 'Cutting boards & signs'] },
  { material: 'Slate', how: 'Laser engraved', items: ['Coasters', 'Serving boards'] },
  { material: 'Glass', how: 'UV printed or etched', items: ['Whiskey tumblers', 'Wine glasses'] },
  { material: 'Anything else', how: 'Bring your own', items: ['Memorabilia', 'Home decor', 'Keepsakes & gifts', 'Items you already own'] },
];

// Rough starting prices so people know what to expect before asking for a quote
const PRICE_GUIDE = [
  { item: 'Keychains', from: 2 },
  { item: 'Glasses', from: 10 },
  { item: 'Coaster sets', from: 20 },
  { item: 'Phone cases', from: 25 },
];

const STEPS = [
  { n: '1', title: 'Tell me about it', desc: 'Fill in the custom order form with what you have in mind.' },
  { n: '2', title: 'Get a quote', desc: 'I email you back within a day or two with a price and a timeline.' },
  { n: '3', title: 'I make it', desc: 'Once you approve the quote, I design it, make it, and send you a photo of the finished piece.' },
  { n: '4', title: 'Pay when it\'s done', desc: 'You only pay once it\'s made, by Interac e-Transfer. Nothing is charged on this site.' },
];

function Possibilities() {
  return (
    <>
      <section id="possible" style={{ background: 'var(--bg-elevated)', borderTop: '0.5px solid var(--cream-edge)', borderBottom: '0.5px solid var(--cream-edge)', padding: '72px 0' }}>
        <div className="mys-page">
          <div style={{ marginBottom: 32 }}>
            <p className="mys-eyebrow">What's possible</p>
            <h2 className="mys-h2">What I can make for you.</h2>
          </div>
          <div className="mys-tiles" style={{ '--cols': 'repeat(4, 1fr)', '--gap': '20px' }}>
            {POSSIBLE.map(g => (
              <div key={g.material} style={{
                background: 'var(--bg)', border: '0.5px solid var(--cream-edge)',
                borderRadius: 'var(--radius-lg)', padding: '24px 20px'
              }}>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 26, color: 'var(--fg)' }}>
                  {g.material}
                </div>
                <p className="mys-stamp" style={{ margin: '4px 0 0' }}>{g.how}</p>
                <hr className="mys-rule" style={{ width: 32, margin: '12px 0' }} />
                <ul style={{ listStyle: 'none', margin: 0, padding: 0, fontSize: 16, lineHeight: 2, color: 'var(--fg-muted)' }}>
                  {g.items.map(item => <li key={item}>{item}</li>)}
                </ul>
              </div>
            ))}
          </div>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)', margin: '32px auto 0', maxWidth: 780, textAlign: 'center', textWrap: 'balance' }}>
            <strong style={{ fontWeight: 600, color: 'var(--fg)' }}>A rough guide to price:</strong>{' '}
            {PRICE_GUIDE.map(p => `${p.item.toLowerCase()} from $${p.from}`).join(', ')}.
            Every order gets an exact quote before you pay anything.
          </p>
          <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)', margin: '8px 0 0', textAlign: 'center' }}>
            Don't see it here? Ask anyway — if it fits in the machine, I can probably make it work.
          </p>
        </div>
      </section>

      <section id="process" className="mys-section">
        <div className="mys-page">
          <div style={{ textAlign: 'center', marginBottom: 40 }}>
            <p className="mys-eyebrow">How it works</p>
            <h2 className="mys-h2">From idea to finished piece.</h2>
          </div>
          <div className="mys-tiles" style={{ '--cols': 'repeat(4, 1fr)', '--gap': '28px' }}>
            {STEPS.map(s => (
              <div key={s.n}>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 600, fontSize: 40, lineHeight: 1, color: 'var(--ember)' }}>{s.n}</div>
                <div style={{ fontFamily: 'var(--font-serif)', fontWeight: 700, fontSize: 26, color: 'var(--fg)', margin: '10px 0 6px' }}>{s.title}</div>
                <p style={{ fontSize: 16, lineHeight: 1.7, color: 'var(--fg-muted)', margin: 0 }}>{s.desc}</p>
              </div>
            ))}
          </div>
          <div style={{ textAlign: 'center', marginTop: 44 }}>
            <a className="mys-btn mys-btn-primary mys-btn-lg" href="#/custom">
              Start a custom order <span className="mys-btn-arrow">→</span>
            </a>
          </div>
        </div>
      </section>
    </>
  );
}

window.Possibilities = Possibilities;