/* global React, Icon, MockVerimatrix, MockPTO, MockRenoir, MockWithin3, MockNexus, MockBima */
const { useState } = React;

const Nav = () =>
<nav className="nav" aria-label="Primary">
    <div className="nav-inner">
      <span className="nav-brand"><span className="dot" />Razaq Atayee</span>
      <div className="nav-links">
        <a href="#services">Services</a>
        <a href="#work">Work</a>
        <a href="#pricing">Pricing</a>
        <a href="#faq">FAQ</a>
      </div>
      <div className="nav-actions">
        <a className="nav-social wa" href="https://wa.me/60182528912" target="_blank" rel="noreferrer" aria-label="WhatsApp">
          <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
            <path fill="#25D366" d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.74.46 3.43 1.32 4.92L2 22l5.31-1.39a9.9 9.9 0 0 0 4.73 1.21h.01c5.46 0 9.91-4.45 9.91-9.91 0-2.65-1.03-5.14-2.9-7.02A9.84 9.84 0 0 0 12.04 2Zm0 18.13h-.01a8.2 8.2 0 0 1-4.18-1.15l-.3-.18-3.15.83.84-3.07-.2-.32a8.2 8.2 0 0 1-1.26-4.34c0-4.54 3.7-8.23 8.25-8.23a8.2 8.2 0 0 1 5.83 2.42 8.2 8.2 0 0 1 2.41 5.83c0 4.54-3.7 8.21-8.23 8.21Zm4.51-6.16c-.25-.12-1.46-.72-1.69-.8-.23-.08-.39-.12-.56.12-.16.25-.64.8-.79.97-.14.16-.29.18-.54.06-.25-.12-1.04-.38-1.98-1.22-.73-.65-1.22-1.45-1.37-1.7-.14-.25-.02-.39.11-.51.11-.11.25-.29.37-.43.12-.14.16-.25.25-.41.08-.16.04-.31-.02-.43-.06-.12-.56-1.34-.76-1.84-.2-.49-.4-.42-.56-.43-.14-.01-.31-.01-.47-.01-.16 0-.43.06-.66.31s-.86.84-.86 2.05.88 2.38 1 2.55c.12.16 1.74 2.65 4.21 3.71 1.47.63 2.04.69 2.78.58.45-.07 1.46-.59 1.67-1.17.21-.58.21-1.08.14-1.18-.07-.1-.23-.16-.48-.28Z"/>
          </svg>
        </a>
        <a className="nav-social tg" href="https://t.me/razaqatayee" target="_blank" rel="noreferrer" aria-label="Telegram">
          <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
            <path fill="#229ED9" d="M21.94 4.66c.21-.96-.34-1.34-.97-1.1L2.65 10.7c-.96.38-.95.93-.17 1.17l4.7 1.46 10.91-6.88c.51-.32.98-.14.59.18l-8.83 7.97-.34 4.88c.4 0 .57-.17.78-.38l1.87-1.81 3.88 2.86c.71.39 1.22.19 1.4-.66l2.5-11.83Z"/>
          </svg>
        </a>
        <a className="nav-cta" href="booking.html" target="_blank" rel="noreferrer">
          Book a call
        </a>
      </div>
    </div>
  </nav>;


const heroPillItems = [
  { photo: "assets/testi-mogan.jpg", quote: "creativity with empathy, logic with simplicity." },
  { photo: "assets/testi-admu.jpg", quote: "a super machine. Kick him off and he delivers." },
  { photo: "assets/testi-asraf.jpg", quote: "tremendous talent. A man with many talents." },
  { photo: "assets/testi-mohamed.jpg", quote: "great at UI/UX, handles pressure, organised." }
];

const HeroPill = () => {
  const [i, setI] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => setI((n) => (n + 1) % heroPillItems.length), 3800);
    return () => clearInterval(id);
  }, []);
  const item = heroPillItems[i];
  return (
    <a className="hero-testi-pill" href="#testimonials" aria-label="See client testimonials">
      <span className="cta-avatar" key={"a" + i}><img src={item.photo} alt="" /></span>
      <em key={"q" + i}>"…{item.quote}"</em>
    </a>
  );
};

