/* global React, SERVICES, FOUNDERS, WHY, PROCESS, STACK */
const { useState, useEffect, useRef } = React;

// ---------- Custom Cursor ----------
function CustomCursor() {
  const dotRef = useRef(null);
  const ringRef = useRef(null);
  useEffect(() => {
    document.body.classList.add("cursor-active");
    let mx = window.innerWidth / 2,my = window.innerHeight / 2;
    let rx = mx,ry = my;
    let raf;
    const onMove = (e) => {
      mx = e.clientX;my = e.clientY;
      if (dotRef.current) dotRef.current.style.transform = `translate(${mx}px, ${my}px) translate(-50%, -50%)`;
    };
    const loop = () => {
      rx += (mx - rx) * 0.18;
      ry += (my - ry) * 0.18;
      if (ringRef.current) ringRef.current.style.transform = `translate(${rx}px, ${ry}px) translate(-50%, -50%)`;
      raf = requestAnimationFrame(loop);
    };
    const addHover = () => ringRef.current && ringRef.current.classList.add("hover");
    const removeHover = () => ringRef.current && ringRef.current.classList.remove("hover");
    const addText = () => ringRef.current && ringRef.current.classList.add("text");
    const removeText = () => ringRef.current && ringRef.current.classList.remove("text");

    window.addEventListener("mousemove", onMove);
    raf = requestAnimationFrame(loop);

    const hoverables = document.querySelectorAll("a, button, .service-card, .founder, .process-row, .stack-col li, input, select, textarea, .marquee-item");
    hoverables.forEach((el) => {
      const isText = el.matches("input, textarea, select");
      el.addEventListener("mouseenter", isText ? addText : addHover);
      el.addEventListener("mouseleave", isText ? removeText : removeHover);
    });

    return () => {
      cancelAnimationFrame(raf);
      window.removeEventListener("mousemove", onMove);
      hoverables.forEach((el) => {
        const isText = el.matches("input, textarea, select");
        el.removeEventListener("mouseenter", isText ? addText : addHover);
        el.removeEventListener("mouseleave", isText ? removeText : removeHover);
      });
      document.body.classList.remove("cursor-active");
    };
  }, []);

  return (
    <>
      <div ref={dotRef} className="cursor-dot" />
      <div ref={ringRef} className="cursor-ring" />
    </>);

}

// ---------- Scroll reveal ----------
function useReveal() {
  useEffect(() => {
    const els = document.querySelectorAll(".reveal");
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((e) => {
          if (e.isIntersecting) {
            e.target.classList.add("in");
            io.unobserve(e.target);
          }
        });
      },
      { threshold: 0.12 }
    );
    els.forEach((el) => io.observe(el));
    return () => io.disconnect();
  }, []);
}

// ---------- Nav ----------
function Nav() {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    onScroll();
    window.addEventListener("scroll", onScroll);
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  return (
    <nav className={`nav ${scrolled ? "scrolled" : ""}`}>
      <div className="container nav-inner" style={{ fontSize: "20px" }}>
        <a href="#top" className="nav-logo">
          <img src="assets/3ftech-logo.png" alt="3F Tech" style={{ objectFit: "fill", width: "100px", height: "40px" }} />
        </a>
        <div className="nav-links">
          <a href="#services">Services</a>
          <a href="#about">Team</a>
          <a href="#process">Process</a>
          <a href="#stack">Stack</a>
          <a href="#contact">Contact</a>
        </div>
        <a href="#contact" className="btn btn-primary">
          Get a Quote <span className="arrow">→</span>
        </a>
      </div>
    </nav>);

}

