// Request Menu — standalone page (alternating layout)

const SERVICES = [
  {
    num: "01",
    title: "Branding",
    desc: "Build a strong and consistent brand identity.",
    img: "assets/services/branding 2.jpg",
    items: [
      "Logo design (multiple concepts)",
      "Logo variations & refinements",
      "Color palette & typography",
      "Brand guidelines",
      "Social media branding",
      "Business cards & stationery",
    ],
    delivery: "Typical delivery: 2–5 days per request",
  },
  {
    num: "02",
    title: "Website & Product Design",
    desc: "Design modern, conversion-focused digital experiences.",
    img: "assets/services/web and product 1.avif",
    items: [
      "Landing page design",
      "Full website UI",
      "Dashboard & SaaS UI",
      "Mobile app screens",
      "UX wireframes & flows",
      "Prototypes (Figma)",
      "Design systems & UI kits",
    ],
    delivery: "Typical delivery: 2–4 days per task",
  },
  {
    num: "03",
    title: "Social Media Design",
    desc: "Create consistent and engaging content.",
    img: "assets/services/graphic design 1.jpg",
    items: [
      "Post templates (carousel, story, single)",
      "Social media visuals",
      "Highlight covers",
      "Content series",
    ],
    delivery: "Typical delivery: 1–3 days",
  },
  {
    num: "04",
    title: "Marketing & Print",
    desc: "Support your business with high-quality visuals.",
    img: "assets/services/strategy 1.jpg",
    items: [
      "Pitch decks & presentations",
      "Brochures & flyers",
      "Infographics",
      "Ebooks / documents",
      "Packaging design",
    ],
    delivery: "Typical delivery: 2–5 days",
  },
  {
    num: "05",
    title: "Motion",
    desc: "Add movement to your brand.",
    img: "assets/services/graphic design 3.jpg",
    items: [
      "UI animations",
      "Simple motion graphics",
      "Short promotional visuals",
    ],
    delivery: "Typical delivery: 2–4 days",
  },
];

const PROCESS_STEPS = [
  { num: "01", label: "Submit a request",             desc: "Send your request — text, files, or references. Takes minutes." },
  { num: "02", label: "We work on it",                desc: "Our team picks it up based on priority and scope."              },
  { num: "03", label: "You review and give feedback", desc: "We deliver a first draft for your review."                      },
  { num: "04", label: "We refine and deliver",        desc: "Unlimited revisions until it's exactly right."                  },
  { num: "05", label: "Move to the next task",        desc: "Mark it done and drop what's next in the queue."               },
];

const NOTES = [
  "One active task at a time (more on higher plans)",
  "Turnaround depends on complexity and scope",
  "Revisions are included in all plans",
  "Clear requests = faster delivery",
];

// ─── Service row (alternating layout) ─────────────────────────
const ServiceRow = ({ num, title, desc, img, items, delivery, reverse }) => (
  <article className={"ag-menu-row" + (reverse ? " ag-menu-row--reverse" : "")}>
    <div
      className="ag-menu-row__img"
      style={{ backgroundImage: `url('${img}')` }}
      role="img"
      aria-label={title}
    />
    <div className="ag-menu-row__content">
      <span className="ag-menu-card__num">{num}</span>
      <h3 className="ag-menu-card__title">{title}</h3>
      <p className="ag-menu-card__desc">{desc}</p>
      <ul className="ag-menu-card__list">
        {items.map((item) => (
          <li key={item} className="ag-menu-card__item">
            <span className="ag-menu-card__item-dot" aria-hidden="true" />
            {item}
          </li>
        ))}
      </ul>
      <footer className="ag-menu-card__foot">
        <svg viewBox="0 0 16 16" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" aria-hidden="true">
          <circle cx="8" cy="8" r="6"/><polyline points="8,5 8,8 10,10"/>
        </svg>
        {delivery}
      </footer>
    </div>
  </article>
);

// ─── Process Step ─────────────────────────────────────────────
const ProcessStep = ({ num, label, desc }) => (
  <div className="ag-menu-step">
    <span className="ag-menu-step__num">{num}</span>
    <div className="ag-menu-step__body">
      <div className="ag-menu-step__label">{label}</div>
      <p className="ag-menu-step__desc">{desc}</p>
    </div>
  </div>
);