const Hero = ({ headline }) =>
<header className="hero" id="top">
    <div className="hero-bg" aria-hidden="true">
      <div className="hero-grid" />
      <div className="hero-glow" />
      <div className="hero-glow b" />
      <div className="hero-grain" />
      <div className="hero-vignette" />
    </div>
    <div className="container">
      <HeroPill />
      <h1>
        {headline.split("|").map((part, i) =>
      i === 1 ?
      <span key={i} className="accent">{part}</span> :
      <React.Fragment key={i}>{part}</React.Fragment>
      )}
      </h1>
      <p className="hero-sub">
        Full-package websites for DTC brands. Strategy, design, and build by one person, in weeks not quarters.
      </p>
      <div className="hero-ctas">
        <a className="btn btn-primary btn-lg cta-with-avatar" href="booking.html" target="_blank" rel="noreferrer">
          <span className="cta-avatar lg"><img src="assets/razaq.png" alt="" style={{ opacity: "1" }} /></span>
          Book a free 20-min call <span className="arr"><Icon name="arrow" size={16} /></span>
        </a>
        <a className="btn btn-ghost btn-lg" href="#work">See my work</a>
      </div>
      <div className="hero-spots"><span className="pulse" />3 Spots Available</div>
      <div className="hero-proof">
        <div className="proof-avatars">
          <span>MK</span><span>JL</span><span>RA</span><span>+</span>
        </div>
        <span className="proof-stars">★★★★★</span>
        <span>40+ founders across the US, EU and SEA</span>
      </div>
    </div>
  </header>;


const services = [
{ num: "01", emoji: "🎨",
  title: "Brand-led design",
  body: "Looks like your brand, not a template. Built to convert before a line of code is written." },
{ num: "02", emoji: "🛠️",
  title: "Full-package builds",
  body: "WordPress, Shopify, or fully custom. Fast, accessible, SEO-tight, handed over documented." },
{ num: "03", emoji: "📈",
  title: "Conversion & growth",
  body: "Audits, A/B tests, and rewrites for pages that aren't pulling their weight. Real revenue, no vanity charts." },
{ num: "04", emoji: "🤝",
  title: "Fractional partner",
  body: "Embedded with your team. Landing pages, launches, and the steady work between them." }];


const Services = () =>
<section className="section" id="services">
    <div className="container">
      <div className="section-row">
        <div className="section-head">
          <span className="eyebrow">What I do</span>
          <h2>Four things, done seriously.</h2>
        </div>
        <p style={{ color: "var(--text-muted)", maxWidth: "32ch", fontSize: 16 }}>
          Not a generalist. Everything below is what I ship, repeatedly, for brands that come back.
        </p>
      </div>

      <div className="services-grid">
        {services.map((s) =>
      <article key={s.num} className="service-card reveal">
            <span className="num">{s.num}</span>
            <div className="service-icon" aria-hidden="true">{s.emoji}</div>
            <h3>{s.title}</h3>
            <p>{s.body}</p>
          </article>
      )}
      </div>
    </div>
  </section>;


const How = () =>
<section className="how section" id="how">
    <div className="container">
      <div className="section-head">
        <span className="eyebrow">How it works</span>
        <h2>From first call to live site in three moves.</h2>
      </div>
    </div>
    <div className="container" style={{ padding: 0 }}>
      <div className="container">
        <div className="how-grid">
          {[
        { n: "01", t: "Discover", b: "A 20-min call, a focused audit. We agree on the problem worth solving.", d: "Week 1" },
        { n: "02", t: "Design", b: "Strategy, copy direction, and high-fidelity design, before anyone touches code.", d: "Weeks 2–3" },
        { n: "03", t: "Deliver", b: "Build, QA, migrate, launch. Plus 30 days of post-launch tuning.", d: "Weeks 4–6" }].
        map((s) =>
        <div key={s.n} className="how-step reveal">
              <span className="num">{s.n}</span>
              <h3>{s.t}</h3>
              <p>{s.b}</p>
              <span className="duration">{s.d}</span>
            </div>
        )}
        </div>
      </div>
    </div>
  </section>;


