// Art Consulting, plus generic service detail for others

function ArtConsulting() {
  const steps = [
    { n: "01", t: "Listen", d: "Understanding client wishes, values, and vision. Careful listening is where every successful project starts." },
    { n: "02", t: "Concept", d: "Developing art direction matched to the space, the brand, and the audience who will live with it." },
    { n: "03", t: "Source / Create", d: "Sourcing from our artist network, commissioning original work, or producing in-house — whatever the brief demands." },
    { n: "04", t: "Frame", d: "Design and craft frames matched to each piece. Custom mouldings, FLASH®, French Matting, Finished Corner Frames." },
    { n: "05", t: "Install", d: "Coordinated delivery and professional installation. Domestic and international." },
  ];
  return (
    <div className="fade-in">
      <section style={{ paddingTop: 56, paddingBottom: 0 }}>
        <div className="container-wide">
          <Eyebrow>50+ Years Collective Experience</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(64px, 9vw, 144px)", marginTop: 28, lineHeight: 1 }}>
            Art <em>Consulting.</em>
          </h1>
        </div>
      </section>

      <section className="section-lg">
        <div className="container" style={{ textAlign: "center" }}>
          <PullQuote attribution="Judy Martin, Founder">
            Art never ceases to amaze us! Its affect on your senses covers the gamut — it can evoke sensory overload to bliss and tranquility.
          </PullQuote>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="container-wide">
          <div style={{ maxWidth: 760 }}>
            <p style={{ fontSize: 19, lineHeight: 1.8 }}>
              Collectively our consulting team has over 50 years of experience. Out of the box thinking is the Art Dallas team's greatest attribute. We believe it's our job to guide our clients in bringing their vision to life. We understand that careful listening and integrating client wishes and values into the design process delivers a product reflective of their perspective and personality.
            </p>
          </div>
        </div>
      </section>

      <section className="section" style={{ background: "var(--surface)", borderTop: "1px solid var(--hairline)" }}>
        <div className="container-wide">
          <Eyebrow>Process</Eyebrow>
          <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", marginTop: 16, marginBottom: 56 }}>
            Five steps. <em>Listen first.</em>
          </h2>
          <div style={{ display: "grid", gridTemplateColumns: "1fr", gap: 0 }}>
            {steps.map(s => (
              <div key={s.n} className="step-row" style={{ display: "grid", gridTemplateColumns: "100px 1fr 2fr", gap: 40, alignItems: "start", padding: "40px 0", borderTop: "1px solid var(--hairline)" }}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 12, color: "var(--gold)" }}>{s.n}</div>
                <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 36, color: "var(--ink)" }}>{s.t}</div>
                <p style={{ fontSize: 17, color: "var(--ink-body)" }}>{s.d}</p>
              </div>
            ))}
          </div>
          <style>{`@media (max-width: 720px) { .step-row { grid-template-columns: 1fr !important; gap: 12px !important; padding: 28px 0 !important; } }`}</style>
        </div>
      </section>

      <CTASection title={<><em>Start a project</em> with our consulting team.</>} ctaLabel="Begin Intake" ctaTo="/new-project" />
    </div>
  );
}

function GenericService({ slug }) {
  const service = SERVICES.find(s => s.slug === slug) || SERVICES[0];
  const imageMap = {
    "original-artwork": [FLOCK_IMAGES[3], FCF_IMAGES[3], MAZAGAN_IMAGES[1], FRENCH_MAT_IMAGES[5]],
    "commercial-printing": [MAZAGAN_IMAGES[4], MAZAGAN_IMAGES[5], FCF_IMAGES[1]],
    "mirrors": [FLASH_IMAGES[4], FLASH_IMAGES[3], FLASH_IMAGES[1]],
    "installation": [MAZAGAN_IMAGES[2], MAZAGAN_IMAGES[0], FRENCH_MAT_IMAGES[6]],
  };
  const bodyMap = {
    "original-artwork": "Our in-house artists create commissioned paintings, sculpture, murals, and photography for hospitality, corporate, healthcare, and residential clients. Together our studio has more than 30 years of experience producing original work — and a curated network of outside artists when a brief calls for it.",
    "commercial-printing": "On-demand fine art and signage printing for hospitality, corporate, and large-scale installations. Custom ceiling prints, oversize formats, color-matched runs, and museum-grade substrates — all coordinated through our 55,000 sq. ft. facility.",
    "mirrors": "Custom mirrors and antique mirror finishes for residential and commercial projects. Hand-aged glass, leaded patterns, oversized statement pieces — designed and finished in-house, then framed in any of our 6,000 mouldings.",
    "installation": "Crating, delivery, and professional installation — domestic and international. From a single residential piece to multi-property hospitality programs, we coordinate the entire chain so artwork arrives ready to hang.",
  };
  const images = imageMap[slug] || imageMap["original-artwork"];

  return (
    <div className="fade-in">
      <section style={{ paddingTop: 56, paddingBottom: 80 }}>
        <div className="container-wide">
          <Eyebrow>Services · 0{SERVICES.findIndex(s => s.slug === slug) + 1}</Eyebrow>
          <h1 className="display" style={{ fontSize: "clamp(56px, 8vw, 124px)", marginTop: 28, lineHeight: 1 }}>
            <em>{service.title.split(" ")[0]}</em>{service.title.split(" ").slice(1).join(" ") && ` ${service.title.split(" ").slice(1).join(" ")}`}
          </h1>
        </div>
      </section>

      <section style={{ paddingBottom: 80 }}>
        <div className="container-wide">
          <div style={{ aspectRatio: "21/9", overflow: "hidden" }}>
            <img src={images[0]} alt={service.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
          </div>
        </div>
      </section>

      <section style={{ paddingBottom: 96 }}>
        <div className="container-wide">
          <div className="svc-body" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "start" }}>
            <div>
              <Eyebrow>About this service</Eyebrow>
              <p style={{ fontSize: 14, color: "var(--muted)", marginTop: 16, lineHeight: 1.7 }}>
                Part of our integrated workflow — make it, frame it, ship it — all under one roof at our 55,000 sq. ft. Dallas studio.
              </p>
            </div>
            <p style={{ fontSize: 19, lineHeight: 1.8 }}>{bodyMap[slug]}</p>
          </div>
          <style>{`@media (max-width: 880px) { .svc-body { grid-template-columns: 1fr !important; gap: 32px !important; } }`}</style>
        </div>
      </section>

      <section className="section" style={{ background: "var(--surface)", borderTop: "1px solid var(--hairline)" }}>
        <div className="container-wide">
          <Eyebrow>Selected Work</Eyebrow>
          <h2 className="display" style={{ fontSize: "clamp(32px, 4vw, 48px)", marginTop: 12, marginBottom: 40 }}>From recent <em>projects.</em></h2>
          <Gallery images={images} columns={images.length === 4 ? 4 : 3} />
        </div>
      </section>

      <CTASection title={<><em>Start a project</em> with us.</>} ctaLabel="Begin Intake" ctaTo="/new-project" />
    </div>
  );
}

window.ArtConsulting = ArtConsulting;
window.GenericService = GenericService;