// ─── Page ─────────────────────────────────────────────────────
const RequestMenuPage = () => (
  <div className="ag-app">
    <Header onCTA={() => { window.location.href = "index.html#ag-section-contact"; }} />

    {/* ── Hero — 2-col split ── */}
    <section className="ag-page-hero ag-page-hero--split">
      <div className="ag-page-hero__content">
        <EyebrowPill withSparkle>Request Menu</EyebrowPill>
        <h1 className="ag-page-hero__title">What you can<br/>request from Blan.</h1>
        <p className="ag-page-hero__sub">
          Clear scope, fast delivery, no surprises — explore everything included in your subscription.
        </p>
        <div className="ag-hero__ctas">
          <a href="index.html#ag-section-pricing" className="ag-btn ag-btn--dark">View Plans</a>
          <a href="index.html#ag-section-contact" className="ag-btn ag-btn--light">Talk to Us</a>
        </div>
      </div>
      <div
        className="ag-page-hero__visual"
        style={{ backgroundImage: "url('assets/our work/work 3.png')" }}
        aria-hidden="true"
      />
    </section>

    {/* ── Services — alternating rows ── */}
    <section className="ag-section" id="rm-services">
      <SectionHeading
        eyebrow="Services"
        sub="Every item below can be submitted as a standalone request. Mix and match based on what your business needs."
      >
        What's on the menu.
      </SectionHeading>
      <div className="ag-menu-rows">
        {SERVICES.map((s, i) => (
          <ServiceRow key={s.num} {...s} reverse={i % 2 !== 0} />
        ))}
      </div>
    </section>

    {/* ── How it works — 2-col ── */}
    <section className="ag-section" id="rm-process">
      <div className="ag-menu-process-grid">
        <div className="ag-menu-process-left">
          <EyebrowPill>Process</EyebrowPill>
          <h2 className="ag-section-heading__title" style={{margin:"12px 0 16px",textAlign:"left"}}>How it works.</h2>
          <p className="ag-section-heading__sub" style={{textAlign:"left",maxWidth:"320px"}}>
            No onboarding calls, no lengthy setup. Submit a request and we move.
          </p>
          <a href="index.html#ag-section-contact" className="ag-btn ag-btn--dark" style={{marginTop:"24px",alignSelf:"flex-start"}}>
            Start a request
          </a>
        </div>
        <div className="ag-menu-steps">
          {PROCESS_STEPS.map((s) => (
            <ProcessStep key={s.num} {...s} />
          ))}
        </div>
      </div>
    </section>

    {/* ── Important notes ── */}
    <section className="ag-section" id="rm-notes">
      <div className="ag-menu-notes">
        <div className="ag-menu-notes__head">
          <h2 className="ag-menu-notes__title">Good to know<br/>before you start.</h2>
          <p className="ag-menu-notes__sub">
            A few things that keep the workflow clean and the output consistent.
          </p>
          <a href="index.html#ag-section-pricing" className="ag-btn ag-btn--light" style={{alignSelf:"flex-start",marginTop:"8px"}}>
            See plans
          </a>
        </div>
        <ul style={{listStyle:"none",padding:0,margin:0,display:"flex",flexDirection:"column",gap:"4px"}}>
          {NOTES.map((note) => (
            <ListTick key={note}>{note}</ListTick>
          ))}
        </ul>
      </div>
    </section>

    {/* ── CTA strip ── */}
    <div className="ag-pricing__footer" style={{marginBottom:"80px"}}>
      <div className="ag-pricing__footer-text">
        <p className="ag-pricing__footer-title">Ready to start your first request?</p>
        <p className="ag-pricing__footer-sub">Pick a plan and submit your first task today.</p>
      </div>
      <a href="index.html#ag-section-pricing" className="ag-pricing__footer-cta">
        View pricing
        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
          <line x1="5" y1="12" x2="19" y2="12"/>
          <polyline points="12,5 19,12 12,19"/>
        </svg>
      </a>
    </div>

    {/* ── Footer ── */}
    <footer className="ag-ufooter">
      <div className="ag-ufooter__inner">
        <a href="index.html" className="ag-ufooter__logo">
          <img src="assets/logo-mark.png" alt="Blan" className="ag-footer__logo-img" />
        </a>
        <nav className="ag-ufooter__nav" aria-label="Footer navigation">
          <a href="index.html#ag-section-services">Services</a>
          <a href="index.html#ag-section-pricing">Pricing</a>
          <a href="index.html#ag-section-contact">Contact</a>
          <a href="request-menu.html" style={{color:"var(--fg-primary)"}}>Request Menu</a>
        </nav>
        <div className="ag-ufooter__legal">
          <a href="#">Privacy Policy</a>
          <a href="#">Terms of Service</a>
          <a href="for-ai.html" className="ag-ufooter__ai-link" target="_blank" rel="noopener">
            Hey AI — Your Guide to Blan
          </a>
        </div>
      </div>
      <div className="ag-ufooter__base">
        <span>© {new Date().getFullYear()} Blan Studio. All rights reserved.</span>
        <a href="#ag-top" className="ag-ufooter__top">Back to top ↑</a>
      </div>
    </footer>
  </div>
);

window.RequestMenuPage = RequestMenuPage;