const projects = [
{ shot: "assets/work/verimatrix.png", name: "Verimatrix", url: "verimatrix.com", tag: "Cybersecurity", desc: "Enterprise rebuild for a NASDAQ-listed video-security company." },
{ shot: "assets/work/pto.png", name: "Pro Triathletes Organisation", url: "protriathletes.org", tag: "Sports", desc: "Live-event hub for the world's top 100 triathletes and the T100 World Tour." },
{ shot: "assets/work/within3.png", name: "Within3", url: "within3.com", tag: "Life Sciences", desc: "Insights platform repositioning for a pharma intelligence SaaS." },
{ shot: "assets/work/nexus.png", name: "Nexus International School", url: "nexus.edu.my", tag: "Education", desc: "Admissions-driven site for an IB international school in Putrajaya." },
{ video: "https://www.youtube-nocookie.com/embed/wbZFGFDO0zY?autoplay=1&mute=1&loop=1&controls=0&showinfo=0&modestbranding=1&playlist=wbZFGFDO0zY&playsinline=1&rel=0&iv_load_policy=3", name: "Bima Visuals", url: "bimavisuals.com", tag: "Production Studio", desc: "Cinematic portfolio site for a Kuala Lumpur film and stills studio." }];


const Work = () =>
<section className="section" id="work">
    <div className="container">
      <div className="section-row">
        <div className="section-head">
          <span className="eyebrow">Selected work</span>
          <h2>Sites that earn their place on the homepage.</h2>
        </div>
        <a className="btn btn-ghost" href="#contact">
          Request the full case studies <span className="arr"><Icon name="arrow" size={16} /></span>
        </a>
      </div>

      <div className="work-grid">
        {projects.map(({ shot, video, name, url, tag, desc }) =>
      <a key={name} className="work-card reveal" href={`https://${url}`} target="_blank" rel="noreferrer">
            <div className="work-mock">
              {video
                ? <iframe
                    className="work-video"
                    src={video}
                    title={name}
                    frameBorder="0"
                    allow="autoplay; encrypted-media; picture-in-picture"
                    allowFullScreen
                    loading="lazy"
                  />
                : <img className="work-shot" src={shot} alt={name} loading="lazy" />}
            </div>
            <div className="work-overlay">
              <span className="work-tag"><span className="pip" />{tag}</span>
              <div className="work-name">{name}<Icon name="arrow-out" size={20} /></div>
              <p className="work-desc">{desc}</p>
            </div>
          </a>
      )}
      </div>
    </div>
  </section>;


const testimonials = [
{ name: "Dr Admu", co: "Associate Professor, IIUM", photo: "assets/testi-admu.jpg", years: "1",
  text: "Razaq belongs to the category I call \"machine,\" in fact a \"super machine.\" Kick-start him with the right resource and focus, and he delivers, always with good results." },
{ name: "Moganeswaran Vatu Mala", co: "AVP, Simbiotik Technologies", photo: "assets/testi-mogan.jpg", years: "3",
  text: [
    "I had the pleasure of working with Razaq. What I remember most about him is his creative mind and the clarity he brings into every design. He doesn't just design for aesthetics but he designs with purpose. Every idea, every screen, and every flow is shaped from the end user's perspective, not just from a designer's lens.",
    "What truly sets him apart is his communication style. He was never afraid to speak up and share his thoughts, yet he did it with respect and emotional intelligence. He had this rare ability to express honest opinions without offending anyone, a quality that kept discussions productive and collaboration smooth.",
    "Razaq is one of those designers who blend creativity with empathy and logic with simplicity. Working with him was always a refreshing experience, and I'd be glad to collaborate with him again anytime."
  ] },
{ name: "Asraf Yusoff", co: "Technology Consulting · PMO", photo: "assets/testi-asraf.jpg", years: "1",
  text: "Razaq has tremendous talent in design and creative work. A man with many talents." },
{ name: "Mohamed Al Hakeem", co: "Business Consultant", photo: "assets/testi-mohamed.jpg", years: "2",
  text: "Especially great at UI/UX and the documentation that goes with it. Works day and night, handles pressure, organizes his time impressively." }];