// ---------- Hero ----------
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="container">
        <div className="hero-top" style={{ opacity: "0" }}>
          <div className="hero-status">
            <span className="dot" style={{ backgroundColor: "rgb(183, 199, 189)" }} />
            
          </div>
          <div className="hero-meta">
            <div></div>
            <div><strong></strong></div>
          </div>
        </div>

        <h1 className="display" style={{ margin: "5px 0px 50px", padding: "0px" }}>
          We turn <em>ideas</em><br />into reality.
        </h1>

        <div className="hero-bottom">
          <p className="hero-lede">
            <strong>3F Tech</strong> is a fresh engineer-led agency. Three friends, three
            degrees, one mission — to build software, AI systems, and digital products
            that actually make a difference.
          </p>
          <div className="hero-actions">
            <a href="#contact" className="btn btn-primary">
              Start a project <span className="arrow">→</span>
            </a>
            <a href="#about" className="btn btn-ghost">
              Meet the team
            </a>
          </div>
        </div>
      </div>
    </section>);

}

// ---------- Marquee ----------
function Marquee() {
  const items = ["AI Automation", "Web Development", "App Development", "Graphic Design", "Cloud & Backend", "Tech Consulting"];
  const doubled = [...items, ...items];
  return (
    <div className="marquee">
      <div className="marquee-track">
        {doubled.map((t, i) =>
        <span className="marquee-item" key={i}>{t}</span>
        )}
      </div>
    </div>);

}

