/* global React, useRoute, I, LOOKS, LOOKS_CATALOG, STUDIO_CONTACT */
const { useState: useLooksState } = React;

function Looks() {
  const { goto } = useRoute();
  const gallery = window.LOOKS || [];
  const catalog = window.LOOKS_CATALOG || [];
  const contact = window.STUDIO_CONTACT || {};
  const phone = contact.phoneDisplay || "305-563-3779";
  const sms = contact.phoneSms || "sms:+13055633779";
  const [filter, setFilter] = useLooksState("all");
  const hasPublicMedia = gallery.length > 0;
  const holdCount = catalog.filter((c) => c.status === "hold").length;
  const refCount = catalog.filter((c) => c.status === "reference").length;

  const filters = [
    { key: "all", label: "All" },
    { key: "before-after", label: "Before & after" },
    { key: "prompt-in-photo", label: "Style tips" },
    { key: "lookbook", label: "Sets" },
  ];

  const filtered = gallery.filter((g) => {
    if (filter === "all") return true;
    if (filter === "lookbook") return g.kind === "lookbook";
    return g.kind === filter;
  });

  function startInquiry(service = "photography") {
    goto("booking", { service, source: "Brand content" });
  }

  return (
    <main className="fade page-looks">
      <section className="looks-hero">
        <div className="container">
          <span className="eyebrow eyebrow-gold">§ Brand content · studio projects</span>
          <h1 className="serif balance looks-hero-title">
            Content with<br/>a point of view.
          </h1>
          <p className="pretty looks-hero-lede">
            Campaign concepts, photography and launch-ready assets shaped around your audience, offer and next move.
            Start with a brief. We’ll help define the right scope, schedule and deliverables.
          </p>
          <div className="looks-hero-cta">
            <button className="btn btn-gold btn-lg" onClick={() => startInquiry()}>
              Plan a campaign <I name="arrow" size={16} />
            </button>
            <button className="btn btn-ghost btn-lg" onClick={() => startInquiry("photography")}>Discuss a photo shoot</button>
            <a className="btn btn-line btn-lg" href={sms}>Text {phone}</a>
          </div>
        </div>
      </section>

      <section className="section-tight">
        <div className="container">
          <div className="looks-section-head">
            <span className="eyebrow eyebrow-gold">§ How it runs</span>
            <h2 className="serif looks-h2">From brief to finished assets.</h2>
            <p className="pretty looks-lede">
              We align on what the campaign needs to do, then shape creative direction and production around that goal.
              Scope, timing and pricing are confirmed with you before work begins.
            </p>
          </div>
          <div className="looks-sell-panel" style={{ maxWidth: 720 }}>
            <div className="mono looks-tag">A clear process</div>
            {[
              ["01 · Brief", "Audience, offer, channels and desired outcome"],
              ["02 · Direction", "Creative approach, references and shot list"],
              ["03 · Production", "Photography, video or campaign assets as scoped"],
              ["04 · Delivery", "Reviewed files and clear next steps"],
            ].map(([t, b]) => (
              <div key={t} className="looks-sell-row">
                <div className="serif">{t}</div>
                <div>{b}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="looks-section-head looks-section-head-split">
            <div>
              <span className="eyebrow eyebrow-gold">§ Engagements</span>
              <h2 className="serif looks-h2">The right format for the work.</h2>
              <p className="pretty looks-lede">
                Bring us a single shoot, a launch campaign or an ongoing content need. We’ll shape deliverables and cadence
                around your brief instead of forcing the project into a preset package.
              </p>
            </div>
            <button className="btn btn-line" onClick={() => startInquiry()}>
              Tell us what you’re making <I name="arrow" size={14} />
            </button>
          </div>
          <div className="looks-calendar">
            {[
              ["01", "Campaign", "Launch concepts, visual direction and assets planned around one clear offer."],
              ["02", "Photography", "Portrait, product, editorial or lookbook imagery for the places your audience sees you."],
              ["03", "Content system", "A practical set of reusable creative assets and guidance, scoped to your channels."],
            ].map(([number, job, detail]) => (
              <article key={number} className="looks-calendar-day">
                <div className="mono looks-calendar-num">{number}</div>
                <div className="mono looks-calendar-dayname">Brand content</div>
                <h3 className="serif">{job}</h3>
                <p>{detail}</p>
              </article>
            ))}
          </div>
        </div>
      </section>

      <section className="section">
        <div className="container">
          <div className="looks-section-head">
            <span className="eyebrow eyebrow-gold">§ Scope</span>
            <h2 className="serif looks-h2">A brief first. A clear proposal next.</h2>
            <p className="pretty looks-lede">
              Every project is different. Share what you’re trying to make and we’ll recommend a fit, outline the deliverables,
              and confirm the investment before you decide.
            </p>
          </div>
          <div className="looks-sell-panel" style={{ maxWidth: 720 }}>
            <div className="mono looks-tag">What we can scope together</div>
            {[
              ["Creative direction", "A clear visual approach, references and production plan."],
              ["Campaign assets", "Photography and video for your launch, audience and channels."],
              ["Usage and delivery", "File formats, usage needs, review points and timing agreed up front."],
            ].map(([title, detail]) => (
              <div key={title} className="looks-sell-row">
                <div className="serif">{title}</div>
                <div>{detail}</div>
              </div>
            ))}
          </div>
        </div>
      </section>

      <section className="section-tight looks-gallery-wrap">
        <div className="container">
          <div className="looks-section-head">
            <span className="eyebrow eyebrow-gold">§ Examples</span>
            <h2 className="serif looks-h2">
              {hasPublicMedia ? "Recent brand content." : "Photo examples coming soon."}
            </h2>
            <p className="pretty looks-lede">
              {hasPublicMedia
                ? "Approved examples for the public site. Built to read clearly on a phone."
                : "We’re preparing approved examples. Contact the studio to discuss a shoot or campaign."}
            </p>
          </div>

          {!hasPublicMedia && (
            <div className="looks-catalog-panel" aria-label="Gallery status">
              <div className="mono looks-tag">Status</div>
              <ul className="looks-catalog-stats">
                <li><span>{catalog.length}</span> files reviewed</li>
                <li><span>{holdCount}</span> waiting on approval</li>
                <li><span>{refCount}</span> reference only</li>
                <li><span>0</span> live on site</li>
              </ul>
              <p className="looks-catalog-note">
                Want to discuss a project? Send a brief or text {phone} and we’ll help shape the next step.
              </p>
            </div>
          )}

          {hasPublicMedia && (
            <>
              <div className="looks-filters" role="tablist" aria-label="Gallery filters">
                {filters.map((f) => (
                  <button
                    key={f.key}
                    type="button"
                    className={`looks-filter ${filter === f.key ? "is-active" : ""}`}
                    onClick={() => setFilter(f.key)}
                  >
                    {f.label}
                  </button>
                ))}
              </div>
              <div className="looks-gallery">
                {filtered.map((item) => (
                  <article key={item.id} className={`looks-card looks-fit-${item.fit || "cover"}`}>
                    <div
                      className="looks-card-media"
                      style={{ aspectRatio: item.aspect || "4/5" }}
                    >
                      <img
                        src={item.src}
                        alt={item.title}
                        width={item.width}
                        height={item.height}
                        loading="lazy"
                        decoding="async"
                        sizes="(max-width: 640px) 100vw, (max-width: 960px) 50vw, 33vw"
                      />
                    </div>
                    <div className="looks-card-body">
                      <div className="mono looks-tag">{item.tag}</div>
                      <h3 className="serif">{item.title}</h3>
                      {item.blurb && <p>{item.blurb}</p>}
                    </div>
                  </article>
                ))}
              </div>
            </>
          )}
        </div>
      </section>

      <section className="section-tight looks-sell">
        <div className="container looks-sell-grid">
          <div>
            <span className="eyebrow eyebrow-gold">§ Two lanes</span>
            <h2 className="serif looks-h2">
              Campaigns, shoots and content built around your brief.
            </h2>
            <p className="pretty looks-lede">
              Photography and video are available as project-based engagements. Share your goal, timing and intended use;
              we’ll confirm the scope and pricing with you.
            </p>
            <div className="looks-hero-cta" style={{ marginTop: 28 }}>
              <button className="btn btn-gold" onClick={() => startInquiry()}>
                Start a project inquiry <I name="arrow" size={14} />
              </button>
              <button className="btn btn-ghost" onClick={() => goto("desk")}>Website plans</button>
              <button className="btn btn-line" onClick={() => goto("booking")}>Book a shoot</button>
            </div>
          </div>
          <div className="looks-sell-panel">
            <div className="mono looks-tag">What stays human</div>
            {[
              ["Custom shoots", "Photo and video on Book"],
              ["New site builds", "Scoped when the template is not enough"],
              ["Photography", "Portrait, product and editorial"],
              ["Campaigns", "Creative direction and launch assets"],
            ].map(([t, b]) => (
              <div key={t} className="looks-sell-row">
                <div className="serif">{t}</div>
                <div>{b}</div>
              </div>
            ))}
          </div>
        </div>
      </section>
    </main>
  );
}

window.Looks = Looks;