const Testimonials = () => {
  const [active, setActive] = useState(0);
  const [dir, setDir] = useState(1);
  const total = testimonials.length;
  const go = (i) => { setDir(i > active || (active === total - 1 && i === 0) ? 1 : -1); setActive((i + total) % total); };
  React.useEffect(() => {
    const id = setInterval(() => { setDir(1); setActive((a) => (a + 1) % total); }, 7000);
    return () => clearInterval(id);
  }, [total]);
  const t = testimonials[active];
  const prev = testimonials[(active - 1 + total) % total];
  const next = testimonials[(active + 1) % total];
  return (
    <section className="section" id="testimonials">
      <div className="container">
        <div className="section-head" style={{ textAlign: "center", margin: "0 auto 40px", alignItems: "center" }}>
          <span className="eyebrow">What clients say</span>
          <h2 style={{ textAlign: "center" }}>Quiet praise from people who don't usually give it.</h2>
        </div>
        <div className="testi-slider">
          <article className="testi-peek left" aria-hidden="true" onClick={() => go((active - 1 + total) % total)}>
            <blockquote>{Array.isArray(prev.text) ? prev.text[0] : prev.text}</blockquote>
            <figcaption className="who">
              <span className="av"><img src={prev.photo} alt="" /></span>
              <span className="meta"><span className="name">{prev.name}</span><span className="co">{prev.co}</span></span>
            </figcaption>
          </article>
          <div className="testi-stage">
            <article key={active} className={"testi-main " + (dir > 0 ? "in-right" : "in-left")}>
              <div className="stars">★★★★★</div>
              <blockquote>
                {Array.isArray(t.text)
                  ? t.text.map((p, i) => <p key={i}>{p}</p>)
                  : <p>{t.text}</p>}
              </blockquote>
              <figcaption className="who">
                <span className="av lg"><img src={t.photo} alt="" /></span>
                <span className="meta"><span className="name">{t.name}</span><span className="co">{t.co}</span></span>
              </figcaption>
              <div className="testi-stats">
                <div className="stat">
                  <div className="stat-num">{t.years}+ year{t.years !== "1" ? "s" : ""}</div>
                  <div className="stat-label">Collaborating Time</div>
                </div>
                <div className="stat">
                  <div className="stat-num">5/5 <span className="stat-icon">★</span></div>
                  <div className="stat-label">Satisfaction</div>
                </div>
              </div>
            </article>
          </div>
          <article className="testi-peek right" aria-hidden="true" onClick={() => go((active + 1) % total)}>
            <blockquote>{Array.isArray(next.text) ? next.text[0] : next.text}</blockquote>
            <figcaption className="who">
              <span className="av"><img src={next.photo} alt="" /></span>
              <span className="meta"><span className="name">{next.name}</span><span className="co">{next.co}</span></span>
            </figcaption>
          </article>
        </div>
        <div className="testi-dots">
          {testimonials.map((_, i) =>
            <button key={i} className={"dot" + (i === active ? " on" : "")} onClick={() => go(i)} aria-label={`Testimonial ${i + 1}`} />
          )}
        </div>
      </div>
    </section>
  );
};


