import React, { useEffect, useRef, useState } from "react";
import { createRoot } from "react-dom/client";
import "./styles.css";

const services = [
  {
    number: "01",
    title: "Web Design & Development",
    text: "High-performance websites designed to make the right first impression — and built to convert.",
    tag: "Build"
  },
  {
    number: "02",
    title: "Web Application Development",
    text: "Custom digital products for businesses that need more than a brochure site.",
    tag: "Product"
  },
  {
    number: "03",
    title: "Brand & Graphic Design",
    text: "Distinct visual identities and systems that give every digital touchpoint a clear point of view.",
    tag: "Identity"
  },
  {
    number: "04",
    title: "SEO & Content Strategy",
    text: "Search-led strategy and useful content that compound visibility long after launch.",
    tag: "Visibility"
  },
  {
    number: "05",
    title: "Digital Marketing",
    text: "Focused campaigns, funnels and paid acquisition built around measurable business outcomes.",
    tag: "Growth"
  },
  {
    number: "06",
    title: "Social Media Handling",
    text: "Consistent channel management that keeps the brand sharp, active and unmistakably yours.",
    tag: "Ongoing"
  },
  {
    number: "07",
    title: "Managed Hosting & Security",
    text: "Reliable infrastructure, maintenance and protection that keeps everything running.",
    tag: "Care"
  }
];

function Arrow({ external = false }) {
  return (
    <span className="arrow" aria-hidden="true">
      {external ? "↗" : "→"}
    </span>
  );
}

function App() {
  const cursorRef = useRef(null);

  useEffect(() => {
    const revealItems = document.querySelectorAll(".reveal");
    const observer = new IntersectionObserver(
      (entries) => {
        entries.forEach((entry) => {
          if (entry.isIntersecting) {
            entry.target.classList.add("is-visible");
            observer.unobserve(entry.target);
          }
        });
      },
      { threshold: 0.12 }
    );

    revealItems.forEach((el) => observer.observe(el));

    const moveCursor = (e) => {
      if (!cursorRef.current) return;
      cursorRef.current.style.transform = `translate3d(${e.clientX}px, ${e.clientY}px, 0)`;
    };
    window.addEventListener("pointermove", moveCursor);

    return () => {
      observer.disconnect();
      window.removeEventListener("pointermove", moveCursor);
    };
  }, []);

  const scrollTo = (id) => {
    document.getElementById(id)?.scrollIntoView({ behavior: "smooth" });
  };

  return (
    <div className="site-shell">
      <div className="cursor-orb" ref={cursorRef} />

      <header className="nav">
        <a className="brand" href="#" aria-label="Primora Studio home">
          <img src="/logo-dark-bg.png" alt="Primora Studio" />
        </a>
        <nav className="nav-links">
          <button onClick={() => scrollTo("services")}>Services</button>
          <button onClick={() => scrollTo("approach")}>Approach</button>
          <button onClick={() => scrollTo("contact")}>Contact</button>
        </nav>
        <a className="nav-cta" href="mailto:hello@primorastudio.com">Start a project <Arrow /></a>
      </header>

      <main>
        <section className="hero">
          <div className="hero-grid" />
          <div className="hero-inner">
            <div className="eyebrow reveal"><span /> Independent digital studio</div>
            <h1 className="reveal delay-1">
              First in class.
              <br />
              <em>Built with intent.</em>
            </h1>
            <p className="hero-copy reveal delay-2">
              Primora Studio creates precise digital experiences for ambitious businesses —
              from the first pixel to long-term growth.
            </p>
            <div className="hero-actions reveal delay-3">
              <a className="button button-orange" href="mailto:hello@primorastudio.com">
                Start a project <Arrow />
              </a>
              <button className="text-button" onClick={() => scrollTo("services")}>
                Explore services <Arrow />
              </button>
            </div>
          </div>
          <div className="hero-meta">
            <span>Operating globally</span>
            <span>© {new Date().getFullYear()} Primora Studio</span>
          </div>
          <button className="scroll-cue" onClick={() => scrollTo("intro")} aria-label="Scroll to introduction">
            <span>Scroll</span><i />
          </button>
        </section>

        <section id="intro" className="intro section-light">
          <div className="container intro-grid">
            <div className="section-index reveal">/ 01</div>
            <div className="intro-main">
              <p className="kicker reveal">The name says it all.</p>
              <h2 className="reveal delay-1">
                <span>Primora</span> comes from <i>primus</i> — leading, foremost,
                of the highest order.
              </h2>
              <div className="intro-bottom reveal delay-2">
                <p>
                  We bring that standard to every engagement: thoughtful design,
                  disciplined development and work that earns its place.
                </p>
                <div className="line-note">Editorial. Precise. Confident. Restrained. Direct.</div>
              </div>
            </div>
          </div>
        </section>

        <section id="services" className="services section-dark">
          <div className="container">
            <div className="section-heading">
              <div className="section-index reveal">/ 02</div>
              <div>
                <p className="kicker orange reveal">What we do</p>
                <h2 className="reveal delay-1">One studio.<br /><span>Every layer.</span></h2>
              </div>
              <p className="heading-side reveal delay-2">
                A focused stack of services that follows the way digital projects actually grow.
              </p>
            </div>

            <div className="service-list">
              {services.map((service, index) => (
                <article className="service-row reveal" style={{ "--i": index }} key={service.number}>
                  <div className="service-number">{service.number}</div>
                  <div className="service-title-wrap">
                    <span className="service-tag">{service.tag}</span>
                    <h3>{service.title}</h3>
                  </div>
                  <p>{service.text}</p>
                  <span className="service-arrow"><Arrow /></span>
                </article>
              ))}
            </div>
          </div>
        </section>

        <section id="approach" className="approach section-off">
          <div className="container approach-grid">
            <div>
              <div className="section-index reveal">/ 03</div>
              <p className="kicker reveal delay-1">Our approach</p>
            </div>
            <div>
              <h2 className="reveal">Less noise.<br /><span>More signal.</span></h2>
              <div className="principles">
                <div className="principle reveal delay-1">
                  <span>01</span>
                  <div><h3>Clarity first</h3><p>Good work starts by knowing what matters — and removing everything that doesn't.</p></div>
                </div>
                <div className="principle reveal delay-2">
                  <span>02</span>
                  <div><h3>Design with purpose</h3><p>Every typeface, interaction and detail should move the experience forward.</p></div>
                </div>
                <div className="principle reveal delay-3">
                  <span>03</span>
                  <div><h3>Build to last</h3><p>Fast, maintainable and scalable foundations, not disposable launch-day websites.</p></div>
                </div>
              </div>
            </div>
          </div>
        </section>

        <section id="contact" className="contact section-orange">
          <div className="container contact-inner">
            <div className="section-index dark reveal">/ 04</div>
            <div className="contact-copy">
              <p className="kicker dark reveal">Have something worth building?</p>
              <h2 className="reveal delay-1">Let's make it<br /><i>first in class.</i></h2>

              <ContactForm />
            </div>
          </div>
        </section>
      </main>

      <footer className="footer">
        <div className="container footer-top">
          <img src="/logo-dark-bg.png" alt="Primora Studio" className="footer-logo" />
          <div className="footer-links">
            <a href="https://www.instagram.com/primorastudio/" target="_blank" rel="noreferrer">Instagram <Arrow external /></a>
            <a href="https://www.linkedin.com/company/primorastudio" target="_blank" rel="noreferrer">LinkedIn <Arrow external /></a>
            <a href="mailto:hello@primorastudio.com">Email <Arrow external /></a>
          </div>
        </div>
        <div className="container footer-bottom">
          <span>Operating globally</span>
          <span>Primora Studio — First in class.</span>
          <span>© {new Date().getFullYear()} Primora Studio. All rights reserved.</span>
        </div>
      </footer>
    </div>
  );
}

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

