/* global Process, CTABlock, Footer */
const motion = window.motion;

function Process() {
  const steps = [
    ['01', 'Audit',    'We map every gap in your brand, funnel and ops in week one.',             'crosshair'],
    ['02', 'Design',   'Films, brand system, automations and dashboards designed together.',       'layers'],
    ['03', 'Build',    'We ship the engine. Automations go live, systems connect, leads start flowing.', 'zap'],
    ['04', 'Compound', 'We fine-tune your content and automations every month, keeping pace with what is actually working.',                 'crown'],
  ];
  return (
    <section id="process" className="section" data-screen-label="Process">
      <div className="section-head">
        <div>
          <span className="eyebrow">06 — How we work</span>
          <h2>Four steps.<br />No fluff.</h2>
        </div>
        <p>One team, one timeline, one outcome. Every step ships under one roof.</p>
      </div>
      <div className="process">
        {steps.map(([n, h, p, ic], i) => (
          <motion.div key={n} className="process-step" data-comment-anchor={`process-${i}`}
            initial={{ opacity:0, y:20 }} whileInView={{ opacity:1, y:0 }}
            viewport={{ once:true, amount:0.4 }}
            transition={{ duration:.45, delay:i*.06, ease:[.2,.7,.1,1] }}>
            <div className="top"><span className="num">STEP / {n}</span><i data-lucide={ic} className="icon"></i></div>
            <h4>{h}</h4>
            <p>{p}</p>
          </motion.div>
        ))}
      </div>
    </section>
  );
}

function CTABlock() {
  return (
    <section className="cta-block" data-screen-label="CTA">
      <div className="inner">
        <h2>Ready to be <em>unstoppable.</em></h2>
        <p>One vision. Every solution. We make the story and the engine. We'd rather show you than pitch you. Book a 30-minute call. No deck.</p>
        <div className="ctas">
          <a href="contact.html" className="pri">Book a call →</a>
          <a href="work.html" className="gst">See the work</a>
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="footer" data-screen-label="Footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <img src="assets/logo-parent.png" alt="One For All" />
          <p>A creative + systems studio. We build the story, the brand and the engine that runs them. All under one roof.</p>
        </div>
        <div>
          <h5>Studio</h5>
          <ul>
            <li><a href="films.html">Films</a></li>
            <li><a href="solutions.html">Solutions</a></li>
            <li><a href="work.html">Work</a></li>
            <li><a href="about.html">About</a></li>
          </ul>
        </div>
        <div>
          <h5>Resources</h5>
          <ul>
            <li><a href="index.html#process">Process</a></li>
            <li><a href="solutions.html#founding">Founding clients</a></li>
            <li><a href="press-kit.html">Press kit</a></li>
          </ul>
        </div>
        <div>
          <h5>Contact</h5>
          <ul>
            <li><a href="mailto:oneforallfilmworks@gmail.com">oneforallfilmworks@gmail.com</a></li>
            <li><a href="contact.html">Book a call</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-bottom">
        <span>© 2026 ONE FOR ALL · ALL RIGHTS RESERVED</span>
        <span className="closing">One vision. Every solution. One For All.</span>
        <span>Built on its own engine</span>
      </div>
    </footer>
  );
}

window.Process = Process;
window.CTABlock = CTABlock;
window.Footer = Footer;