const About = () =>
<section className="about section" id="about">
    <div className="container">
      <div className="about-inner reveal">
        <div className="about-portrait"><img src="assets/razaq.png" alt="Razaq Atayee" /></div>
        <span className="eyebrow" style={{ marginBottom: 28 }}>About</span>
        <h2>I'm Razaq. I build websites for brands that take their websites seriously.</h2>
        <p>
          Seven years working with founders and creative directors. Mostly remote, mostly DTC.
        </p>
        <p>
          No agency, no junior between us. One designer who ships more than most teams of five.
        </p>
        <div className="signature"><span className="line" />Razaq Atayee<span className="line" /></div>
      </div>
    </div>
  </section>;


const tiers = [
{ name: "Audit", price: "1,200", currency: "USD", per: "one-off",
  desc: "A fixed-scope look at your current site.",
  items: ["90-min strategy call", "Heuristic + analytics audit", "Prioritised fix list", "30-day Slack follow-up"],
  cta: "Book the audit" },
{ name: "Landing page", price: "3,800", currency: "USD", per: "fixed",
  desc: "One page, end-to-end. Built for launches and paid traffic.",
  items: ["Strategy + copy direction", "High-fidelity design", "WordPress / Shopify build", "2 rounds of revisions"],
  cta: "Start a landing page" },
{ name: "Full website", price: "9,800", currency: "USD", per: "from",
  desc: "The whole site. Brand-led and conversion-tuned.",
  items: ["Discovery + sitemap + copy", "Full design system in Figma", "WordPress / Shopify / custom build", "Animations, SEO, analytics", "30 days of post-launch care"],
  cta: "Start a full build", featured: true },
{ name: "Fractional partner", price: "4,400", currency: "USD", per: "per month",
  desc: "Embedded with your team for the long haul.",
  items: ["~30 hrs/month, flexible", "Direct Slack access", "Weekly working sessions", "Senior taste, predictable spend"],
  cta: "Talk about ongoing work" }];


const Pricing = () =>
<section className="section" id="pricing">
    <div className="container">
      <div className="section-row">
        <div className="section-head">
          <span className="eyebrow">Pricing</span>
          <h2>Plain numbers. No quote-on-request gymnastics.</h2>
        </div>
        <p style={{ color: "var(--text-muted)", maxWidth: "32ch", fontSize: 15 }}>
          Fixed-scope, fixed-price. What we agree is what you pay.
        </p>
      </div>

      <div className="pricing-grid">
        {tiers.map((t) =>
      <div key={t.name} className={"price reveal" + (t.featured ? " featured" : "")}>
            {t.featured && <span className="badge">Recommended</span>}
            <div className="tier-name">{t.name}</div>
            <div className="amount">
              <span className="currency">$</span>
              {t.price}
              <span className="per">&nbsp;{t.per}</span>
            </div>
            <p className="desc">{t.desc}</p>
            <hr />
            <ul>
              {t.items.map((i) =>
          <li key={i}><Icon name="check" size={14} /><span>{i}</span></li>
          )}
            </ul>
            <a className="price-cta" href="booking.html" target="_blank" rel="noreferrer">{t.cta}</a>
          </div>
      )}
      </div>
    </div>
  </section>;


const faqs = [
{ q: "How long does a full website build take?",
  a: "Four to six weeks, kickoff to launch. I commit to a date in the proposal and stick to it." },
{ q: "Do you work with brands outside Malaysia?",
  a: "Most clients are US, UK, and Australia. Async-first with weekly working sessions in your timezone." },
{ q: "What platforms do you build on?",
  a: "WordPress, Shopify, and fully custom builds. For complex needs I'll bring in a dev for headless Shopify with a CMS." },
{ q: "Can you handle copy as well?",
  a: "I lead copy direction and write home and product pages. For long-form, I partner with a writer I trust." },
{ q: "What if I already have a designer or in-house team?",
  a: "Even better. I plug in as the build partner or strategic second pair of eyes. The fractional package is built for this." },
{ q: "Why fixed-price and not hourly?",
  a: "Hourly punishes whoever is faster. You should know the cost before we start, and so should I." },
{ q: "How do we get started?",
  a: "Book a free 20-minute call. No deck, no pitch, no follow-up if it isn't right." }];


