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

/* ─── Brand mark / Logo ──────────────────────────────────────────────── */
function BrandMark({ size = 13 }) {
  return (
    <a href="#top" className="brand" aria-label="Scalenic">
      <span className="dia" />
      <span>Scalenic</span>
    </a>);

}

/* ─── Nav ────────────────────────────────────────────────────────────── */
const NAV_ITEMS = [
{ id: "outcomes", label: "Outcomes" },
{ id: "about", label: "About" },
{ id: "services", label: "Services" },
{ id: "why", label: "Why this works" },
{ id: "faq", label: "FAQ" }];


function Nav({ onBook }) {
  const [scrolled, setScrolled] = useState(false);
  const [active, setActive] = useState(null);
  const [openMobile, setOpenMobile] = useState(false);

  useEffect(() => {
    const onScroll = () => {
      // Flip the nav from white (over hero) to ink (over cream) once we've
      // scrolled past most of the hero image.
      const hero = document.getElementById("top");
      const trigger = hero ? hero.offsetHeight - 80 : 120;
      setScrolled(window.scrollY > trigger);
    };
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Scroll-spy: highlight the section currently in view, and clear the
  // highlight entirely once no nav section occupies the active band.
  useEffect(() => {
    const sections = NAV_ITEMS
      .map((it) => document.getElementById(it.id))
      .filter(Boolean);
    if (!sections.length) return;
    const visible = new Set();
    const io = new IntersectionObserver(
      (entries) => {
        entries.forEach((en) => {
          if (en.isIntersecting) visible.add(en.target.id);
          else visible.delete(en.target.id);
        });
        // Last nav item (lowest on the page) that is currently in the band.
        let current = null;
        for (const it of NAV_ITEMS) if (visible.has(it.id)) current = it.id;
        setActive(current);
      },
      { rootMargin: "-64px 0px -55% 0px", threshold: 0 }
    );
    sections.forEach((s) => io.observe(s));
    return () => io.disconnect();
  }, []);

  const click = (e, id) => {
    setOpenMobile(false);
    setActive(id);
    // Let the global anchor handler (Lenis) handle the actual scroll;
    // it intercepts a[href^="#"] clicks. We only handle UI side-effects here.
    if (!window.__lenis) {
      e.preventDefault();
      const el = document.getElementById(id);
      if (el) {
        const top = el.getBoundingClientRect().top + window.scrollY - 70;
        window.scrollTo({ top, behavior: "smooth" });
      }
    }
  };

  return (
    <React.Fragment>
      <header className="nav-shell" data-scrolled={scrolled}>
        <nav className="nav">
          <BrandMark />
          <div className="nav-links">
            {NAV_ITEMS.map((it) =>
            <a
              key={it.id}
              href={`#${it.id}`}
              className="nav-link"
              data-active={active === it.id}
              onClick={(e) => click(e, it.id)}>
              
                {it.label}
              </a>
            )}
          </div>
          <div className="nav-meta">
            <span className="availability" style={{ display: "inline-flex", alignItems: "center", gap: 8 }}>
              <span className="dot" />
              Available · May &amp; June
            </span>
            <button className="btn btn-ghost btn-sm" onClick={onBook}>
              Book a 15-minute call
            </button>
            <button
              className="nav-burger"
              onClick={() => setOpenMobile(true)}
              aria-label="Open menu">
              
              Menu
            </button>
          </div>
        </nav>
      </header>

      <div className="mobile-sheet" data-open={openMobile}>
        <button className="mobile-sheet-close" onClick={() => setOpenMobile(false)}>Close</button>
        {NAV_ITEMS.map((it) =>
        <a key={it.id} href={`#${it.id}`} className="nav-link" onClick={(e) => click(e, it.id)}>
            {it.label}
          </a>
        )}
        <div style={{ marginTop: 24, display: "flex", flexDirection: "column", gap: 10 }}>
          <span style={{ fontSize: 12, color: "var(--muted)" }}>
            <span className="dot" style={{ display: "inline-block", width: 6, height: 6, background: "#2E7D5F", borderRadius: "50%", marginRight: 8 }} />
            Available for 2 projects · May &amp; June
          </span>
          <button className="btn" onClick={() => {setOpenMobile(false);onBook?.();}}>
            Book a 15-minute call <span className="arrow">→</span>
          </button>
        </div>
      </div>
    </React.Fragment>);

}

/* ─── Hero ───────────────────────────────────────────────────────────── */
function Hero({ variant, onBook, onWork }) {
  return (
    <section className="hero" id="top">
      <div className="hero-bg" aria-hidden="true"></div>
      <div className="hero-scrim" aria-hidden="true"></div>
      <div className="hero-inner narrow">
      {variant === "marquee" &&
        <div className="hero-marquee">
          <span>
            ◆ accepting briefs · ◆ 100+ shipped sites · ◆ founder-led businesses · ◆ hospitality &amp; jewelry · ◆ booked through June · ◆ accepting briefs · ◆ 100+ shipped sites · ◆ founder-led businesses · ◆ hospitality &amp; jewelry · ◆ booked through June ·
          </span>
        </div>
        }
      <p className="hero-top-cred">100+ projects launched since 2018.</p>
      <h1 className="h-display hero-display">
        Websites that bring you real business. Not just compliments.
      </h1>
      <p className="hero-sub">
        Brand, copy, website, the systems behind them.<br/>One designer, end-to-end.
      </p>
      <div className="hero-cta">
        <button className="btn" onClick={onBook}>
          Book a 15-minute call <span className="arrow">→</span>
        </button>
      </div>
      </div>
    </section>);

}

/* ─── Stats marquee ──────────────────────────────────────────────────── */
/* ─── Stats strip (replaces the marquee) ─────────────────────────────── */
const STATS = [
["100+", "projects launched since 2018"],
["$1M", "pre-seed raised by clients"],
["40+", "inbound leads / month"],
["25+", "direct bookings / month"],
["$70K", "grant secured at launch"],
["300+", "founder calls in"]];


function StatsStrip() {
  // doubled for seamless marquee
  const items = [...STATS, ...STATS];
  return (
    <div className="stats-strip">
      <div className="stats-track">
        {items.map((s, i) =>
        <span key={i} className="stat">
            <b>{s[0]}</b> {s[1]}
            <span className="sep" />
          </span>
        )}
      </div>
    </div>);

}

/* ─── Outcomes (case studies carousel) ───────────────────────────────── */
const CASE_ART = {
  hotel:
  <svg viewBox="0 0 340 180" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="art-hotel" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#E8B98C" />
          <stop offset="60%" stopColor="#C97E54" />
          <stop offset="100%" stopColor="#5B3220" />
        </linearGradient>
      </defs>
      <rect width="340" height="180" fill="url(#art-hotel)" />
      <g fill="rgba(0,0,0,0.45)">
        <path d="M40 180 V90 Q40 50 80 50 Q120 50 120 90 V180 Z" />
        <path d="M140 180 V90 Q140 50 180 50 Q220 50 220 90 V180 Z" />
        <path d="M240 180 V90 Q240 50 280 50 Q320 50 320 90 V180 Z" />
      </g>
      <g stroke="rgba(255,255,255,0.18)" fill="none" strokeWidth="1">
        <path d="M0 130 H340" />
        <path d="M0 150 H340" />
        <path d="M0 170 H340" />
      </g>
    </svg>,

  jewelry:
  <svg viewBox="0 0 340 180" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="art-jewel" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#1E3A2E" />
          <stop offset="100%" stopColor="#0B1A14" />
        </linearGradient>
      </defs>
      <rect width="340" height="180" fill="url(#art-jewel)" />
      <g transform="translate(170 92)" stroke="rgba(180,230,200,0.9)" fill="none" strokeWidth="1.2" strokeLinejoin="miter">
        <path d="M-60 -20 L0 -60 L60 -20 L0 70 Z" />
        <path d="M-60 -20 L60 -20" />
        <path d="M-60 -20 L0 70" />
        <path d="M60 -20 L0 70" />
        <path d="M-30 -42 L-30 -20" />
        <path d="M30 -42 L30 -20" />
        <path d="M-30 -20 L0 70" />
        <path d="M30 -20 L0 70" />
        <path d="M-30 -20 L0 -60" />
        <path d="M30 -20 L0 -60" />
      </g>
      <g fill="rgba(255,255,255,0.7)">
        <circle cx="80" cy="40" r="0.8" />
        <circle cx="260" cy="60" r="1" />
        <circle cx="60" cy="140" r="0.8" />
        <circle cx="290" cy="130" r="0.8" />
        <circle cx="120" cy="30" r="0.6" />
      </g>
    </svg>,

  restaurant:
  <svg viewBox="0 0 340 180" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="art-rest" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#3B1B14" />
          <stop offset="100%" stopColor="#1A0E0A" />
        </linearGradient>
      </defs>
      <rect width="340" height="180" fill="url(#art-rest)" />
      <g stroke="rgba(230,180,130,0.7)" fill="none" strokeWidth="1.2">
        <circle cx="80" cy="95" r="48" />
        <circle cx="80" cy="95" r="32" />
        <circle cx="80" cy="95" r="8" fill="rgba(230,180,130,0.4)" stroke="none" />
        <circle cx="180" cy="95" r="48" />
        <circle cx="180" cy="95" r="32" />
        <circle cx="180" cy="95" r="8" fill="rgba(230,180,130,0.4)" stroke="none" />
        <circle cx="280" cy="95" r="48" />
        <circle cx="280" cy="95" r="32" />
        <circle cx="280" cy="95" r="8" fill="rgba(230,180,130,0.4)" stroke="none" />
      </g>
      <line x1="0" y1="160" x2="340" y2="160" stroke="rgba(230,180,130,0.2)" strokeWidth="1" />
    </svg>,

  saas:
  <svg viewBox="0 0 340 180" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="art-saas" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#1B2030" />
          <stop offset="100%" stopColor="#0A0E18" />
        </linearGradient>
      </defs>
      <rect width="340" height="180" fill="url(#art-saas)" />
      <g fill="rgba(140,180,230,0.18)">
        {Array.from({ length: 14 * 7 }).map((_, i) => {
        const r = Math.floor(i / 14),c = i % 14;
        return <rect key={i} x={20 + c * 22} y={20 + r * 22} width="6" height="6" rx="1" />;
      })}
      </g>
      <polyline fill="none" stroke="rgba(180,220,255,0.9)" strokeWidth="1.5"
    points="20,140 65,120 110,128 155,80 200,92 245,55 290,68 320,40" />
      <g fill="rgba(180,220,255,1)">
        <circle cx="155" cy="80" r="2.5" />
        <circle cx="245" cy="55" r="2.5" />
        <circle cx="320" cy="40" r="2.5" />
      </g>
    </svg>,

  realestate:
  <svg viewBox="0 0 340 180" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="art-re" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor="#374252" />
          <stop offset="100%" stopColor="#161B22" />
        </linearGradient>
      </defs>
      <rect width="340" height="180" fill="url(#art-re)" />
      <g fill="rgba(0,0,0,0.45)">
        <rect x="30" y="60" width="50" height="120" />
        <rect x="90" y="30" width="60" height="150" />
        <rect x="160" y="80" width="44" height="100" />
        <rect x="214" y="50" width="58" height="130" />
        <rect x="282" y="100" width="40" height="80" />
      </g>
      <g fill="rgba(230,220,200,0.32)">
        {Array.from({ length: 6 * 6 }).map((_, i) => {
        const r = Math.floor(i / 6),c = i % 6;
        return <rect key={i} x={96 + c * 9} y={40 + r * 22} width="3" height="6" />;
      })}
        {Array.from({ length: 6 * 5 }).map((_, i) => {
        const r = Math.floor(i / 6),c = i % 6;
        return <rect key={`b${i}`} x={220 + c * 8.5} y={60 + r * 22} width="3" height="6" />;
      })}
      </g>
      <line x1="0" y1="180" x2="340" y2="180" stroke="rgba(255,255,255,0.1)" strokeWidth="2" />
    </svg>,

  fitness:
  <svg viewBox="0 0 340 180" preserveAspectRatio="xMidYMid slice">
      <defs>
        <linearGradient id="art-fit" x1="0" y1="0" x2="1" y2="1">
          <stop offset="0%" stopColor="#C84A24" />
          <stop offset="100%" stopColor="#3D1308" />
        </linearGradient>
      </defs>
      <rect width="340" height="180" fill="url(#art-fit)" />
      <g fill="rgba(0,0,0,0.55)">
        <path d="M70 30 L70 150 L100 150 L100 100 L180 150 L210 150 L210 30 L180 30 L180 80 L100 30 Z" />
      </g>
      <g stroke="rgba(255,255,255,0.18)" strokeWidth="1" fill="none">
        <path d="M0 170 H340" />
        <path d="M250 30 L290 30 M250 30 V70 M290 30 V70 M250 70 L290 70" />
        <circle cx="270" cy="50" r="14" />
      </g>
    </svg>

};

const CASES = [
{ id: 1, art: "saas", img: "assets/cases/bidmii.jpg", href: "https://www.behance.net/gallery/219195593/Home-Services-Platform-Startup-Website-and-app-design", meta: "SaaS", title: "Raised $1M pre-seed at launch", body: "Bidmii - home-services platform, Canada. 5,700+ users onboarded." },
{ id: 2, art: "hotel", img: "assets/cases/hotel.jpg", href: "https://www.behance.net/gallery/183997947/Forest-Hotel-Website-Strategy-Design-Case-Study", meta: "Hospitality", title: "20+ direct bookings every month", body: "Forest Hotel - boutique hospitality. Sustained post-launch." },
{ id: 3, art: "jewelry", img: "assets/cases/levendi.jpg", href: "https://www.behance.net/gallery/221035263/Levendi-E-shop-designed-for-Jewelry-founded-in-1967", meta: "E-commerce", title: "Repositioned a 1967 heritage house", body: "Levendi - fine jewelry, Australia. Built for how clients buy now." },
{ id: 4, art: "realestate", img: "assets/cases/ntkaunas.jpg", href: "https://www.behance.net/gallery/193196975/Real-Estate-Website-Strategy-Design-Case", meta: "Real estate", title: "40+ organic leads a month", body: "NT Kaunas - real estate, Lithuania. No paid ads." },
{ id: 5, art: "fitness", img: "assets/cases/carrepair.jpg", href: "https://www.behance.net/gallery/170639607/Car-Repair-App-Website-Redesign-Improving-conversions", meta: "Services", title: "1,000+ signups, $70K grant secured", body: "Car-repair app - services platform. Funded at launch." },
{ id: 6, art: "restaurant", img: "assets/cases/beautista.jpg", href: "https://beautista.com/", meta: "Beauty", title: "60K weekly visitors, +55% engagement", body: "Beautista - beauty platform, New York." }];


function Outcomes() {
  const railRef = useRef(null);
  const pausedRef = useRef(false);
  const dragRef = useRef({ active: false, startX: 0, startScroll: 0, moved: false });

  // Auto-scroll right-to-left, pause on hover/drag, loop seamlessly.
  // On mobile we skip the auto-scroll loop entirely - native touch scroll handles
  // it, and the JS loop would fight the user's finger.
  useEffect(() => {
    const el = railRef.current;
    if (!el) return;
    const isMobile = window.matchMedia("(max-width: 700px)").matches;
    if (isMobile) {
      el.scrollLeft = 0; // first card visible on mobile load
    }
    let raf;
    const SPEED = 0.85; // px per frame - medium speed
    const tick = () => {
      if (!isMobile && !pausedRef.current && !dragRef.current.active && el) {
        el.scrollLeft += SPEED;
        const half = el.scrollWidth / 2;
        if (el.scrollLeft >= half) el.scrollLeft -= half;
      }
      raf = requestAnimationFrame(tick);
    };
    raf = requestAnimationFrame(tick);

    const onEnter = () => {pausedRef.current = true;};
    const onLeave = () => {pausedRef.current = false;};
    el.addEventListener("pointerenter", onEnter);
    el.addEventListener("pointerleave", onLeave);
    el.addEventListener("focusin", onEnter);
    el.addEventListener("focusout", onLeave);

    // Mouse / touch drag
    const onDown = (e) => {
      if (e.pointerType === "mouse" && e.button !== 0) return;
      dragRef.current = {
        active: true,
        startX: e.clientX,
        startScroll: el.scrollLeft,
        moved: false,
        pointerId: e.pointerId
      };
      try {el.setPointerCapture(e.pointerId);} catch {}
    };
    const onMove = (e) => {
      const d = dragRef.current;
      if (!d.active) return;
      const dx = e.clientX - d.startX;
      if (!d.moved && Math.abs(dx) > 4) {
        d.moved = true;
        // Only mark as dragging once movement crosses the threshold - keeps
        // single clicks on case cards working
        el.classList.add("is-dragging");
      }
      if (!d.moved) return;
      const half = el.scrollWidth / 2;
      let next = d.startScroll - dx;
      // wrap around for seamless loop
      if (next < 0) next += half;
      if (next >= half) next -= half;
      el.scrollLeft = next;
    };
    const onUp = (e) => {
      const d = dragRef.current;
      if (!d.active) return;
      try {el.releasePointerCapture(d.pointerId);} catch {}
      dragRef.current = { ...d, active: false };
      el.classList.remove("is-dragging");
    };
    el.addEventListener("pointerdown", onDown);
    el.addEventListener("pointermove", onMove);
    el.addEventListener("pointerup", onUp);
    el.addEventListener("pointercancel", onUp);

    // Prevent click-through after a drag
    const onClickCapture = (ev) => {
      if (dragRef.current.moved) {
        ev.preventDefault();
        ev.stopPropagation();
        dragRef.current.moved = false;
      }
    };
    el.addEventListener("click", onClickCapture, true);

    return () => {
      cancelAnimationFrame(raf);
      el.removeEventListener("pointerenter", onEnter);
      el.removeEventListener("pointerleave", onLeave);
      el.removeEventListener("focusin", onEnter);
      el.removeEventListener("focusout", onLeave);
      el.removeEventListener("pointerdown", onDown);
      el.removeEventListener("pointermove", onMove);
      el.removeEventListener("pointerup", onUp);
      el.removeEventListener("pointercancel", onUp);
      el.removeEventListener("click", onClickCapture, true);
    };
  }, []);

  const scrollBy = (dir) => {
    const el = railRef.current;
    if (!el) return;
    const cardW = el.querySelector(".case-card")?.getBoundingClientRect().width || 340;
    pausedRef.current = true;
    el.scrollBy({ left: dir * (cardW + 16), behavior: "smooth" });
    setTimeout(() => {pausedRef.current = false;}, 1400);
  };

  // Duplicate the case list so the marquee loops seamlessly
  const loop = [...CASES, ...CASES];

  return (
    <section className="section" id="outcomes" data-screen-label="Outcomes">
      <div className="narrow">
        <div className="section-hd">
          <span className="eyebrow">outcomes</span>
          <h2 className="h-section">Real businesses.<br />Real numbers.</h2>
          <p className="lead">Six recent projects. The metrics aren’t decorative.</p>
        </div>
      </div>
      <div className="outcomes-wrap">
        <div className="outcomes-rail" ref={railRef}>
          {loop.map((c, i) =>
          <a
            key={i}
            href={c.href}
            target="_blank"
            rel="noopener"
            className="case-card"
            data-tone={i % 6 + 1}>
            
              <div className="case-visual"><img src={c.img} alt={c.title} loading="lazy" /></div>
              <div className="case-body">
                <div className="case-meta">{c.meta}</div>
                <h3>{c.title}</h3>
                <p>{c.body}</p>
              </div>
            </a>
          )}
        </div>
        <div className="rail-controls">
          <button className="rail-btn" aria-label="Previous" onClick={() => scrollBy(-1)}>←</button>
          <button className="rail-btn" aria-label="Next" onClick={() => scrollBy(1)}>→</button>
        </div>
      </div>
    </section>);

}

/* ─── Services ───────────────────────────────────────────────────────── */
const SVC_ICONS = {
  brand:
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square">
      <path d="M12 3 L21 12 L12 21 L3 12 Z" />
      <circle cx="12" cy="12" r="3" />
    </svg>,

  site:
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square">
      <rect x="3" y="4" width="18" height="16" />
      <path d="M3 9 H21" />
      <path d="M6.5 6.5 H7.5 M9 6.5 H10 M11.5 6.5 H12.5" />
    </svg>,

  copy:
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square">
      <path d="M4 6 H20" />
      <path d="M4 10 H16" />
      <path d="M4 14 H20" />
      <path d="M4 18 H13" />
    </svg>,

  growth:
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinecap="square">
      <path d="M3 18 L9 12 L13 16 L21 6" />
      <path d="M15 6 H21 V12" />
    </svg>

};

const SERVICES = [
{
  icon: "brand",
  h: "Brand identity that holds up",
  p: "Positioning, identity systems, brand books. Built from research. Never pulled from a template."
},
{
  icon: "copy",
  h: "Copy that sells what you do",
  p: "Words shaped with you, not just for you. Voice and layout get built together. That’s why they actually fit."
},
{
  icon: "site",
  h: "Website design and build",
  p: "Custom Webflow or Framer sites. Mobile-first. Built to turn visitors into leads, not just look polished. No templates, no compromises."
},
{
  icon: "growth",
  h: "Marketing that grows your sales and pipeline",
  p: "A site you can edit yourself. Forms that capture leads while you sleep. Free downloads that grow your email list. Email sequences that keep selling for you. Built in from day one, not bolted on later."
}];


function Services() {
  return (
    <section className="section" id="services" data-screen-label="Services">
      <div className="narrow">
        <div className="section-hd">
          <span className="eyebrow">services</span>
          <h2 className="h-section">Brand, copy, website, the systems behind them. One project.</h2>
          <p className="lead">Why hire four freelancers when one person handles all of it.</p>
        </div>
        <div className="services-list">
          {SERVICES.map((s, i) =>
          <div key={i} className="service-item" tabIndex={0}>
              <div className="check">{SVC_ICONS[s.icon]}</div>
              <div>
                <h3>{s.h}</h3>
                <p>{s.p}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ─── Why this works ─────────────────────────────────────────────────── */
const SKIPS = [
{ ico: "01", step: "Strategy", h: "Build the funnel before the pixels.", p: "The site supports a real funnel before it looks good in a Figma export. Every block earns its spot." },
{ ico: "02", step: "Voice", h: "Write the copy and design as one.", p: "No separate writer to hire. The message and the layout get shaped together. That’s how they end up fitting." },
{ ico: "03", step: "Research", h: "Study the market before the first sketch.", p: "Competitors, users, positioning. All studied before any artboard opens. The first sketch already knows what wins." },
{ ico: "04", step: "Delivery", h: "Ship in days, not quarters.", p: "Landing pages have shipped in under four days when there’s a deadline. You won’t have to babysit the process." },
{ ico: "05", step: "Ownership", h: "Work with the person who builds it.", p: "UX, UI, copy, build, handover. No agency relay race. No account managers. No ‘let me check with the team.’" },
{ ico: "06", step: "Proof", h: "Show the work before you sign.", p: "300+ founder calls in, what closes work is real proof. Not slide theatrics. You’ll know the work before you sign." }];


function WhyThisWorks() {
  return (
    <section className="section" id="why" data-screen-label="Why this works">
      <div className="narrow">
        <div className="section-hd">
          <span className="eyebrow">why this works</span>
          <h2 className="h-section">What you get when one designer owns it all.</h2>
          <p className="lead">Pretty isn’t the job. These are.</p>
        </div>
        <div className="skip-timeline">
          {SKIPS.map((s) =>
          <div key={s.ico} className="skip-row">
              <div className="skip-node">{s.ico}</div>
              <div className="skip-content">
                <span className="skip-step">{s.step}</span>
                <h4>{s.h}</h4>
                <p dangerouslySetInnerHTML={{ __html: s.p }} />
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ─── About ──────────────────────────────────────────────────────────── */
function About({ onBook }) {
  return (
    <section className="section" id="about" data-screen-label="About">
      <div className="narrow">
        <div className="section-hd">
          <span className="eyebrow">about</span>
          <h2 className="h-section">I help founders turn their site into the asset that actually closes.</h2>
        </div>
        <div className="about">
          <div className="about-photo">
            <img src="assets/igor.png" alt="Igor - portrait" />
          </div>
          <div className="about-bio">
            <a className="badge" href="https://www.upwork.com/freelancers/igorwebsite" target="_blank" rel="noopener">Top Rated on Upwork</a>
            <h4>Hi, I’m Igor.</h4>
            <p className="role">Brand &amp; Web Designer · since 2018</p>
            <p>
              100+ projects shipped for founders and local businesses across SaaS, hospitality, real estate, jewelry, restaurants, services. Anywhere the website actually has to move the numbers.
            </p>
            <p>
              The practice is small on purpose. A few projects per quarter, one at a time. If you’ve built something worth showing properly - a founder-led startup, a local business with real customers, a hotel or restaurant doing serious work - this is what it’s for.
            </p>
            <div className="about-cta">
              <a href="https://www.upwork.com/freelancers/igorwebsite" target="_blank" rel="noopener" className="link">Check my Upwork profile →</a>
            </div>
          </div>
        </div>
      </div>
    </section>);

}

/* ─── FAQ ────────────────────────────────────────────────────────────── */
const FAQS = [
{ q: "What does a project actually cost?",
  a: "Minimum engagement is $1K. Real number depends on scope and gets locked on the 15-minute call once I see what you actually need. No quote-by-form roulette." },
{ q: "How long from start to launch?",
  a: "A focused landing page can ship in under four days when there’s a deadline. Full brand + website projects usually take 3 to 6 weeks. Real timeline gets nailed on the call. Depends on what you have ready and how fast you can give feedback." },
{ q: "What do I need to have ready?",
  a: "Honestly, not much. Bring whatever you’ve got. A rough sense of what you do, who you serve, what’s not working. I’ll handle the rest, copy included. Most clients arrive with less than they think they need." },
{ q: "Will you handle the copy, or do I need a copywriter?",
  a: "You write the first draft of what you want to say. I revise alongside the design so voice and layout fit together. No separate copywriter to hire, no message-meets-layout mismatch." },
{ q: "What platform will the site be built on?",
  a: "Webflow, Framer, WordPress, or fully custom-coded - depends on what your business actually needs. All of them give you a clean way to update content yourself after launch, no developer dependency for routine changes." },
{ q: "What if we get stuck or our visions don’t align?",
  a: "Alignment checkpoints are built into the process. At strategy, at design, before build. If something feels off, we stop and talk. Phased payments mean you’re never locked in beyond the next milestone." },
{ q: "Can I update the site myself after launch?",
  a: "Yes. The site is set up so you can edit copy, swap images, publish blog posts, manage content without touching code. I’ll walk you through it on handover. Short training, written notes you can reference later." }];


function Faq() {
  const [open, setOpen] = useState(null);
  return (
    <section className="section" id="faq" data-screen-label="FAQ">
      <div className="narrow">
        <div className="section-hd">
          <span className="eyebrow">faq</span>
          <h2 className="h-section">Before you book, what most people ask.</h2>
          <p className="lead">If you’re hovering over the button, one of these is probably the reason.</p>
        </div>
        <div className="faq-list">
          {FAQS.map((f, i) =>
          <div key={i} className="faq-item" data-open={open === i}>
              <button
              className="faq-q"
              onClick={() => setOpen(open === i ? null : i)}
              aria-expanded={open === i}>
              
                <span>{f.q}</span>
                <span className="plus" aria-hidden />
              </button>
              <div className="faq-a">
                <p>{f.a}</p>
              </div>
            </div>
          )}
        </div>
      </div>
    </section>);

}

/* ─── Booking ────────────────────────────────────────────────────────── */
const CAL_URL = "https://cal.com/igorsalagin/15min";

const DOWS = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
const MO_NAMES = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
const TIMES = ["11:00am", "11:15am", "11:30am", "11:45am", "12:00pm", "12:15pm", "12:30pm", "12:45pm", "1:00pm", "1:30pm"];

function Calendar({ value, onChange }) {
  // start on the 1st of the current month, but anchor demo to May 2026 like figma
  const [view, setView] = useState({ y: 2026, m: 4 }); // May = idx 4
  const firstDay = new Date(view.y, view.m, 1).getDay();
  const daysInMo = new Date(view.y, view.m + 1, 0).getDate();
  const today = new Date();
  const isThisMonth = today.getFullYear() === view.y && today.getMonth() === view.m;

  const cells = [];
  for (let i = 0; i < firstDay; i++) cells.push(null);
  for (let d = 1; d <= daysInMo; d++) cells.push(d);
  while (cells.length % 7 !== 0) cells.push(null);

  const move = (d) => {
    let m = view.m + d,y = view.y;
    if (m < 0) {m = 11;y--;}
    if (m > 11) {m = 0;y++;}
    setView({ y, m });
  };

  return (
    <div className="cal">
      <div className="cal-hd">
        <div>
          <span className="mo">{MO_NAMES[view.m]}</span>
          <span className="yr">{view.y}</span>
        </div>
        <div className="cal-nav">
          <button onClick={() => move(-1)} aria-label="Previous month">‹</button>
          <button onClick={() => move(1)} aria-label="Next month">›</button>
        </div>
      </div>
      <div className="cal-grid">
        {DOWS.map((d) => <div key={d} className="dow">{d}</div>)}
        {cells.map((d, i) => {
          if (d === null) return <button key={i} className="cal-day" disabled aria-hidden tabIndex={-1} />;
          // Disable weekends + past
          const date = new Date(view.y, view.m, d);
          const dow = date.getDay();
          const past = date < new Date(today.getFullYear(), today.getMonth(), today.getDate()) && !(view.y === 2026 && view.m === 4);
          const closed = dow === 0 || dow === 6;
          const isToday = isThisMonth && d === today.getDate();
          const selected = value && value.y === view.y && value.m === view.m && value.d === d;
          return (
            <button
              key={i}
              className="cal-day"
              onClick={() => !closed && !past && onChange({ y: view.y, m: view.m, d })}
              disabled={closed || past}
              data-state={selected ? "selected" : ""}
              data-today={isToday}>
              
              {d}
            </button>);

        })}
      </div>
    </div>);

}

function Booking() {
  const [copied, setCopied] = useState(false);
  const copy = () => {
    const email = "igor@scalenic.com";
    const fallback = () => {
      try {
        const ta = document.createElement("textarea");
        ta.value = email;
        ta.setAttribute("readonly", "");
        ta.style.position = "fixed";
        ta.style.top = "-9999px";
        document.body.appendChild(ta);
        ta.select();
        document.execCommand("copy");
        document.body.removeChild(ta);
      } catch (e) {/* no-op */}
    };
    if (navigator.clipboard && navigator.clipboard.writeText) {
      navigator.clipboard.writeText(email).catch(fallback);
    } else {
      fallback();
    }
    setCopied(true);
    setTimeout(() => setCopied(false), 1600);
  };

  useEffect(() => {
    // Cal.com inline embed initializer
    (function (C, A, L) {
      let p = function (a, ar) {a.q.push(ar);};
      let d = C.document;
      C.Cal = C.Cal || function () {
        let cal = C.Cal;let ar = arguments;
        if (!cal.loaded) {
          cal.ns = {};cal.q = cal.q || [];
          d.head.appendChild(d.createElement("script")).src = A;
          cal.loaded = true;
        }
        if (ar[0] === L) {
          const api = function () {p(api, arguments);};
          const namespace = ar[1];
          api.q = api.q || [];
          if (typeof namespace === "string") {
            cal.ns[namespace] = cal.ns[namespace] || api;
            p(cal.ns[namespace], ar);
            p(cal, ["initNamespace", namespace]);
          } else p(cal, ar);
          return;
        }
        p(cal, ar);
      };
    })(window, "https://app.cal.com/embed/embed.js", "init");

    window.Cal("init", "scalenic-15min", { origin: "https://cal.com" });
    window.Cal.ns["scalenic-15min"]("inline", {
      elementOrSelector: "#cal-embed-scalenic",
      config: { layout: "month_view", theme: "light" },
      calLink: "igorsalagin/15min"
    });
    window.Cal.ns["scalenic-15min"]("ui", {
      theme: "light",
      cssVarsPerTheme: {
        light: { "cal-brand": "#0F0F0F" },
        dark: { "cal-brand": "#F6F4EF" }
      },
      hideEventTypeDetails: false,
      layout: "month_view"
    });
  }, []);

  return (
    <section className="section" id="book" data-screen-label="Booking">
      <div className="narrow">
        <div className="section-hd">
          <span className="eyebrow">let’s talk</span>
          <h2 className="h-section">More leads. More sales.<br />The whole thing handled.</h2>
          <p className="lead">
            I take brand, copy, website and the systems behind them, end-to-end. You stay focused on running the business. Pick a 15-minute slot. If we’re not a fit, I’ll tell you straight.
          </p>
        </div>

        <div className="booking-card">
          <div id="cal-embed-scalenic" className="cal-embed" />
        </div>

        <div className="email-row">
          <span className="email-row-label">Or just email:</span>
          <div className="email-row-actions">
            <a href="mailto:igor@scalenic.com" className="email-val">igor@scalenic.com</a>
            <button className="copy-btn" data-copied={copied} onClick={copy}>
              {copied ?
              <React.Fragment>
                  <svg viewBox="0 0 24 24" aria-hidden="true"><path d="M5 12l4 4 10-10" /></svg>
                  Copied
                </React.Fragment> :

              <React.Fragment>
                  <svg viewBox="0 0 24 24" aria-hidden="true">
                    <rect x="9" y="9" width="11" height="11" rx="2" />
                    <path d="M5 15V6a2 2 0 0 1 2-2h9" />
                  </svg>
                  Copy email
                </React.Fragment>
              }
            </button>
          </div>
        </div>
      </div>
    </section>);

}

/* ─── Final CTA + Footer ─────────────────────────────────────────────── */
function FinalCta({ onBook }) {
  return (
    <section className="cta-final">
      <div className="narrow cta-final-inner">
        <div className="cta-final-cred">
          <img className="cta-final-avatar" src="assets/igor-avatar.png" alt="Igor Šalagin" width="56" height="56" />
          <span className="cta-final-cred-text">
            <strong>Igor Šalagin</strong>
            <span className="cta-final-cred-sub">Shipped 65 websites</span>
          </span>
        </div>
        <h2 className="h-section" style={{ maxWidth: 640 }}>
          Look and sell like the<br />serious business you<br />already are.
        </h2>
        <button className="btn" onClick={onBook}>
          Book a 15-minute call <span className="arrow">→</span>
        </button>
      </div>
    </section>);

}

function Footer() {
  return (
    <footer className="footer">
      <div className="narrow footer-inner">
        <div className="footer-brand-row">
          <a className="footer-brand" href="#top">
            <span className="footer-dia"></span>
            <span>Scalenic</span>
          </a>
          <span className="footer-loc">· Tallinn, Estonia · 2026</span>
        </div>
        <div className="links">
          <a href="mailto:igor@scalenic.com">Email</a>
          <a href="https://www.linkedin.com/in/igor-salagin/" target="_blank" rel="noopener">LinkedIn</a>
          <a href="https://x.com/igorexit" target="_blank" rel="noopener">X</a>
          <a href="https://www.threads.com/@igor.desi" target="_blank" rel="noopener">Threads</a>
          <a href="/privacy">Privacy</a>
        </div>
      </div>
    </footer>);

}

/* ─── Export to window for app.jsx ───────────────────────────────────── */
Object.assign(window, {
  Nav, Hero, StatsStrip, Outcomes, Services, WhyThisWorks, About, Faq, Booking, FinalCta, Footer
});