// HausProcess — single custom process flow

const processSteps = [
  {
    n: '01',
    title: 'Tell us about your space',
    desc: 'Five minutes online. Your room, your kids, what you\'re imagining.',
  },
  {
    n: '02',
    title: 'Discovery call',
    desc: 'Thirty minutes, on the phone or video. We walk through what\'s possible and where the value sits.',
  },
  {
    n: '03',
    title: 'Design',
    desc: 'Concept sketches, material samples, a fixed quote. You approve every detail before we cut a single panel.',
  },
  {
    n: '04',
    title: 'Approve and book',
    desc: 'Sign off, deposit, and your install date locked in.',
  },
  {
    n: '05',
    title: 'Build and install',
    desc: 'We build in our workshop, install on-site, and don\'t pack up until you\'re happy.',
  },
];

const HausProcess = () => {
  const ref = React.useRef();
  const [vis, setVis] = React.useState(false);

  React.useEffect(() => {
    const obs = new IntersectionObserver(([e]) => {
      if (e.isIntersecting) { setVis(true); obs.disconnect(); }
    }, { threshold: 0.1 });
    if (ref.current) obs.observe(ref.current);
    return () => obs.disconnect();
  }, []);

  return (
    <section id="process" style={{ background: '#eef2ea', padding: 'clamp(64px,8vw,120px) clamp(20px,5vw,48px)' }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>

        {/* Header */}
        <div ref={ref} className="process-header" style={{
          display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 'clamp(24px,5vw,80px)',
          alignItems: 'end', marginBottom: 56,
          opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateY(18px)',
          transition: 'opacity 600ms, transform 600ms cubic-bezier(0.25,0.46,0.45,0.94)',
        }}>
          <div>
            <div style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 11, fontWeight: 600, letterSpacing: '0.16em', textTransform: 'uppercase', color: '#899e7b', marginBottom: 14 }}>
              How it works
            </div>
            <h2 style={{ fontFamily: "'Fonphoria',serif", fontWeight: 700, fontSize: 'clamp(28px,3.5vw,46px)', lineHeight: 1.05, letterSpacing: '-0.02em', color: '#1f1f1f', margin: 0, textWrap: 'pretty' }}>
              Five steps. One wall they'll never forget.
            </h2>
          </div>
          <p style={{ fontFamily: "'Montserrat',sans-serif", fontWeight: 300, fontSize: 'clamp(13px,1.2vw,15px)', color: '#5a5248', lineHeight: 1.8, margin: 0, textWrap: 'pretty' }}>
            Every project starts with a conversation. We design around your room, your family, and your budget — and build it to last.
          </p>
        </div>

        {/* Steps */}
        <div className="process-steps" style={{
          display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 12, marginBottom: 56,
        }}>
          {processSteps.map((step, i) => (
            <div key={step.n} style={{
              position: 'relative',
              opacity: vis ? 1 : 0, transform: vis ? 'none' : 'translateY(16px)',
              transition: `opacity 500ms ${80 + i * 40}ms cubic-bezier(0.25,0.46,0.45,0.94), transform 500ms ${80 + i * 40}ms cubic-bezier(0.25,0.46,0.45,0.94)`,
            }}>
              {i < processSteps.length - 1 && (
                <div style={{ position: 'absolute', top: 28, right: -7, width: 14, height: 1, background: '#b8c8b0', zIndex: 1 }} />
              )}
              <div style={{
                background: '#fffaf3', borderRadius: 20, padding: '18px 16px 16px',
                border: '1px solid #e8d9c5', height: '100%', boxSizing: 'border-box',
              }}>
                <div style={{ fontFamily: "'Fonphoria',serif", fontWeight: 700, fontSize: 32, lineHeight: 1, color: '#c4d4b8', marginBottom: 10, letterSpacing: '-0.03em' }}>
                  {step.n}
                </div>
                <div style={{ fontFamily: "'Fonphoria',serif", fontWeight: 600, fontSize: 17, color: '#1f1f1f', marginBottom: 8, lineHeight: 1.2 }}>
                  {step.title}
                </div>
                <p style={{ fontFamily: "'Montserrat',sans-serif", fontWeight: 300, fontSize: 13, lineHeight: 1.75, color: '#5a5248', margin: 0 }}>
                  {step.desc}
                </p>
              </div>
            </div>
          ))}
        </div>

        {/* CTA */}
        <div style={{ textAlign: 'center', opacity: vis ? 1 : 0, transition: 'opacity 600ms 650ms' }}>
          <button
            onClick={() => document.getElementById('contact')?.scrollIntoView({ behavior: 'smooth' })}
            style={{ fontFamily: "'Montserrat',sans-serif", fontSize: 13, fontWeight: 600, letterSpacing: '0.05em', background: '#5a7a4a', color: '#fff', border: 'none', borderRadius: 9999, padding: '15px 36px', cursor: 'pointer', transition: 'background 220ms' }}
            onMouseEnter={e => e.currentTarget.style.background = '#496840'}
            onMouseLeave={e => e.currentTarget.style.background = '#5a7a4a'}
          >
            Start your project
          </button>
        </div>

      </div>

      <style>{`
        @media(max-width:900px) { .process-steps { grid-template-columns: repeat(3,1fr) !important; } }
        @media(max-width:580px) { .process-steps { grid-template-columns: repeat(2,1fr) !important; } }
        @media(max-width:380px) { .process-steps { grid-template-columns: 1fr !important; } }
        @media(max-width:680px) { .process-header { grid-template-columns: 1fr !important; } }
      `}</style>
    </section>
  );
};

Object.assign(window, { HausProcess });