const FAQ = () => {
  const [open, setOpen] = useState(0);
  return (
    <section className="section" id="faq">
      <div className="container">
        <div className="section-head" style={{ textAlign: "center", margin: "0 auto 56px", alignItems: "center" }}>
          <span className="eyebrow">FAQ</span>
          <h2>The questions every founder asks me first.</h2>
        </div>
        <div className="faq-wrap">
          {faqs.map((f, i) =>
          <div key={i} className={"faq-item reveal" + (open === i ? " open" : "")}>
              <button className="faq-q" aria-expanded={open === i} onClick={() => setOpen(open === i ? -1 : i)}>
                <span>{f.q}</span>
                <span className="faq-icon" aria-hidden="true" />
              </button>
              <div className="faq-a"><div><p>{f.a}</p></div></div>
            </div>
          )}
        </div>
      </div>
    </section>);

};

const FootCTA = () =>
<section className="foot-cta section" id="contact">
    <div className="container">
      <span className="eyebrow" style={{ marginBottom: 28, display: "inline-flex" }}>Let's talk</span>
      <h2>Ready to make your website <em>actually</em> earn its place?</h2>
      <p>Twenty minutes. No pitch, no pressure.</p>
      <a className="btn btn-primary btn-lg cta-with-avatar" href="booking.html" target="_blank" rel="noreferrer">
        <span className="cta-avatar lg"><img src="assets/razaq.png" alt="" /></span>
        Book a free 20-min call <span className="arr"><Icon name="arrow" size={16} /></span>
      </a>
      <div className="foot-meta">
        <a href="mailto:razaq.works@gmail.com">razaq.works@gmail.com</a>
        <span className="sep" />
        <a href="https://www.linkedin.com/in/abdulrazaq-atayee/" target="_blank" rel="noreferrer">LinkedIn</a>
        <span className="sep" />
        <span>Replies in &lt;24 hrs, Mon–Fri</span>
      </div>
    </div>
  </section>;


const Legal = () =>
<footer className="legal">
    <div className="container" style={{ display: "flex", justifyContent: "space-between", width: "100%", flexWrap: "wrap", gap: 12 }}>
      <span>© 2026 Razaq Atayee. Independent design studio.</span>
      <span>Built by Razaq, of course.</span>
    </div>
  </footer>;


const clientLogos = [
  { src: "assets/logos/verimatrix.png", alt: "Verimatrix" },
  { src: "assets/logos/pto.webp", alt: "Pro Triathletes Organisation" },
  { src: "assets/logos/abitare.webp", alt: "Abitare", scale: 0.7 },
  { src: "assets/logos/within3.png", alt: "Within3" },
  { src: "assets/logos/nexus.svg", alt: "Nexus International School" },
  { src: "assets/logos/taylors-school.png", alt: "Taylor's Schools" },
  { src: "assets/logos/taylors-aism.png", alt: "Australian International School Malaysia" },
  { src: "assets/logos/bima.png", alt: "Bima Visuals", scale: 0.7 },
  { src: "assets/logos/deco2u.webp", alt: "deco2u", scale: 0.7 },
  { src: "assets/logos/juno.webp", alt: "Juno" }
];

const LogoMarquee = () => {
  const loop = [...clientLogos, ...clientLogos];
  return (
    <section className="logo-marquee" aria-label="Selected clients">
      <div className="logo-track">
        {loop.map((l, i) =>
          <div key={i} className="logo-item">
            <img
              src={l.src}
              alt={l.alt}
              loading="lazy"
              style={l.scale ? { transform: `scale(${l.scale})` } : undefined}
            />
          </div>
        )}
      </div>
    </section>
  );
};

Object.assign(window, { Nav, Hero, Services, How, Work, Testimonials, About, Pricing, FAQ, FootCTA, Legal, LogoMarquee });