// ---------- Services ----------
function Services() {
  return (
    <section id="services">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">What we do</div>
            <h2 className="display" style={{ fontSize: "clamp(44px, 6vw, 88px)", marginTop: 16 }}>
              Our <em>services</em>
            </h2>
          </div>
          <p style={{ color: "var(--ink-60)", fontSize: 17, lineHeight: 1.55, margin: 0, maxWidth: "42ch" }}>
            Everything you need to build, launch, and grow your digital product — all under one roof, all from one small team.
          </p>
        </div>

        <div className="services-grid reveal">
          {SERVICES.map((s) =>
          <div className="service-card" key={s.num}>
              <div className="orange-slice" />
              <div className="num">
                <span>{s.num}</span>
                <span>Service</span>
              </div>
              <h3 style={{ fontFamily: "Inter" }}>{s.title}</h3>
              <p>{s.blurb}</p>
              <div className="tags">
                {s.tags.slice(0, 6).map((t) =>
              <span className="tag" key={t}>{t}</span>
              )}
              </div>
              <a href="#contact" className="svc-link">
                <span className="underline">Get a quote</span> →
              </a>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------- About / Team ----------
function About() {
  return (
    <section id="about">
      <div className="container">
        <div className="about-grid reveal">
          <div>
            <div className="eyebrow">Who we are</div>
            <h2 className="display" style={{ fontSize: "clamp(44px, 6vw, 88px)", marginTop: 16 }}>
              Three friends.<br />One <em>bold</em> vision.
            </h2>
          </div>
          <div className="about-copy">
            <p>
              We're <strong>Mehedi, Ahsan, and Johan</strong> — three mates who met at the
              University of Westminster and spent our degrees building things together. We
              graduated in 2025 and decided to build something of our own.
            </p>
            <p>
              <strong>3F Tech</strong> is our way of doing what we love — engineering
              smart, practical digital solutions for people with real problems to solve.
              We bring startup energy and engineering rigour to every project.
            </p>
            <div className="stats">
              <div className="stat"><div className="num"><em>3</em></div><div className="label">Co-founders</div></div>
              <div className="stat"><div className="num">BSc</div><div className="label">Qualified engineers</div></div>
              <div className="stat"><div className="num">'25</div><div className="label">Westminster grads</div></div>
              <div className="stat"><div className="num"><em>∞</em></div><div className="label">Ambition</div></div>
            </div>
          </div>
        </div>

        <div className="founders reveal">
          {FOUNDERS.map((f) =>
          <div className="founder" key={f.name}>
              <div className="avatar">{f.initial}</div>
              <div className="role-tag">Co-founder</div>
              <div className="name">{f.name}</div>
              <div className="title">{f.title}</div>
              <div className="bio">{f.bio}</div>
              <div className="edu">🎓 {f.edu}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------- Why ----------
function Why() {
  return (
    <section id="why">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">Why choose us</div>
            <h2 className="display" style={{ fontSize: "clamp(44px, 6vw, 88px)", marginTop: 16 }}>
              Fresh thinking.<br /><em>Real</em> engineering.
            </h2>
          </div>
        </div>
        <div className="why-grid reveal">
          {WHY.map((w) =>
          <div className="why-item" key={w.idx}>
              <div className="idx">{w.idx}</div>
              <h4>{w.h}</h4>
              <p>{w.p}</p>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------- Process ----------
function Process() {
  return (
    <section id="process">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">How we work</div>
            <h2 className="display" style={{ fontSize: "clamp(44px, 6vw, 88px)", marginTop: 16 }}>
              Simple. <em>Transparent.</em><br />Effective.
            </h2>
          </div>
          <p style={{ color: "var(--ink-60)", fontSize: 17, lineHeight: 1.55, margin: 0, maxWidth: "42ch" }}>
            From first conversation to launch — every step is deliberate and clear. No
            surprises, no scope creep, no confusion.
          </p>
        </div>

        <div className="process-list reveal">
          {PROCESS.map((p) =>
          <div className="process-row" key={p.n}>
              <div className="num">{p.n}</div>
              <h4>{p.h}</h4>
              <p>{p.p}</p>
              <div className="dur">{p.d}</div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------- Stack ----------
function Stack() {
  return (
    <section id="stack">
      <div className="container">
        <div className="section-head reveal">
          <div>
            <div className="eyebrow">Our stack</div>
            <h2 className="display" style={{ fontSize: "clamp(44px, 6vw, 88px)", marginTop: 16 }}>
              Technologies we <em>master</em>
            </h2>
          </div>
          <p style={{ color: "var(--ink-60)", fontSize: 17, lineHeight: 1.55, margin: 0, maxWidth: "42ch" }}>
            Modern, production-proven tools — no hype, just tech that gets the job done
            reliably at scale.
          </p>
        </div>

        <div className="stack-grid reveal">
          {STACK.map((col) =>
          <div className="stack-col" key={col.h}>
              <h5>{col.h}</h5>
              <ul>
                {col.items.map((it) => <li key={it}>{it}</li>)}
              </ul>
            </div>
          )}
        </div>
      </div>
    </section>);

}

// ---------- Contact ----------
function Contact() {
  const [submitted, setSubmitted] = useState(false);
  const submit = (e) => {
    e.preventDefault();
    setSubmitted(true);
    setTimeout(() => setSubmitted(false), 4000);
  };
  return (
    <section id="contact" style={{ padding: "clamp(40px, 6vw, 80px) 0" }}>
      <div className="contact">
        <div className="eyebrow" style={{ color: "rgba(255,255,255,0.5)" }}>
          <span style={{ background: "var(--orange)" }} className="eyebrow-dash" /> Get in touch
        </div>
        <h2 className="display" style={{ fontSize: "clamp(44px, 6.2vw, 96px)", marginTop: 20 }}>
          Let's build something <em>great</em>
        </h2>
        <p style={{ color: "rgba(255,255,255,0.65)", fontSize: 17, lineHeight: 1.55, maxWidth: "52ch", marginTop: 20 }}>
          Whether you have a clear brief or just a rough idea — reach out. We love a
          good conversation about what's possible.
        </p>

        <div className="contact-grid">
          <div className="contact-info">
            <div className="row">
              <div className="icon">✉</div>
              <div>
                <div className="label">Email us</div>
                <a href="mailto:hello@3ftech.co.uk" className="value">hello@3ftech.co.uk</a>
              </div>
            </div>
            <div className="row">
              <div className="icon">◎</div>
              <div>
                <div className="label">Based in</div>
                <div className="value">London, UK — working worldwide</div>
              </div>
            </div>
            <div className="row">
              <div className="icon">✦</div>
              <div>
                <div className="label">Background</div>
                <div className="value">University of Westminster, Class of '25</div>
              </div>
            </div>
            <div className="row">
              <div className="icon">⏱</div>
              <div>
                <div className="label">Response time</div>
                <div className="value">Within 24 hours, guaranteed</div>
              </div>
            </div>
          </div>

          <form className="form" onSubmit={submit}>
            <div>
              <label>Your name *</label>
              <input type="text" required placeholder="Jane Doe" />
            </div>
            <div>
              <label>Email *</label>
              <input type="email" required placeholder="jane@company.com" />
            </div>
            <div>
              <label>Company</label>
              <input type="text" placeholder="Acme Inc." />
            </div>
            <div>
              <label>Service</label>
              <select defaultValue="">
                <option value="" disabled>Select a service…</option>
                <option>AI Automation</option>
                <option>Web Development</option>
                <option>App Development</option>
                <option>Graphics & Design</option>
                <option>Cloud & Backend</option>
                <option>Tech Consulting</option>
                <option>Multiple Services</option>
              </select>
            </div>
            <div>
              <label>Budget</label>
              <select defaultValue="">
                <option value="" disabled>Select…</option>
                <option>Under £500</option>
                <option>£500 – £2,000</option>
                <option>£2,000 – £8,000</option>
                <option>£8,000 – £20,000</option>
                <option>£20,000+</option>
              </select>
            </div>
            <div>
              <label>Timeline</label>
              <select defaultValue="">
                <option value="" disabled>Select…</option>
                <option>ASAP</option>
                <option>1–2 months</option>
                <option>3–6 months</option>
                <option>Flexible</option>
              </select>
            </div>
            <div className="full">
              <label>Project brief</label>
              <textarea placeholder="Tell us what you're building — rough ideas welcome." />
            </div>
            <button type="submit" className="submit full" style={{ gridColumn: "span 2", justifySelf: "start" }}>
              {submitted ? "Message sent ✓" : "Send message →"}
            </button>
          </form>
        </div>
      </div>
    </section>);

}

// ---------- Footer ----------
function Footer() {
  return (
    <footer className="footer">
      <div className="container">
        <div className="footer-grid">
          <div className="footer-logo">
            <img src="assets/3ftech-logo.png" alt="3F Tech" />
            <p>Built by three friends from the University of Westminster who turned their engineering degrees into a business. We build software that matters.</p>
          </div>
          <div>
            <h6>Services</h6>
            <ul>
              {SERVICES.map((s) => <li key={s.num}><a href="#services">{s.title}</a></li>)}
            </ul>
          </div>
          <div>
            <h6>Company</h6>
            <ul>
              <li><a href="#about">Meet the team</a></li>
              <li><a href="#why">Why 3F Tech</a></li>
              <li><a href="#process">Our process</a></li>
              <li><a href="#stack">Tech stack</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div>
          <div>
            <h6>The founders</h6>
            <ul>
              <li><a href="#about">Mehedi — Software Eng.</a></li>
              <li><a href="#about">Ahsan — Computer Sci.</a></li>
              <li><a href="#about">Johan — Computer Sci.</a></li>
              <li><a href="#about">Westminster '25</a></li>
            </ul>
          </div>
        </div>
        <div className="footer-bottom">
          <div>© 2026 3F TECH · MEHEDI, AHSAN &amp; JOHAN · ALL RIGHTS RESERVED</div>
          <div className="socials">
            <a href="#" aria-label="LinkedIn">in</a>
            <a href="#" aria-label="GitHub">gh</a>
            <a href="#" aria-label="X">𝕏</a>
          </div>
        </div>
      </div>
    </footer>);

}

// ---------- App ----------
function App() {
  useReveal();
  return (
    <>
      <CustomCursor />
      <Nav />
      <Hero />
      <Marquee />
      <Services />
      <About />
      <Why />
      <Process />
      <Stack />
      <Contact />
      <Footer />
    </>);

}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);