/* global React, ReactDOM */
const { useState, useEffect } = React;

/* ── Icons ──────────────────────────────────────── */
const ArrowRight = ({ size = 16 }) => (
  <svg width={size} height={size} viewBox="0 0 16 16" fill="none">
    <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);
const ArrowUpRight = ({ size = 14 }) => (
  <svg width={size} height={size} viewBox="0 0 14 14" fill="none">
    <path d="M4 10L10 4M10 4H5M10 4V9" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" />
  </svg>
);
const MenuIcon = () => (
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
    <path d="M2 4h10M2 10h10" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
  </svg>
);
const CloseIcon = () => (
  <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
    <path d="M3 3l8 8M11 3l-8 8" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
  </svg>
);

/* ── Nav ─────────────────────────────────────────── */
function Nav({ onOpen }) {
  const [scrolled, setScrolled] = useState(false);
  useEffect(() => {
    const fn = () => setScrolled(window.scrollY > 24);
    window.addEventListener("scroll", fn, { passive: true });
    fn();
    return () => window.removeEventListener("scroll", fn);
  }, []);
  return (
    <header className={"nav" + (scrolled ? " scrolled" : "")}>
      <a href="#top" className="nav-brand">
        <img src="assets/logo.png" alt="AvoryX" />
        <span>AvoryX<span className="dot">.</span>design</span>
      </a>
      <nav className="nav-links">
        <a href="#services">Services</a>
        <a href="#work">Work</a>
        <a href="#process">Process</a>
        <a href="#contact">Contact</a>
      </nav>
      <a href="#contact" className="nav-cta">Start a project</a>
      <button className="nav-menu-btn" onClick={onOpen} aria-label="Open menu">
        <MenuIcon /> Menu
      </button>
    </header>
  );
}

function MobileMenu({ open, onClose }) {
  return (
    <div className={"mobile-menu" + (open ? " open" : "")}>
      <div className="row">
        <a href="#top" className="nav-brand" onClick={onClose}>
          <img src="assets/logo.png" alt="AvoryX" />
          <span>AvoryX<span className="dot">.</span>design</span>
        </a>
        <button className="nav-menu-btn" onClick={onClose} aria-label="Close menu">
          <CloseIcon /> Close
        </button>
      </div>
      <nav>
        <a href="#services" onClick={onClose}>Services</a>
        <a href="#work" onClick={onClose}>Work</a>
        <a href="#process" onClick={onClose}>Process</a>
        <a href="#contact" onClick={onClose}>Contact</a>
      </nav>
      <div className="foot">
        <span>© 2026 AvoryX Design</span>
        <span>hello@avoryxdesign.com</span>
      </div>
    </div>
  );
}

/* ── Hero ────────────────────────────────────────── */
function Hero() {
  return (
    <section className="hero" id="top">
      <div className="glow" />
      <div className="hero-inner">
        <div className="kicker" style={{ marginBottom: 28 }}>Independent design studio — est. 2026</div>
        <h1>We design <em>quietly ambitious</em> websites.</h1>
        <p className="hero-sub">A two-person studio building hand-coded websites and digital tools for independent businesses across Europe.</p>
        <div className="hero-ctas">
          <a href="#work" className="btn-primary">See our work <ArrowRight /></a>
          <a href="#contact" className="btn-ghost">Get in touch</a>
        </div>
      </div>
      <div className="hero-meta">
        <span className="availability"><span className="pulse" /> Available for new projects</span>
        <span>Zurich &amp; Budapest</span>
      </div>
    </section>
  );
}

/* ── Services ────────────────────────────────────── */
const SERVICES = [
  {
    num: "01",
    title: "Web design",
    body: "Custom websites built from scratch. Landing pages, shops, portfolios — hand-coded, fast, and built around what you actually need.",
  },
  {
    num: "02",
    title: "Booking systems",
    body: "Reservation and appointment flows built into your site so customers can book without you picking up the phone.",
  },
  {
    num: "03",
    title: "Web applications",
    body: "Small custom tools that solve a specific problem — dashboards, order systems, internal utilities. Built around your workflow, not a template.",
  },
];

