/* ServicesPage — three engagement tiers, plus owner's representation as the
   through-line that runs across all of them. */
function ServicesPage({ onNav }) {
  const [openService, setOpenService] = React.useState(null);
  const tierRefs = React.useRef({});
  const { Eyebrow, Button } = window.DomumDesignSystem_84ba75;
  const [hoverJump, setHoverJump] = React.useState(null);
  const jumpTo = (key) => {
    const el = tierRefs.current[key];
    if (!el) return;
    window.scrollTo({ top: el.getBoundingClientRect().top + window.pageYOffset - 32, behavior: 'smooth' });
  };
  const { PageHeader, InquiryBand, SectionFrame, FAQ } = window;
  /* Touch devices fire mouseenter on tap, which would open the row and let the
     click handler immediately close it again. Hover-to-open is therefore only
     wired up where hover genuinely exists. */
  const canHover = typeof window.matchMedia === 'function'
    ? window.matchMedia('(hover: hover)').matches : true;

  const faqs = [
    ['What is a design build firm, and why does it matter?',
     'A design build firm handles both the design and the build under one contract. Instead of coordinating a designer and a contractor yourself, one team draws the plans, prices the work, and leads the trades, so budget problems surface during design, not after demolition.'],
    ['What does a kitchen remodel cost in Little Rock?',
     'A full kitchen remodel in the Little Rock area can range anywhere from $35,000 to $150,000, depending on cabinetry, layout changes, and whether plumbing or structure moves. We give a working range in the first conversation, before any drawings begin.'],
    ['How long does a whole-home remodel take?',
     'Design typically runs 6 to 12 weeks, and construction runs 4 to 9 months for a whole-home remodel. Kitchen and bath remodels usually run 8 to 14 weeks on site. Permitting and long-lead materials drive most of the schedule variation.'],
    ['Do you handle home additions and structural changes?',
     'Yes. We can design and build home additions, primary suite additions, and bump-outs. Our scope handles the removal or reframing of load-bearing walls. All structural work is engineered and permitted before construction starts.'],
    ['Do you offer interior design without construction?',
     'Yes. Interior design and curation is available on its own: furniture plans, lighting, textiles, art, and phased sourcing, for homes that don\'t need construction work.'],
    ['What areas of Central Arkansas do you serve?',
     'We serve Central Arkansas, including Little Rock, West Little Rock, North Little Rock, Roland, Maumelle, Conway, Bryant, Sherwood, Cabot. Projects outside that radius are considered case by case.'],
    ['Can you work from plans we already have?',
     'Yes. Build/Renovation Management can take a set of plans or designs you already have and runs the build, handling scheduling, trade coordination, site oversight, and quality control against your drawings.'],
    ['Do you require a design agreement before pricing a remodel?',
     'For anything beyond a single room, yes. Accurate pricing requires resolved plans and selections. A design agreement produces both, and it can be applied toward construction if you move forward with us.'],
  ];

  const tiers = [
    {
      n: '01', key: 'design', name: 'Design',
      lede: 'For homeowners or builders who need the thinking resolved before anyone picks up a tool. You leave with renderings, design decisions, and a plan that can be priced and built.',
      services: [
        {
          name: 'Renovation Design Package',
          who: 'Homeowners',
          body: 'A comprehensive design for your existing home, from space planning and layout to the materials and details that bring it to life. We define the look, feel, and flow of the space, then source and specify each element of the design—giving you and your builder a clear, cohesive plan that’s ready to purchase and build from.',
          includes: ['Existing conditions & measured plans', 'Layout & floor plan design', 'Elevations & detail drawings', 'Material, fixture & finish selections', 'Complete sourcing & specifications package: Tile, lighting, cabinetry, hardware, flooring, paint & more'],
        },
        {
          name: 'New Construction Design Package',
          who: 'Builders & Homeowners',
          body: 'A comprehensive design for a ground-up home, from space planning and layout to the materials and details that bring it to life. We define the look, feel, and flow of the space, then source and specify each element of the design\u2014giving you and your builder a clear, cohesive plan that\u2019s ready to purchase and build from.',
          includes: ['Floor plans & elevations', 'Exterior material & massing direction', 'Interior layout & detail resolution', 'Material, fixture & finish selections', 'Complete sourcing & specifications package: Tile, lighting, cabinetry, hardware, flooring, paint & more'],
        },
        {
          name: 'Decor Design & Curation',
          who: 'Homeowners & Realtors',
          body: 'The layer that makes a finished house feel like a home. Furniture, lighting, textiles, and art selected and sourced to feel collected not cookie-cutter.',
          includes: ['Furniture plans and sourcing', 'Lighting and textile selection', 'Art and object curation', 'Phased procurement'],
        },
      ],
    },
    {
      n: '02', key: 'build', name: 'Build',
      lede: 'For homeowners who already have a design they trust and need the work led. We direct the renovation and hold the trades to the drawings.',
      services: [
        {
          name: 'Renovation Management',
          who: 'Homeowners with a design in hand',
          body: 'We take an existing design and run the renovation, scheduling, trade coordination, site oversight, and the daily decisions that determine whether the finished work matches the intent. You have one point of contact instead of nine.',
          includes: ['Scope, schedule, and sequencing', 'Trade selection and coordination', 'On-site oversight and quality control', 'Weekly reporting and decision tracking'],
        },
      ],
    },
    {
      n: '03', key: 'both', name: 'Design & Build',
      lede: 'Design and construction under one roof, with one team accountable for both. Nothing is lost in the handoff, because there is no handoff.',
      services: [
        {
          name: 'Custom Design & Renovation Direction',
          who: 'Homeowners',
          body: 'Our most complete renovation engagement. We design the space and then lead the work, carrying every decision from first sketch through final punch list. The design is drawn knowing who will build it and what it will cost.',
          includes: ['Full design package', 'Budget development and value decisions', 'Trade coordination and site leadership', 'Selections, procurement, and closeout'],
        },
        {
          name: 'New Home Custom Design & Build',
          who: 'Homeowners',
          body: 'A ground-up home, designed and delivered by the same team. Site and property assessment through design, construction, and completion, with real estate insight behind the decisions that affect long-term value.',
          includes: ['Site and property assessment', 'Full architectural and interior design', 'Construction leadership', 'Completion and handover'],
        },
      ],
    },
    {
      n: '04', key: 'rep', name: "Owner's Representation Services",
      lede: 'For homeowners who already have a design and a builder they trust, and need someone at the table whose only job is to protect their interests.',
      services: [
        {
          name: "Owner's Representation",
          who: 'Homeowners with a design and a builder',
          body: 'Taken as an independent engagement: full owner\u2019s representation from contract through completion. We review bids, evaluate change orders, keep decisions aligned with the design, and help you navigate the questions that inevitably arise, without carrying the design or the construction ourselves.',
          includes: ['Bid review and contract evaluation', 'Change order review and budget oversight', 'Decisions held against the design intent', 'Schedule and quality accountability', 'A single advocate from contract to completion'],
        },
      ],
    },
  ];

  return (
    <div>
      <PageHeader
        align="center"
        video="./assets/clip-discuss.mp4" position="center 55%"
        eyebrow="Services"
        title="Ways to work with us."
        lede="Some clients need the thinking resolved. Some need the work led. Most need both. What follows is organized by how much of the project you would like us to carry."
      />

      {/* Quick reference — jumps to each division */}
      <section style={{ padding: 'var(--space-7) var(--gutter) 0', maxWidth: '980px', margin: '0 auto' }}>
        <nav style={{ borderTop: '1px solid var(--line-soft)', borderBottom: '1px solid var(--line-soft)', padding: 'var(--space-5) 0', display: 'flex', flexWrap: 'wrap', justifyContent: 'center', gap: 'var(--space-4) var(--space-7)' }}>
          {tiers.map((t) => (
            <button key={t.key} type="button" onClick={() => jumpTo(t.key)}
              onMouseEnter={canHover ? (() => setHoverJump(t.key)) : undefined} onMouseLeave={() => setHoverJump(null)}
              style={{
                background: 'none', border: 'none', padding: 0, cursor: 'pointer',
                fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-eyebrow)', fontWeight: 'var(--w-semi)',
                letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase',
                color: hoverJump === t.key ? '#4A2426' : 'rgba(43,33,27,.55)',
                borderBottom: `1px solid ${hoverJump === t.key ? '#4A2426' : 'transparent'}`,
                paddingBottom: '3px',
              }}>{t.n} · {t.name}</button>
          ))}
        </nav>
      </section>

      {/* Divisions — quiet index; each package expands in place */}
      <section style={{ padding: 'var(--space-8) var(--gutter) var(--space-9)', maxWidth: '980px', margin: '0 auto' }}>
        {tiers.map((tier, ti) => (
          <div key={tier.key} ref={(el) => { tierRefs.current[tier.key] = el; }}
            style={{ marginTop: ti === 0 ? 0 : 'var(--space-9)' }}>
            <div style={{ display: 'grid', gridTemplateColumns: tier.photo ? 'minmax(0, 0.72fr) 1px minmax(0, 1fr)' : '1px minmax(0, 1fr)', gap: 'var(--space-6)', alignItems: 'stretch' }}>
              {tier.photo ? (
                <div role="img" aria-label={tier.photoAlt} style={{ background: `url(${tier.photo}) center center / cover no-repeat`, minHeight: '460px' }}></div>
              ) : null}
              <div aria-hidden style={{ background: 'var(--border-strong)' }}></div>
              <div>
                <p style={{ fontFamily: 'var(--font-sans)', fontSize: 'var(--fs-eyebrow)', fontWeight: 'var(--w-semi)', letterSpacing: 'var(--tracking-eyebrow)', textTransform: 'uppercase', color: 'var(--text-muted)', margin: 0 }}>{tier.n}</p>
                <h2 style={{ fontSize: 'clamp(1.9rem, 3.4vw, 2.6rem)', fontWeight: 400, margin: '12px 0 14px', lineHeight: 1.12 }}>{tier.name}</h2>
                <p style={{ margin: 0, maxWidth: '58ch', fontSize: 'var(--fs-small)', color: 'var(--text-secondary)', lineHeight: 1.8 }}>{tier.lede}</p>

                <div style={{ marginTop: 'var(--space-7)' }}>
                  {tier.services.map((svc, si) => {
                    const key = tier.key + '·' + svc.name;
                    const open = openService === key;
                    return (
                      <article key={svc.name}
                        onMouseEnter={canHover ? (() => setOpenService(key)) : undefined}
                        onMouseLeave={canHover ? (() => setOpenService((c) => (c === key ? null : c))) : undefined}
                        onFocus={canHover ? (() => setOpenService(key)) : undefined}
                        onBlur={canHover ? (() => setOpenService((c) => (c === key ? null : c))) : undefined}
                        onClick={() => setOpenService((c) => (c === key ? null : key))}
                        tabIndex={0} aria-expanded={open}
                        style={{
                          borderTop: si === 0 ? '1px solid var(--line-soft)' : 'none',
                          borderBottom: '1px solid var(--line-soft)',
                          padding: 'var(--space-5) 0',
                          cursor: 'pointer', outline: 'none',
                        }}>
                        <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'space-between', gap: 'var(--space-5)' }}>
                          <div style={{ minWidth: 0 }}>
                            <h3 style={{
                              fontSize: 'clamp(1.15rem, 1.9vw, 1.45rem)', fontWeight: 400, margin: 0, lineHeight: 1.25,
                              color: open ? '#4A2426' : 'var(--text-primary)',
                            }}>{svc.name}</h3>
                            <p style={{ margin: '6px 0 0', fontSize: 'var(--fs-small)', color: 'var(--text-muted)', lineHeight: 1.6 }}>{svc.who}</p>
                          </div>
                          {/* Expand affordance: shown on every device. */}
                          <span aria-hidden data-expand-chev style={{
                            flexShrink: 0, width: '34px', height: '34px', marginTop: '2px',
                            display: 'flex', alignItems: 'center', justifyContent: 'center',
                            border: `1px solid ${open ? '#4A2426' : 'var(--border-strong)'}`,
                            transition: 'border-color var(--dur-base) var(--ease-quiet)',
                          }}>
                            <span style={{
                              width: '8px', height: '8px', display: 'block',
                              borderRight: `1px solid ${open ? '#4A2426' : 'var(--walnut)'}`,
                              borderBottom: `1px solid ${open ? '#4A2426' : 'var(--walnut)'}`,
                              transform: open ? 'translateY(-2px) rotate(225deg)' : 'translateY(-2px) rotate(45deg)',
                              transition: 'transform 460ms var(--ease-quiet), border-color var(--dur-base) var(--ease-quiet)',
                            }}></span>
                          </span>
                        </div>

                        <div style={{
                          display: 'grid', gridTemplateRows: open ? '1fr' : '0fr',
                          transition: 'grid-template-rows 460ms var(--ease-quiet)',
                        }}>
                          <div style={{ overflow: 'hidden' }}>
                            <div style={{ paddingTop: 'var(--space-5)', display: 'grid', gridTemplateColumns: 'minmax(0, 1.1fr) minmax(0, 1fr)', gap: 'var(--space-7)', alignItems: 'start' }}>
                              <p style={{ margin: 0, fontSize: 'var(--fs-small)', color: 'var(--text-secondary)', lineHeight: 1.8 }}>{svc.body}</p>
                              <ul style={{ listStyle: 'none', margin: 0, padding: 0, display: 'flex', flexDirection: 'column', gap: '10px' }}>
                                {svc.includes.map((i) => (
                                  <li key={i} style={{ display: 'flex', gap: '10px', fontSize: 'var(--fs-caption)', color: 'var(--text-secondary)', lineHeight: 1.6 }}>
                                    <span aria-hidden style={{ color: 'var(--white-oak)', flexShrink: 0 }}>—</span>
                                    <span>{i}</span>
                                  </li>
                                ))}
                              </ul>
                            </div>
                          </div>
                        </div>
                      </article>
                    );
                  })}
                </div>
              </div>
            </div>
          </div>
        ))}
      </section>

      {/* Which fits — crown-molding ground. Cropped at full source width so a
         1440px band needs only ~1.6x upscale (a tight crop on the flourish
         alone would have needed 2.5x and gone soft). A parchment wash holds
         body copy well clear of 4.5:1 while the relief still reads. */}
      <section style={{ position: 'relative', padding: 'var(--space-10) var(--gutter)', minHeight: '440px', display: 'flex', alignItems: 'center', justifyContent: 'center', overflow: 'hidden' }}>
        <div aria-hidden style={{
          position: 'absolute', inset: 0,
          background: 'url(./assets/photo-services-header.jpg) center center / cover no-repeat',
        }}></div>
        <div aria-hidden style={{ position: 'absolute', inset: 0, background: 'color-mix(in srgb, var(--parchment) 90%, transparent)' }}></div>
        <SectionFrame tone="ink" />
        <div style={{ position: 'relative', maxWidth: '860px', margin: '0 auto', textAlign: 'center' }}>
          <Eyebrow>Start Here</Eyebrow>
          <h2 style={{ fontSize: 'clamp(2rem, 3.6vw, 2.9rem)', margin: '18px 0 20px', lineHeight: 1.2 }}>
            Let's Discuss Your Project
          </h2>
          <p style={{ margin: '0 auto', maxWidth: '58ch', fontSize: 'var(--fs-body)', color: 'var(--espresso)', lineHeight: 1.8 }}>
            The first conversation is not a sales call. We look at the house, listen to what you are hoping
            for, and tell you honestly which of these makes sense, including when the answer is a smaller
            scope than you expected, or nothing at all.
          </p>
          <div style={{ marginTop: 'var(--space-6)' }}>
            <Button variant="primary" onClick={() => onNav('contact')}>Discuss Your Project</Button>
          </div>
        </div>
      </section>

      <FAQ
        background="transparent"
        eyebrow="Common Questions"
        title="Remodeling in Central Arkansas, answered."
        items={faqs} />

      <InquiryBand />
    </div>
  );
}
window.ServicesPage = ServicesPage;