function ContactForm() {
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");
  const [service, setService] = useState("");
  const [notes, setNotes] = useState("");

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email || !service) {
      alert("Please provide your email and service requirement.");
      return;
    }
    const subject = `Website inquiry from ${name || "Anonymous"}`;
    const body = `Name: ${name}\nEmail: ${email}\nService requirement: ${service}\n\nAdditional notes:\n${notes || "None"}`;
    const mailto = `mailto:hello@primorastudio.com?subject=${encodeURIComponent(subject)}&body=${encodeURIComponent(body)}`;
    window.location.href = mailto;
  };

  return (
    <form className="contact-form reveal delay-2" onSubmit={handleSubmit}>
      <div className="form-row">
        <label className="form-label" htmlFor="contact-name">Name</label>
        <input id="contact-name" className="form-input" value={name} onChange={(e) => setName(e.target.value)} placeholder="Your name" />
      </div>
      <div className="form-row">
        <label className="form-label" htmlFor="contact-email">Email *</label>
        <input id="contact-email" className="form-input" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="you@example.com" required />
      </div>
      <div className="form-row">
        <label className="form-label" htmlFor="service-requirement">Service *</label>
        <select id="service-requirement" className="form-input" value={service} onChange={(e) => setService(e.target.value)} required>
          <option value="" disabled>Select a service</option>
          {services.map((item) => <option key={item.number}>{item.title}</option>)}
          <option>Something else</option>
        </select>
      </div>
      <div className="form-row">
        <label className="form-label" htmlFor="additional-notes">Notes</label>
        <textarea id="additional-notes" className="form-textarea" value={notes} onChange={(e) => setNotes(e.target.value)} placeholder="Tell us about your project" />
      </div>
      <div className="form-row">
        <button className="button button-orange" type="submit">Send message</button>
        <a className="text-button" href="mailto:hello@primorastudio.com">Or email us <Arrow external /></a>
      </div>
    </form>
  );
}