function Services() {
  return (
    <section className="services" id="services">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="kicker">Services</div>
            <h2>Three things.<br />Done well.</h2>
          </div>
          <p className="right">We keep the menu short on purpose. These are the three things we ship every week — no padding, no services we couldn't start on Monday.</p>
        </div>
        <div className="svc-list">
          {SERVICES.map(s => (
            <div className="svc-item" key={s.num}>
              <span className="svc-num">{s.num}</span>
              <h3>{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Work ────────────────────────────────────────── */
const WORK = [
  {
    size: "w-7",
    title: "Kohan Fashion",
    cat: "Personal blog & shop",
    year: "2026",
    href: "https://kohanfashion.ch",
    live: true,
    bg: "linear-gradient(150deg, #1c0d08 0%, #3d1c10 55%, #241009 100%)",
  },
  {
    size: "w-5",
    title: "Bex1 Barbershop",
    cat: "Barbershop template",
    year: "2026",
    href: "https://bex1.avorydesign.com",
    live: false,
    bg: "linear-gradient(150deg, #080808 0%, #131008 100%)",
  },
  {
    size: "w-5",
    title: "CSH1 Coffee",
    cat: "Coffee shop template",
    year: "2026",
    href: "https://csh1.avorydesign.com",
    live: false,
    bg: "linear-gradient(150deg, #0f0802 0%, #2b1907 55%, #180e03 100%)",
  },
  {
    size: "w-7",
    title: "RET1 Restaurant",
    cat: "Restaurant template",
    year: "2026",
    href: "https://ret1.avorydesign.com",
    live: false,
    bg: "linear-gradient(150deg, #020810 0%, #0c1f35 55%, #030d1c 100%)",
  },
];

function Work() {
  return (
    <section className="work" id="work">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="kicker">Selected work</div>
            <h2>Sites we've<br />designed and shipped.</h2>
          </div>
          <p className="right">One live client site we build and run day-to-day, plus three template demos showing how we approach different business types. Click any to open.</p>
        </div>
        <div className="work-grid">
          {WORK.map((w, i) => (
            <a className={"work-card " + w.size} key={i} href={w.href} target="_blank" rel="noopener noreferrer">
              <div className="work-art" style={{ background: w.bg }}>
                <span className="work-art-title">{w.title}</span>
                <div className="arrow"><ArrowUpRight /></div>
                {w.live && (
                  <span className="work-live"><span className="pulse" /> Live</span>
                )}
              </div>
              <div className="work-meta">
                <div className="left">
                  <h3>{w.title}</h3>
                  <div className="cat">{w.cat}</div>
                </div>
                <div className="year">{w.year}</div>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Process ─────────────────────────────────────── */
const STEPS = [
  {
    n: "01",
    title: "First email",
    body: "Tell us what you're building. A short back-and-forth to understand the scope and whether one of our existing templates already fits.",
  },
  {
    n: "02",
    title: "Brief",
    body: "We agree on direction, must-haves, and a fixed price before anything starts. No 40-page decks — a clear brief, a clear number.",
  },
  {
    n: "03",
    title: "Build",
    body: "Mark builds, Zoltan keeps you in the loop. Usually 24–72 hours from brief to a working build you can click through and review.",
  },
  {
    n: "04",
    title: "Handoff",
    body: "Files, hosting, domain — all sorted before the site goes live. Or we keep running it for you on a small monthly retainer.",
  },
];

function Process() {
  return (
    <section className="process" id="process">
      <div className="container">
        <div className="section-head">
          <div>
            <div className="kicker">Process</div>
            <h2>Four steps,<br />no surprises.</h2>
          </div>
          <p className="right">Every project runs the same way. You know the price before we start, the timeline before we build, and nothing changes without your sign-off.</p>
        </div>
        <div className="steps">
          {STEPS.map(s => (
            <div className="step" key={s.n}>
              <div className="step-num">{s.n}</div>
              <h4>{s.title}</h4>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

/* ── Contact ─────────────────────────────────────── */
function EuropeClock() {
  const [now, setNow] = useState(() => new Date());
  useEffect(() => {
    const id = setInterval(() => setNow(new Date()), 1000);
    return () => clearInterval(id);
  }, []);
  const time = now.toLocaleTimeString("en-GB", {
    timeZone: "Europe/Zurich",
    hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false,
  });
  const z = new Date(now.toLocaleString("en-US", { timeZone: "Europe/Zurich" }));
  const h = z.getHours() % 12, m = z.getMinutes(), s = z.getSeconds();
  return (
    <span className="clock-pill">
      <svg className="clock-face" viewBox="0 0 24 24" aria-hidden="true">
        <circle cx="12" cy="12" r="10.5" fill="none" stroke="currentColor" strokeOpacity="0.35" strokeWidth="1" />
        <circle cx="12" cy="12" r="0.9" fill="currentColor" />
        <line x1="12" y1="12" x2="12" y2="6.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" transform={`rotate(${(h + m/60)*30} 12 12)`} />
        <line x1="12" y1="12" x2="12" y2="4.5" stroke="currentColor" strokeWidth="1" strokeLinecap="round" transform={`rotate(${(m + s/60)*6} 12 12)`} />
        <line x1="12" y1="12" x2="12" y2="3.5" stroke="var(--blue)" strokeWidth="0.8" strokeLinecap="round" transform={`rotate(${s*6} 12 12)`} />
      </svg>
      <span className="clock-time">{time}</span>
      <span className="clock-tz">CET · Zurich / Budapest</span>
    </span>
  );
}

const FORMSPREE = "https://formspree.io/f/xykvylgd";

function Contact() {
  const [form, setForm] = useState({ name: "", email: "", company: "", message: "" });
  const [sent, setSent] = useState(false);
  const [sending, setSending] = useState(false);
  const [error, setError] = useState("");
  const set = k => e => setForm(f => ({ ...f, [k]: e.target.value }));

  const submit = async e => {
    e.preventDefault();
    if (!form.name || !form.email || !form.message) return;
    setSending(true); setError("");
    try {
      const res = await fetch(FORMSPREE, {
        method: "POST",
        headers: { "Content-Type": "application/json", Accept: "application/json" },
        body: JSON.stringify({ ...form, company: form.company || undefined }),
      });
      const data = await res.json();
      if (res.ok) setSent(true);
      else setError(data.error || "Something went wrong — please try again.");
    } catch {
      setError("Network error — please try again.");
    } finally {
      setSending(false);
    }
  };

  return (
    <section className="contact" id="contact">
      <div className="container contact-inner">
        <div className="kicker" style={{ marginBottom: 16 }}>Contact</div>
        <h2>Let's build <em>something good.</em></h2>
        <div className="contact-row">
          <div className="contact-info">
            <p>Tell us what you're working on. We reply within 1–2 business days and keep everything to email — no calls, no tools you have to learn.</p>
            <div className="row"><span className="k">Studio</span><span className="v"><a href="mailto:hello@avoryxdesign.com">hello@avoryxdesign.com</a></span></div>
            <div className="row"><span className="k">Mark</span><span className="v"><a href="mailto:mark@avoryxdesign.com">mark@avoryxdesign.com</a></span></div>
            <div className="row"><span className="k">Zoltan</span><span className="v"><a href="mailto:zoltan@avoryxdesign.com">zoltan@avoryxdesign.com</a></span></div>
            <div className="row"><span className="k">Based</span><span className="v based-v"><EuropeClock /></span></div>
          </div>
          {sent ? (
            <div className="form-success">
              <strong>Got it — thanks.</strong><br />We'll be in touch within the day.
            </div>
          ) : (
            <form className="contact-form" onSubmit={submit}>
              <div className="form-row">
                <div className="field">
                  <label htmlFor="name">Name</label>
                  <input id="name" type="text" value={form.name} onChange={set("name")} placeholder="Alex Doe" required />
                </div>
                <div className="field">
                  <label htmlFor="email">Email</label>
                  <input id="email" type="email" value={form.email} onChange={set("email")} placeholder="you@company.com" required />
                </div>
              </div>
              <div className="field">
                <label htmlFor="company">Company <span style={{ opacity: 0.4, textTransform: "none", letterSpacing: 0 }}>(optional)</span></label>
                <input id="company" type="text" value={form.company} onChange={set("company")} placeholder="—" />
              </div>
              <div className="field">
                <label htmlFor="message">Project brief</label>
                <textarea id="message" value={form.message} onChange={set("message")} placeholder="What are you building, and what would 'great' look like?" required />
              </div>
              {error && <p style={{ color: "#f87171", fontFamily: "var(--mono)", fontSize: 12, margin: "4px 0 0" }}>{error}</p>}
              <button className="submit-btn" type="submit" disabled={sending}>
                {sending ? "Sending…" : <React.Fragment>Send message <ArrowRight /></React.Fragment>}
              </button>
            </form>
          )}
        </div>
      </div>
    </section>
  );
}

/* ── Footer ──────────────────────────────────────── */
function Footer() {
  return (
    <footer className="footer">
      <div className="brand"><img src="assets/logo.png" alt="" /> AvoryX Design — © 2026</div>
      <div className="links">
        <a href="#services">Services</a>
        <a href="#work">Work</a>
        <a href="#process">Process</a>
        <a href="faq.html">FAQ</a>
        <a href="privacy.html">Privacy</a>
        <a href="terms.html">Terms</a>
        <a href="mailto:hello@avoryxdesign.com">hello@avoryxdesign.com</a>
      </div>
    </footer>
  );
}

/* ── App ─────────────────────────────────────────── */
function App() {
  const [menuOpen, setMenuOpen] = useState(false);

  useEffect(() => {
    const close = () => setMenuOpen(false);
    window.addEventListener("hashchange", close);
    return () => window.removeEventListener("hashchange", close);
  }, []);

  return (
    <React.Fragment>
      <Nav onOpen={() => setMenuOpen(true)} />
      <MobileMenu open={menuOpen} onClose={() => setMenuOpen(false)} />
      <Hero />
      <Services />
      <Work />
      <Process />
      <Contact />
      <Footer />
    </React.Fragment>
  );
}

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