// lens-form-footer.jsx — Lens Method teaser, Inquiry form, Footer

function LensMethod() {
  return (
    <section className="sec lens-section snap-section" id="method"
    data-screen-label="06 The Method" data-comment-anchor="lens-method">
      <div className="lens">
        <div data-comment-anchor="c920d664ce-div-8-9">
          <div className="eyebrow">Introducing</div>
          <h2 className="lens-title">
            The Lens Method:<br />
            <em>CapCut Crash Course.</em>
          </h2>
          <p className="lens-body">
            A beginner-friendly CapCut crash course for creators who want to edit faster,
            make better videos, and feel confident in their tools — without the bloat or
            the overwhelm.
          </p>
          <div className="lens-modules">
            <span>06 modules</span>
            <span>2h 40m</span>
            <span>Templates included</span>
            <span>Self-paced</span>
          </div>
          <div className="lens-cta-row" style={{ marginTop: 36 }}>
            <a href="#" className="btn-primary">
              <span>Join the waitlist</span>
              <Arrow />
            </a>
            <a href="#" className="btn-ghost">
              <span>Preview a lesson</span>
            </a>
          </div>
        </div>
        <div className="lens-img">
          <img src="images/lens-method-course.png"
          alt="The Lens Method — CapCut crash course" />
          <div className="lens-badge">Coming soon</div>
        </div>
      </div>
    </section>);

}

function InquiryForm() {
  // The form itself is the shared <ApplicationForm/> (also used on the
  // dedicated service pages) so both places stay perfectly in sync.
  return (
    <section className="sec snap-section" id="inquire"
    data-screen-label="07 Enquire" data-comment-anchor="inquiry">
      <div className="sec-hd">
        <div className="num">(05)</div>
        <h2 className="title">Start a <em>conversation.</em></h2>
        <div className="aside">Replies within 48h</div>
      </div>
      <ApplicationForm
        eyebrow="Apply now"
        heading={<>Let's make something <em className="serif-italic">worth watching.</em></>}
        intro="Whether you're booking a retainer, a one-off shoot or a coaching session — tell me where your brand is and where you want it to go. I'll come back to you within 48h."
      />
    </section>);

}

function Footer() {
  return (
    <footer className="footer" data-screen-label="08 Footer" data-comment-anchor="footer">
      <div className="footer-grid">
        <div>
          <div className="eyebrow" style={{ marginBottom: 16 }}>Lamia Lens · Est. 2022</div>
          <p style={{ fontSize: 17, lineHeight: 1.55, maxWidth: '34ch' }}>
            Dubai-based creative studio supporting brands with high-end aesthetic visuals
            made for social.
          </p>
          <a href="#inquire" className="btn-primary" style={{ marginTop: 28 }}>
            <span>Start a project</span>
            <Arrow />
          </a>
        </div>
        <div className="footer-col">
          <h5>Navigate</h5>
          <a href="#work">Work</a>
          <a href="#services">Services</a>
          <a href="#about">About</a>
          <a href="#inquire">Contact</a>
        </div>
        <div className="footer-col">
          <h5>Follow</h5>
          <a href="https://www.instagram.com/lamialens/" target="_blank" rel="noopener">Instagram ↗</a>
          <a href="https://www.tiktok.com/@lamialens" target="_blank" rel="noopener">TikTok ↗</a>
          <a href="https://www.youtube.com/@thelamialens" target="_blank" rel="noopener">YouTube ↗</a>
          <a href="mailto:info@lamialens.com">Email ↗</a>
        </div>
      </div>
      <div className="footer-massive">
        Lamia Lens
      </div>
      <div className="footer-bottom">
        <span>© 2026 LAMIA LENS</span>
      </div>
    </footer>);

}

Object.assign(window, { LensMethod, InquiryForm, Footer });