// Home page
const { useState: useStateHome } = React;

function Home() {
  return (
    <div className="fade-in">
      {/* Hero */}
      <section style={{ paddingTop: 40, paddingBottom: 80 }}>
        <div className="container-wide">
          <div className="hero-grid" style={{ display: "grid", gridTemplateColumns: "1.05fr 1fr", gap: 64, alignItems: "center" }}>
            <div>
              <Eyebrow>Art Consulting · Framing · Original Artwork</Eyebrow>
              <h1 className="display" style={{ fontSize: "clamp(56px, 8vw, 124px)", marginTop: 28, marginBottom: 40, letterSpacing: "-0.02em" }}>
                <em>Make&nbsp;it.</em><br/>
                Frame&nbsp;it.<br/>
                <em>Ship&nbsp;it.</em>
              </h1>
              <blockquote style={{ margin: 0, padding: "24px 0 24px 28px", borderLeft: "1px solid var(--gold)", fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: "clamp(20px, 2vw, 26px)", lineHeight: 1.45, color: "var(--ink)", maxWidth: 600 }}>
                We've become one of the few places you can still frame your child's first drawing or put together an art package for a five-star, Mediterranean resort — in one place.
              </blockquote>
              <div style={{ display: "flex", gap: 16, marginTop: 40, flexWrap: "wrap" }}>
                <Link to="/projects"><span className="btn btn-primary">View Our Projects</span></Link>
                <Link to="/new-project"><span className="btn btn-ghost">Start a Project</span></Link>
              </div>
            </div>
            <div style={{ position: "relative" }}>
              <div style={{ aspectRatio: "4/5", overflow: "hidden", background: "var(--hairline)" }}>
                <img src={IMG.HERO} alt="Art Dallas showroom" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
              </div>
              <div style={{ position: "absolute", bottom: -24, left: -32, background: "var(--bg)", padding: "20px 28px", maxWidth: 280 }}>
                <Eyebrow style={{ color: "var(--gold)" }}>As Featured in</Eyebrow>
                <div style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 22, color: "var(--ink)", marginTop: 6 }}>Architectural Digest</div>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* Client sector strip */}
      <section style={{ background: "var(--ink)", color: "#fff", padding: "64px 0" }}>
        <div className="container-wide">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 40, flexWrap: "wrap", gap: 16 }}>
            <Eyebrow style={{ color: "var(--gold)" }}>Trusted Across Sectors</Eyebrow>
            <div style={{ fontSize: 12, letterSpacing: "0.18em", textTransform: "uppercase", color: "rgba(255,255,255,0.6)" }}>16 case studies · Domestic + international</div>
          </div>
          <div className="sectors-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "rgba(255,255,255,0.1)" }}>
            {CLIENT_SECTORS.map(s => (
              <div key={s.name} style={{ background: "var(--ink)", padding: "32px 28px" }}>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 28, color: "#fff", marginBottom: 16 }}>{s.name}</div>
                <ul style={{ listStyle: "none", padding: 0, margin: 0, display: "flex", flexDirection: "column", gap: 6 }}>
                  {s.notable.slice(0, 4).map(n => (
                    <li key={n} style={{ fontFamily: "var(--font-display)", fontStyle: "italic", fontSize: 17, color: "rgba(255,255,255,0.85)" }}>{n}</li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
          <style>{`
            @media (max-width: 880px) { .sectors-grid { grid-template-columns: repeat(2, 1fr) !important; } }
            @media (max-width: 520px) { .sectors-grid { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>

      {/* AD Magazine feature */}
      <section className="section">
        <div className="container-wide">
          <div className="ad-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
            <div style={{ overflow: "hidden" }}>
              <img src={IMG.AD_MAGAZINE} alt="Architectural Digest feature" style={{ width: "100%" }} />
            </div>
            <div>
              <Eyebrow>As Seen In</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(42px, 5vw, 72px)", marginTop: 16, marginBottom: 28 }}>
                <em>Architectural</em><br/>Digest.
              </h2>
              <p style={{ fontSize: 17, color: "var(--ink-body)", maxWidth: 480 }}>
                Art Dallas's work has been featured in <em style={{ fontFamily: "var(--font-display)", fontSize: 19 }}>Architectural Digest</em> — recognizing the firm's contribution to contemporary hospitality and commercial art programs at scale.
              </p>
              <div style={{ marginTop: 32, display: "flex", gap: 48, flexWrap: "wrap" }}>
                <Stat n="1988" label="Founded" />
                <Stat n="55,000" label="Sq. ft. facility" />
                <Stat n="6,000+" label="Frames in stock" />
              </div>
            </div>
          </div>
          <style>{`
            @media (max-width: 880px) { .ad-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
          `}</style>
        </div>
      </section>

      {/* Who we are */}
      <section className="section" style={{ background: "var(--surface)", borderTop: "1px solid var(--hairline)", borderBottom: "1px solid var(--hairline)" }}>
        <div className="container-wide">
          <div className="who-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.2fr", gap: 80, alignItems: "start" }}>
            <div>
              <Eyebrow>Who We Are</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(40px, 5vw, 64px)", marginTop: 16, marginBottom: 32 }}>
                <em>Your complete</em><br/>art resource<br/>under one roof.
              </h2>
              <p style={{ fontSize: 17, marginBottom: 24 }}>
                Our mission is to encourage and promote creative artistic expression both locally and throughout the world. Since 1988 Art Dallas has aided designers, owners, and corporate executives in realizing their vision for artwork within their interior space.
              </p>
              <Link to="/about"><span className="btn btn-link">Read our story →</span></Link>
            </div>
            <div>
              <Eyebrow style={{ marginBottom: 24 }}>All Under One Roof · Twelve Disciplines</Eyebrow>
              <div style={{ display: "flex", flexWrap: "wrap", gap: "8px 18px", fontFamily: "var(--font-display)", fontSize: "clamp(22px, 2.6vw, 36px)", lineHeight: 1.25, color: "var(--ink)" }}>
                {DISCIPLINES.map((d, i) => (
                  <span key={d}>
                    <span style={{ fontStyle: i % 2 ? "italic" : "normal" }}>{d}</span>
                    {i < DISCIPLINES.length - 1 && <span style={{ color: "var(--gold)", margin: "0 4px 0 14px" }}>·</span>}
                  </span>
                ))}
              </div>
            </div>
          </div>
          <style>{`
            @media (max-width: 880px) { .who-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
          `}</style>
        </div>
      </section>

      {/* Services grid */}
      <section className="section">
        <div className="container-wide">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 48, flexWrap: "wrap", gap: 16 }}>
            <div>
              <Eyebrow>Services</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(36px, 4.5vw, 56px)", marginTop: 12 }}>Six disciplines. <em>One studio.</em></h2>
            </div>
            <Link to="/services"><span className="btn btn-link">All services →</span></Link>
          </div>
          <div className="services-grid" style={{ display: "grid", gridTemplateColumns: "repeat(3, 1fr)", gap: 1, background: "var(--hairline)" }}>
            {SERVICES.map((s, i) => (
              <Link key={s.slug} to={`/services/${s.slug}`} style={{ display: "block", background: "var(--surface)", padding: "44px 32px", transition: "background 0.25s" }}
                onMouseEnter={(e) => e.currentTarget.style.background = "var(--bg)"}
                onMouseLeave={(e) => e.currentTarget.style.background = "var(--surface)"}>
                <div style={{ fontFamily: "var(--font-mono)", fontSize: 11, color: "var(--gold)", marginBottom: 24 }}>0{i + 1}</div>
                <h3 className="display" style={{ fontSize: 32, marginBottom: 16 }}>{s.title}</h3>
                <p style={{ fontSize: 15, color: "var(--ink-body)", marginBottom: 24, minHeight: 70 }}>{s.description}</p>
                <span style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: "var(--forest)" }}>Learn more →</span>
              </Link>
            ))}
          </div>
          <style>{`
            @media (max-width: 880px) { .services-grid { grid-template-columns: repeat(2, 1fr) !important; } }
            @media (max-width: 520px) { .services-grid { grid-template-columns: 1fr !important; } }
          `}</style>
        </div>
      </section>

      {/* Make it / 55,000 sq ft */}
      <section className="section" style={{ background: "var(--forest)", color: "#fff" }}>
        <div className="container-wide">
          <div className="make-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "center" }}>
            <div>
              <Eyebrow style={{ color: "var(--gold)" }}>From Start to Finish</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(48px, 6vw, 88px)", color: "#fff", marginTop: 16, marginBottom: 32 }}>
                <em>Make it.</em> Frame it. <em>Ship it.</em>
              </h2>
              <p style={{ fontSize: 17, color: "rgba(255,255,255,0.82)", maxWidth: 540, marginBottom: 24 }}>
                We are proud to claim that we produce art of all mediums from start to finish — all in-house. Our 55,000 sq. ft. facility and skilled staff allows us to see projects through their entirety to ensure maximum quality and efficiency.
              </p>
              <p style={{ fontSize: 17, color: "rgba(255,255,255,0.82)", maxWidth: 540 }}>
                Together our studio has more than 30 years of experience creating original artwork — confidently providing art solutions uniquely suited to any client's needs.
              </p>
              <div style={{ marginTop: 40, display: "flex", gap: 56, flexWrap: "wrap" }}>
                <Stat n="55,000" label="Square feet" dark />
                <Stat n="30+" label="Years producing" dark />
                <Stat n="12" label="Disciplines in-house" dark />
              </div>
            </div>
            <div style={{ aspectRatio: "4/5", overflow: "hidden" }}>
              <img src={IMG.SHOWROOM} alt="Showroom" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
          </div>
          <style>{`
            @media (max-width: 880px) { .make-grid { grid-template-columns: 1fr !important; gap: 48px !important; } }
          `}</style>
        </div>
      </section>

      {/* Founding story preview */}
      <section className="section">
        <div className="container-wide">
          <div className="story-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 80, alignItems: "center" }}>
            <div style={{ aspectRatio: "4/5", overflow: "hidden", background: "var(--hairline)" }}>
              <img src={IMG.FRONT_DESK} alt="Front desk" style={{ width: "100%", height: "100%", objectFit: "cover" }} />
            </div>
            <div>
              <Eyebrow>Woman Owned · Family Run</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(40px, 5.5vw, 76px)", marginTop: 16, marginBottom: 32 }}>
                <em>A card table.</em><br/>A phone.<br/>The old Dallas<br/>Police property room.
              </h2>
              <p style={{ fontSize: 17, marginBottom: 32, maxWidth: 540 }}>
                In 1988 owner Judy Martin started Art Dallas with a card table and a phone in a space that had once been the Dallas Police property room. Thirty-seven years later, we span 55,000 square feet — still a family business.
              </p>
              <Link to="/about"><span className="btn btn-ghost">Read our story</span></Link>
            </div>
          </div>
          <style>{`
            @media (max-width: 880px) { .story-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
          `}</style>
        </div>
      </section>

      {/* Featured projects */}
      <section className="section" style={{ background: "var(--surface)", borderTop: "1px solid var(--hairline)" }}>
        <div className="container-wide">
          <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 48, flexWrap: "wrap", gap: 16 }}>
            <div>
              <Eyebrow>Selected Work</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(36px, 4.5vw, 56px)", marginTop: 12 }}>Featured <em>case studies.</em></h2>
            </div>
            <Link to="/projects"><span className="btn btn-link">All 16 projects →</span></Link>
          </div>
          <div className="featured-grid" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 32 }}>
            {PROJECTS.filter(p => p.featured).map(p => (
              <Link key={p.slug} to={`/projects/${p.slug}`} style={{ display: "block", cursor: "pointer" }}
                onMouseEnter={(e) => { const img = e.currentTarget.querySelector("img"); if (img) img.style.transform = "scale(1.03)"; }}
                onMouseLeave={(e) => { const img = e.currentTarget.querySelector("img"); if (img) img.style.transform = "scale(1)"; }}>
                <div style={{ aspectRatio: "4/3", overflow: "hidden", background: "var(--hairline)", marginBottom: 20 }}>
                  <img src={PROJECT_THUMBS[p.slug]} alt={p.title} style={{ width: "100%", height: "100%", objectFit: "cover", transition: "transform 0.7s ease" }} />
                </div>
                <Eyebrow>{p.category}</Eyebrow>
                <h3 className="display" style={{ fontStyle: "italic", fontSize: 36, marginTop: 8, marginBottom: 8 }}>{p.title}</h3>
                <div style={{ fontSize: 13, letterSpacing: "0.15em", textTransform: "uppercase", color: "var(--muted)", marginBottom: 12 }}>{p.location}</div>
                <p style={{ fontSize: 15, color: "var(--ink-body)", maxWidth: 560 }}>{p.brief}</p>
              </Link>
            ))}
          </div>
          <style>{`
            @media (max-width: 880px) { .featured-grid { grid-template-columns: 1fr !important; gap: 40px !important; } }
          `}</style>
        </div>
      </section>

      {/* Selected work magazine strip */}
      <section style={{ padding: "0 0 80px" }}>
        <div className="container-wide">
          <div className="strip-grid" style={{ display: "grid", gridTemplateColumns: "1.4fr 1fr 1.2fr 1fr", gap: 16, marginTop: 64 }}>
            <img src={FLASH_IMAGES[2]} alt="FLASH" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover" }} />
            <img src={FCF_IMAGES[1]} alt="Finished corner" style={{ width: "100%", aspectRatio: "3/4", objectFit: "cover" }} />
            <img src={FRENCH_MAT_IMAGES[6]} alt="French matting" style={{ width: "100%", aspectRatio: "4/5", objectFit: "cover" }} />
            <img src={FLOCK_IMAGES[0]} alt="Flock" style={{ width: "100%", aspectRatio: "3/4", objectFit: "cover" }} />
          </div>
          <style>{`
            @media (max-width: 880px) { .strip-grid { grid-template-columns: repeat(2, 1fr) !important; } }
          `}</style>
        </div>
      </section>

      {/* Visit */}
      <section className="section" style={{ background: "var(--ink)", color: "#fff" }}>
        <div className="container-wide">
          <div className="visit-grid" style={{ display: "grid", gridTemplateColumns: "1.2fr 1fr", gap: 80, alignItems: "center" }}>
            <div>
              <Eyebrow style={{ color: "var(--gold)" }}>Visit</Eyebrow>
              <h2 className="display" style={{ fontSize: "clamp(44px, 5.5vw, 72px)", color: "#fff", marginTop: 16, marginBottom: 32 }}>
                Schedule a <em>consultation.</em>
              </h2>
              <p style={{ fontSize: 17, color: "rgba(255,255,255,0.75)", maxWidth: 520, marginBottom: 32 }}>
                Visit our 55,000 sq. ft. showroom in Dallas. Currently by appointment only — we'll set aside time to walk through your project in person.
              </p>
              <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
                <Link to="/new-project"><span className="btn btn-primary" style={{ background: "var(--gold)" }}>Start a Project</span></Link>
                <a href="tel:2146880244"><span className="btn btn-ghost" style={{ color: "#fff", borderColor: "rgba(255,255,255,0.4)" }}>Call 214.688.0244</span></a>
              </div>
            </div>
            <div style={{ borderLeft: "1px solid rgba(255,255,255,0.15)", paddingLeft: 56 }}>
              <div style={{ marginBottom: 28 }}>
                <Eyebrow style={{ color: "rgba(255,255,255,0.5)" }}>Address</Eyebrow>
                <div style={{ fontFamily: "var(--font-display)", fontSize: 24, color: "#fff", marginTop: 8 }}>9207 Sovereign Row<br/>Dallas, TX 75247</div>
              </div>
              <div>
                <Eyebrow style={{ color: "rgba(255,255,255,0.5)" }}>Hours</Eyebrow>
                <div style={{ marginTop: 8, color: "rgba(255,255,255,0.82)" }}>
                  Mon–Thu · 8:30 AM – 4:30 PM<br/>
                  Fri · 8:30 AM – 4:00 PM<br/>
                  <em style={{ fontFamily: "var(--font-display)", fontSize: 18, color: "var(--gold)" }}>Currently by appointment only</em>
                </div>
              </div>
            </div>
          </div>
          <style>{`
            @media (max-width: 880px) { .visit-grid { grid-template-columns: 1fr !important; gap: 40px !important; } .visit-grid > div:last-child { padding-left: 0 !important; border-left: 0 !important; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 32px; } }
          `}</style>
        </div>
      </section>
    </div>
  );
}

function Stat({ n, label, dark }) {
  return (
    <div>
      <div style={{ fontFamily: "var(--font-display)", fontSize: 52, lineHeight: 1, color: dark ? "var(--gold)" : "var(--ink)", letterSpacing: "-0.02em" }}>{n}</div>
      <div style={{ marginTop: 8, fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: dark ? "rgba(255,255,255,0.7)" : "var(--muted)" }}>{label}</div>
    </div>
  );
}

window.Home = Home;
window.Stat = Stat;