// home-sections.jsx — Content sections of the Hale Lumina homepage.

const { useEffect: secUseEffect } = React;

// ─── BRAND PROMISE ────────────────────────────────────────────────
function BrandPromise() {
  const pillars = [
    {
      n: "01",
      title: "Interior Direction",
      body: "Furniture, materials, layouts, millwork, finishes, and the lived experience of each room.",
    },
    {
      n: "02",
      title: "Lighting Direction",
      body: "Warmth, shadow, beam spread, dimming, glare control, and architectural atmosphere.",
    },
    {
      n: "03",
      title: "Technical Precision",
      body: "CRI, R9, photometrics, controls, fixture placement, and builder-ready documentation.",
    },
    {
      n: "04",
      title: "White-Glove Execution",
      body: "Procurement, staging, labeling, site coordination, and final scene setting.",
    },
  ];
  return (
    <section id="promise" className="brand-promise" data-screen-label="02 Brand Promise">
      <div className="brand-promise-left" data-reveal>
        <span className="label">02 — Brand Promise</span>
        <h2>We design the visible <em className="italic" style={{color:'var(--umber)'}}>and invisible</em> parts of home.</h2>
        <p>
          Furniture, finishes, and spatial flow shape how a home looks. Light shapes how it feels.
          Hale Lumina brings both disciplines together from the beginning — so the residence feels
          cohesive from morning into night.
        </p>
        <hr className="lightfall" style={{marginTop: 40, maxWidth: 220}} />
      </div>
      <div className="pillars">
        {pillars.map((p, i) => (
          <div className="pillar" key={p.n} data-reveal style={{'--reveal-delay': (i * 80) + 'ms'}}>
            <span className="pillar-num">{p.n}</span>
            <div>
              <h3 className="pillar-title">{p.title}</h3>
              <p>{p.body}</p>
            </div>
            <span className="pillar-arrow">→</span>
          </div>
        ))}
      </div>
    </section>
  );
}

// ─── DEFAULT ASSETS FOR SLOTS ──────────────────────────────────────
// ─── PHILOSOPHY — Material / Volume / Light / Ritual ─────────────
function Philosophy() {
  const items = [
    { n: "I",   word: "Material", line: "Natural surfaces, tactile finishes, honest textures.", slot: "phil-material", placeholder: "Linen · stone · woodgrain" },
    { n: "II",  word: "Volume",   line: "Proportion, spatial flow, architecture, and calm.",     slot: "phil-volume",   placeholder: "Room opening to sea" },
    { n: "III", word: "Light",    line: "Layered illumination that reveals what matters.",       slot: "phil-light",    placeholder: "Brass sconce on plaster" },
    { n: "IV",  word: "Ritual",   line: "The daily moments that make a house feel like home.",   slot: "phil-ritual",   placeholder: "Bedside lamp at night" },
  ];
  return (
    <section id="philosophy" className="philosophy" data-screen-label="03 Philosophy">
      <div className="philosophy-inner">
        <div className="philosophy-head">
          <div data-reveal>
            <span className="label" style={{display:'block', marginBottom: 28}}>03 — Philosophy</span>
            <h2><em className="italic">Material. Volume.</em><br/>Light. Ritual.</h2>
          </div>
          <div className="head-meta" data-reveal>
            <p className="lead" style={{maxWidth: '48ch'}}>
              A residence is more than a collection of rooms. It is a sequence of daily rituals —
              arrival, gathering, cooking, resting, reading, bathing, hosting. Hale Lumina designs
              these moments as one continuous atmosphere.
            </p>
          </div>
        </div>
        <div className="mvlr">
          {items.map((it, i) => (
            <article key={it.n} className="mvlr-card hover-spotlight" data-reveal style={{'--reveal-delay': (i * 100) + 'ms'}}>
              <div className="img-frame parallax-frame curtain-frame">
                <image-slot id={it.slot} placeholder={it.placeholder} shape="rect"></image-slot>
              </div>
              <span className="num">{it.n}</span>
              <h3 className="word">{it.word}</h3>
              <p>{it.line}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── LIGHT MODULATOR INTERACTIVE WIDGET ────────────────────────────
function LightModulator() {
  const [activeRoomIndex, setActiveRoomIndex] = React.useState(0);
  const [activeChannelId, setActiveChannelId] = React.useState("cove");
  const [imageErrors, setImageErrors] = React.useState({});
  const [baseImageErrors, setBaseImageErrors] = React.useState({});
  const [mobileRoomMenuOpen, setMobileRoomMenuOpen] = React.useState(false);
  const [mobilePresetMenuOpen, setMobilePresetMenuOpen] = React.useState(false);

  const handleImageError = (roomId, channelId) => {
    setImageErrors(prev => ({
      ...prev,
      [`${roomId}_${channelId}`]: true
    }));
  };

  const handleBaseImageError = (roomId) => {
    setBaseImageErrors(prev => ({
      ...prev,
      [roomId]: true
    }));
  };

  const [roomStates, setRoomStates] = React.useState({
    living: {
      cove: { dim: 75, k: 2200, enabled: true },
      down: { dim: 20, k: 3000, enabled: true },
      accent: { dim: 45, k: 2700, enabled: true },
      decor: { dim: 60, k: 2200, enabled: true }
    },
    kitchen: {
      cove: { dim: 30, k: 2700, enabled: true },
      down: { dim: 70, k: 3200, enabled: true },
      accent: { dim: 50, k: 3000, enabled: true },
      decor: { dim: 80, k: 2200, enabled: true }
    },
    suite: {
      cove: { dim: 60, k: 2200, enabled: true },
      down: { dim: 10, k: 2700, enabled: true },
      accent: { dim: 30, k: 2400, enabled: true },
      decor: { dim: 40, k: 2000, enabled: true }
    },
    bath: {
      cove: { dim: 55, k: 2700, enabled: true },
      down: { dim: 45, k: 3200, enabled: true },
      accent: { dim: 30, k: 2700, enabled: true },
      decor: { dim: 50, k: 2400, enabled: true }
    },
    exterior: {
      cove: { dim: 40, k: 2200, enabled: true },
      down: { dim: 20, k: 2700, enabled: true },
      accent: { dim: 60, k: 2200, enabled: true },
      decor: { dim: 40, k: 2200, enabled: true }
    }
  });

  const rooms = [
    {
      id: "living",
      name: "Living Room",
      image: "assets/generated/rm-living.webp",
      desc: "Oceanfront pavilion with linear stone and custom linen seating.",
      coveGradient: "radial-gradient(130% 65% at 50% 0%, rgba(255, 225, 195, 0.45) 0%, transparent 80%)",
      downlightMasks: [
        { cx: "25%", cy: "15%", r: "18%" },
        { cx: "50%", cy: "15%", r: "18%" },
        { cx: "75%", cy: "15%", r: "18%" }
      ],
      accentGlow: "radial-gradient(40% 40% at 50% 70%, rgba(255, 205, 160, 0.55) 0%, transparent 100%)",
      decorGlow: "radial-gradient(15% 30% at 90% 45%, rgba(255, 180, 110, 0.6) 0%, transparent 100%)"
    },
    {
      id: "kitchen",
      name: "Kitchen & Dining",
      image: "assets/generated/rm-kitchen.webp",
      desc: "Volcanic stone kitchen island with overhead bespoke brass fixtures.",
      coveGradient: "linear-gradient(180deg, rgba(255, 215, 180, 0.4) 0%, transparent 60%)",
      downlightMasks: [
        { cx: "30%", cy: "20%", r: "16%" },
        { cx: "70%", cy: "20%", r: "16%" }
      ],
      accentGlow: "radial-gradient(35% 25% at 50% 50%, rgba(255, 235, 195, 0.45) 0%, transparent 100%)",
      decorGlow: "radial-gradient(12% 15% at 50% 32%, rgba(255, 175, 95, 0.75) 0%, transparent 100%)"
    },
    {
      id: "suite",
      name: "Primary Suite",
      image: "assets/generated/rm-suite.webp",
      desc: "Plaster sanctuary with integrated warm lighting behind the bed canopy.",
      coveGradient: "radial-gradient(100% 50% at 50% 85%, rgba(255, 205, 150, 0.45) 0%, transparent 100%)",
      downlightMasks: [
        { cx: "15%", cy: "15%", r: "12%" },
        { cx: "85%", cy: "15%", r: "12%" }
      ],
      accentGlow: "radial-gradient(20% 30% at 75% 70%, rgba(255, 215, 175, 0.55) 0%, transparent 100%)",
      decorGlow: "radial-gradient(10% 20% at 15% 65%, rgba(255, 165, 80, 0.7) 0%, transparent 100%)"
    },
    {
      id: "bath",
      name: "Spa Bath",
      image: "assets/generated/rm-bath.webp",
      desc: "Limestone retreat with indirect vertical backlighting on vanity mirrors.",
      coveGradient: "linear-gradient(90deg, rgba(255,220,185,0.3) 0%, transparent 20%, transparent 80%, rgba(255,220,185,0.3) 100%)",
      downlightMasks: [
        { cx: "50%", cy: "10%", r: "20%" }
      ],
      accentGlow: "radial-gradient(30% 30% at 50% 80%, rgba(255,205,145,0.45) 0%, transparent 100%)",
      decorGlow: "radial-gradient(15% 15% at 50% 45%, rgba(255, 185, 105, 0.65) 0%, transparent 100%)"
    },
    {
      id: "exterior",
      name: "Exterior Facade",
      image: "assets/generated/rm-exterior.webp",
      desc: "Twilight path illumination grazing pathways and palm silhouettes.",
      coveGradient: "linear-gradient(0deg, rgba(255,195,135,0.25) 0%, transparent 80%)",
      downlightMasks: [
        { cx: "20%", cy: "5%", r: "10%" },
        { cx: "80%", cy: "5%", r: "10%" }
      ],
      accentGlow: "radial-gradient(25% 45% at 30% 75%, rgba(255, 175, 95, 0.55) 0%, transparent 100%)",
      decorGlow: "radial-gradient(8% 12% at 50% 50%, rgba(255, 205, 125, 0.8) 0%, transparent 100%)"
    }
  ];

  const presets = {
    morning: {
      cove: { dim: 18, k: 3000 },
      down: { dim: 70, k: 3500 },
      accent: { dim: 20, k: 3200 },
      decor: { dim: 10, k: 2700 }
    },
    dinner: {
      cove: { dim: 55, k: 2400 },
      down: { dim: 28, k: 2700 },
      accent: { dim: 45, k: 2600 },
      decor: { dim: 78, k: 2200 }
    },
    evening: {
      cove: { dim: 75, k: 2200 },
      down: { dim: 18, k: 2600 },
      accent: { dim: 35, k: 2400 },
      decor: { dim: 62, k: 2000 }
    },
    night: {
      cove: { dim: 20, k: 2000 },
      down: { dim: 0, k: 2700 },
      accent: { dim: 10, k: 2200 },
      decor: { dim: 35, k: 1800 }
    },
    relaxation: {
      cove: { dim: 75, k: 2200 },
      down: { dim: 10, k: 2700 },
      accent: { dim: 15, k: 2200 },
      decor: { dim: 80, k: 1800 }
    },
    art: {
      cove: { dim: 20, k: 3000 },
      down: { dim: 60, k: 3500 },
      accent: { dim: 90, k: 4000 },
      decor: { dim: 10, k: 3000 }
    },
    entertain: {
      cove: { dim: 80, k: 2700 },
      down: { dim: 50, k: 3000 },
      accent: { dim: 40, k: 2700 },
      decor: { dim: 70, k: 2400 }
    },
    blackout: {
      cove: { dim: 0, k: 2700 },
      down: { dim: 0, k: 3000 },
      accent: { dim: 0, k: 2700 },
      decor: { dim: 0, k: 2400 }
    }
  };

  const currentRoom = rooms[activeRoomIndex];
  const currentState = roomStates[currentRoom.id];

  const getActivePresetName = () => {
    if (isPresetActive('relaxation')) return 'Relaxation';
    if (isPresetActive('art')) return 'Art Study';
    if (isPresetActive('entertain')) return 'Entertaining';
    if (isPresetActive('blackout')) return 'Blackout';
    return 'Custom Scene';
  };

  const applyPreset = (presetName) => {
    const preset = presets[presetName];
    if (!preset) return;
    setRoomStates(prev => ({
      ...prev,
      [currentRoom.id]: {
        cove: { ...prev[currentRoom.id].cove, dim: preset.cove.dim, k: preset.cove.k, enabled: preset.cove.dim > 0 },
        down: { ...prev[currentRoom.id].down, dim: preset.down.dim, k: preset.down.k, enabled: preset.down.dim > 0 },
        accent: { ...prev[currentRoom.id].accent, dim: preset.accent.dim, k: preset.accent.k, enabled: preset.accent.dim > 0 },
        decor: { ...prev[currentRoom.id].decor, dim: preset.decor.dim, k: preset.decor.k, enabled: preset.decor.dim > 0 }
      }
    }));
  };

  const isPresetActive = (presetName) => {
    const preset = presets[presetName];
    if (!preset) return false;
    return (
      Math.abs(currentState.cove.dim - preset.cove.dim) < 5 &&
      Math.abs(currentState.cove.k - preset.cove.k) < 200 &&
      currentState.cove.enabled === (preset.cove.dim > 0) &&
      Math.abs(currentState.down.dim - preset.down.dim) < 5 &&
      Math.abs(currentState.down.k - preset.down.k) < 200 &&
      currentState.down.enabled === (preset.down.dim > 0) &&
      Math.abs(currentState.accent.dim - preset.accent.dim) < 5 &&
      Math.abs(currentState.accent.k - preset.accent.k) < 200 &&
      currentState.accent.enabled === (preset.accent.dim > 0) &&
      Math.abs(currentState.decor.dim - preset.decor.dim) < 5 &&
      Math.abs(currentState.decor.k - preset.decor.k) < 200 &&
      currentState.decor.enabled === (preset.decor.dim > 0)
    );
  };

  const getPresetBarColor = (k) => {
    return `rgba(${getKelvinColorRGB(k)}, 0.85)`;
  };

  const renderPresetBtn = (name, label, subtitle, presetData) => {
    const active = isPresetActive(name);
    return (
      <button 
        type="button" 
        onClick={() => applyPreset(name)} 
        className={`preset-card-btn ${active ? 'active' : ''} ${name === 'blackout' ? 'reset' : ''}`}
      >
        <div className="preset-card-info">
          <span className="preset-card-title">{label}</span>
          <span className="preset-card-sub">{subtitle}</span>
        </div>
        <div className="preset-card-graph">
          <div className="graph-bar" style={{ height: `${presetData.cove.dim}%`, backgroundColor: getPresetBarColor(presetData.cove.k) }} title={`Cove: ${presetData.cove.dim}% (${presetData.cove.k}K)`} />
          <div className="graph-bar" style={{ height: `${presetData.down.dim}%`, backgroundColor: getPresetBarColor(presetData.down.k) }} title={`Downlight: ${presetData.down.dim}% (${presetData.down.k}K)`} />
          <div className="graph-bar" style={{ height: `${presetData.accent.dim}%`, backgroundColor: getPresetBarColor(presetData.accent.k) }} title={`Accent: ${presetData.accent.dim}% (${presetData.accent.k}K)`} />
          <div className="graph-bar" style={{ height: `${presetData.decor.dim}%`, backgroundColor: getPresetBarColor(presetData.decor.k) }} title={`Decorative: ${presetData.decor.dim}% (${presetData.decor.k}K)`} />
        </div>
      </button>
    );
  };

  React.useEffect(() => {
    const onPreset = (e) => {
      if (e.detail && e.detail.preset) applyPreset(e.detail.preset);
    };
    window.addEventListener('luminaScenePreset', onPreset);
    return () => window.removeEventListener('luminaScenePreset', onPreset);
  }, [currentRoom.id, currentState]);

  const getKelvinColorRGB = (k) => {
    if (k < 2200) return "255, 137, 30";
    if (k < 2600) return "255, 175, 90";
    if (k < 3200) return "255, 214, 150";
    if (k < 4200) return "255, 240, 220";
    return "230, 240, 255";
  };

  const getKelvinText = (k) => {
    if (k < 2000) return `${k}K · Candlelight`;
    if (k < 2500) return `${k}K · Ultra Warm`;
    if (k < 3000) return `${k}K · Warm White`;
    if (k < 4000) return `${k}K · Halogen`;
    return `${k}K · Natural`;
  };

  const updateChannel = (channelId, field, val) => {
    setRoomStates(prev => ({
      ...prev,
      [currentRoom.id]: {
        ...prev[currentRoom.id],
        [channelId]: {
          ...prev[currentRoom.id][channelId],
          [field]: val
        }
      }
    }));
  };

  const handleSliderTouch = (e, cid) => {
    const ch = roomStates[currentRoom.id][cid];
    if (!ch.enabled) {
      updateChannel(cid, 'enabled', true);
    }
    const rect = e.currentTarget.getBoundingClientRect();
    const touch = e.touches[0];
    if (!touch) return;
    const y = touch.clientY - rect.top;
    let pct = Math.round(((rect.height - y) / rect.height) * 100);
    pct = Math.max(0, Math.min(100, pct));
    pct = Math.round(pct / 5) * 5;
    updateChannel(cid, 'dim', pct);
    if (activeChannelId !== cid) {
      setActiveChannelId(cid);
    }
  };

  const totalDim = (currentState.cove.enabled ? currentState.cove.dim : 0) +
                   (currentState.down.enabled ? currentState.down.dim : 0) +
                   (currentState.accent.enabled ? currentState.accent.dim : 0) +
                   (currentState.decor.enabled ? currentState.decor.dim : 0);

  const ambientBounce = 0.08 + (totalDim / 400) * 0.72;

  let totalWeightedK = 0;
  let activeChannelsCount = 0;
  Object.keys(currentState).forEach(key => {
    const ch = currentState[key];
    if (ch.enabled && ch.dim > 0) {
      totalWeightedK += ch.k * ch.dim;
      activeChannelsCount += ch.dim;
    }
  });

  const avgK = activeChannelsCount > 0 ? (totalWeightedK / activeChannelsCount) : 2700;

  const baseFilters = `brightness(${ambientBounce.toFixed(2)}) sepia(${avgK < 3000 ? ((3000 - avgK) / 1200 * 0.55).toFixed(2) : 0}) saturate(1.05) hue-rotate(${avgK >= 3000 ? ((avgK - 3000) / 2000 * -25).toFixed(0) : 0}deg)`;

  const getKelvinFilter = (k) => {
    if (k < 2500) {
      const intensity = (2500 - k) / 700;
      return `sepia(${0.3 + intensity * 0.5}) saturate(${1.2 + intensity * 0.6}) hue-rotate(${(-5 - intensity * 15).toFixed(0)}deg)`;
    } else if (k > 3200) {
      const intensity = (k - 3200) / 1800;
      return `hue-rotate(${(intensity * 20).toFixed(0)}deg) saturate(${1.0 - intensity * 0.1})`;
    }
    return 'none';
  };

  const getFallbackStyle = (channelId) => {
    const ch = currentState[channelId];
    const rgb = getKelvinColorRGB(ch.k);

    if (channelId === 'cove') {
      return {
        background: currentRoom.coveGradient,
        filter: `brightness(${0.4 + (ch.dim / 100) * 0.6}) sepia(0.2) saturate(1.4) hue-rotate(${(ch.k - 3000) / 2000 * -25}deg)`,
      };
    }
    if (channelId === 'down') {
      const radialGlows = currentRoom.downlightMasks.map(mask => {
        return `radial-gradient(${mask.r} at ${mask.cx} ${mask.cy}, rgba(${rgb}, 0.55) 0%, transparent 100%)`;
      }).join(', ');
      return {
        backgroundImage: radialGlows,
      };
    }
    if (channelId === 'accent') {
      return {
        background: currentRoom.accentGlow,
        filter: `brightness(${0.4 + (ch.dim / 100) * 0.6}) sepia(0.1) saturate(1.3) hue-rotate(${(ch.k - 3000) / 2000 * -20}deg)`,
      };
    }
    if (channelId === 'decor') {
      return {
        background: currentRoom.decorGlow,
        filter: `brightness(${0.5 + (ch.dim / 100) * 0.5}) sepia(0.2) saturate(1.5) hue-rotate(${(ch.k - 3000) / 2000 * -30}deg)`,
      };
    }
    return {};
  };

  const renderLayer = (channelId) => {
    const ch = currentState[channelId];
    const opacity = ch.enabled ? (ch.dim / 100) : 0;
    const key = `${currentRoom.id}_${channelId}`;
    const hasError = imageErrors[key];
    const src = `assets/generated/rm-${currentRoom.id}-${channelId}.webp`;

    if (!hasError) {
      return (
        <img
          key={key}
          src={src}
          alt={`${currentRoom.name} ${channelId}`}
          className="viewport-layer"
          onError={() => handleImageError(currentRoom.id, channelId)}
          style={{
            opacity: opacity,
            filter: getKelvinFilter(ch.k),
            position: 'absolute',
            inset: 0,
            width: '100%',
            height: '100%',
            objectFit: 'cover',
            mixBlendMode: 'screen',
            pointerEvents: 'none',
            transition: 'opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1), filter 0.25s ease'
          }}
        />
      );
    } else {
      return (
        <div 
          key={`${key}_fallback`}
          className="viewport-layer fallback-glow"
          style={{
            ...getFallbackStyle(channelId),
            opacity: opacity * (channelId === 'cove' ? 0.85 : channelId === 'decor' ? 1.0 : 0.95),
            position: 'absolute',
            inset: 0,
            width: '100%',
            height: '100%',
            mixBlendMode: 'screen',
            pointerEvents: 'none',
            transition: 'opacity 0.25s cubic-bezier(0.22, 1, 0.36, 1)'
          }}
        />
      );
    }
  };

  // Technical diagnostic readouts
  const activeChannel = currentState[activeChannelId];
  const estLumens = Math.round(activeChannel.dim * 12.5);
  const estWatts = (activeChannel.dim * 0.11).toFixed(1);
  const estCRI = activeChannel.k < 2500 ? 98 : activeChannel.k < 3500 ? 97 : 95;

  const baseSrc = baseImageErrors[currentRoom.id] 
    ? currentRoom.image 
    : `assets/generated/rm-${currentRoom.id}-base.webp`;

  return (
    <div className="immersive-study-component">
      {/* ─── DESKTOP ONLY LAYOUT ─── */}
      <div className="desktop-only-modulator">
        {/* Left Column: Viewport & Diagnostics */}
        <div className="study-viewport-container">
          <div className="study-viewport">
            <img 
              src={baseSrc} 
              alt={currentRoom.name} 
              className="viewport-base-img" 
              onError={() => handleBaseImageError(currentRoom.id)}
              style={{ 
                filter: baseImageErrors[currentRoom.id] ? baseFilters : 'none',
                width: '100%',
                height: '100%',
                objectFit: 'cover'
              }}
            />
            {/* Lighting Channels */}
            {renderLayer('cove')}
            {renderLayer('down')}
            {renderLayer('accent')}
            {renderLayer('decor')}
            
            <div className="viewport-label-tag">
              <span className="viewport-num">0{activeRoomIndex + 1}</span>
              <span className="viewport-title">{currentRoom.name}</span>
            </div>
          </div>
        </div>

        {/* Right Column: Controls, Space Selector & Presets */}
        <div className="study-control-panel">
          {/* Space Selector Section */}
          <div className="control-panel-section">
            <span className="sidebar-label">Select Space</span>
            <div className="room-selector-list">
              {rooms.map((r, i) => (
                <button
                  key={r.id}
                  type="button"
                  onClick={() => setActiveRoomIndex(i)}
                  className={`room-selector-item ${i === activeRoomIndex ? 'active' : ''}`}
                >
                  <img src={r.image} alt={r.name} className="room-thumb" />
                  <div className="room-item-text">
                    <span className="room-item-name">{r.name}</span>
                    <span className="room-item-desc">{r.desc}</span>
                  </div>
                </button>
              ))}
            </div>
          </div>

          {/* Channel Selection Tabs */}
          <div className="control-panel-section">
            <span className="sidebar-label">Lighting Channel</span>
            <div className="console-tabs">
              <button 
                type="button"
                onClick={() => setActiveChannelId('cove')} 
                className={`console-tab ${activeChannelId === 'cove' ? 'active' : ''}`}
              >
                Cove
              </button>
              <button 
                type="button"
                onClick={() => setActiveChannelId('down')} 
                className={`console-tab ${activeChannelId === 'down' ? 'active' : ''}`}
              >
                Downlight
              </button>
              <button 
                type="button"
                onClick={() => setActiveChannelId('accent')} 
                className={`console-tab ${activeChannelId === 'accent' ? 'active' : ''}`}
              >
                Accent
              </button>
              <button 
                type="button"
                onClick={() => setActiveChannelId('decor')} 
                className={`console-tab ${activeChannelId === 'decor' ? 'active' : ''}`}
              >
                Decorative
              </button>
            </div>
          </div>

          {/* Channel Controls (Power & Sliders) */}
          <div className="control-panel-section console-control-area">
            <div className="console-control-row">
              <div className="console-power-row">
                <span className="control-row-label">Power Status</span>
                <label className="studioswitch">
                  <input 
                    type="checkbox" 
                    checked={activeChannel.enabled} 
                    onChange={(e) => updateChannel(activeChannelId, 'enabled', e.target.checked)}
                  />
                  <span className="studioslider rounded" />
                </label>
              </div>

              <div className="control-slider-cell">
                <div className="control-slider-label-row">
                  <span className="control-row-label">Dimming</span>
                  <span className="control-row-val">{activeChannel.dim}%</span>
                </div>
                <input 
                  type="range" min="0" max="100" step="5"
                  disabled={!activeChannel.enabled}
                  value={activeChannel.dim}
                  onChange={(e) => updateChannel(activeChannelId, 'dim', parseInt(e.target.value))}
                  className="modulator-slider-input"
                  style={{ '--pct': `${activeChannel.dim}%`, opacity: activeChannel.enabled ? 1 : 0.4 }}
                />
              </div>

              <div className="control-slider-cell">
                <div className="control-slider-label-row">
                  <span className="control-row-label">Kelvin</span>
                  <span className="control-row-val">{getKelvinText(activeChannel.k)}</span>
                </div>
                <input 
                  type="range" min="1800" max="5000" step="100"
                  disabled={!activeChannel.enabled}
                  value={activeChannel.k}
                  onChange={(e) => updateChannel(activeChannelId, 'k', parseInt(e.target.value))}
                  className="modulator-slider-input"
                  style={{ '--pct': `${((activeChannel.k - 1800) / 3200) * 100}%`, opacity: activeChannel.enabled ? 1 : 0.4 }}
                />
              </div>
            </div>
          </div>

          <div className="control-panel-section">
            <span className="sidebar-label">Scene Presets</span>
            <div className="study-presets-grid">
              {renderPresetBtn('relaxation', 'Relaxation', 'Warm cove & decor', presets.relaxation)}
              {renderPresetBtn('art', 'Art Study', 'Focused spotlights', presets.art)}
              {renderPresetBtn('entertain', 'Entertaining', 'Lively social glow', presets.entertain)}
              {renderPresetBtn('blackout', 'Blackout', 'All channels off', presets.blackout)}
            </div>
          </div>
        </div>
      </div>

      <div className="mobile-only-modulator">
        {/* Viewport without overlays */}
        <div className="mobile-viewport-wrapper">
          <img 
            src={baseSrc} 
            alt={currentRoom.name} 
            className="viewport-base-img" 
            onError={() => handleBaseImageError(currentRoom.id)}
            style={{ 
              filter: baseImageErrors[currentRoom.id] ? baseFilters : 'none',
              width: '100%',
              height: '100%',
              objectFit: 'cover'
            }}
          />
          {renderLayer('cove')}
          {renderLayer('down')}
          {renderLayer('accent')}
          {renderLayer('decor')}
        </div>

        {/* Dropdowns Row below the image viewport */}
        <div className="mobile-selectors-row">
          {/* Space Dropdown */}
          <div className="mobile-overlay-dropdown">
            <span className="dropdown-field-label">Space</span>
            <button 
              type="button" 
              className={`mobile-dropdown-trigger ${mobileRoomMenuOpen ? 'active' : ''}`}
              onClick={() => {
                setMobileRoomMenuOpen(!mobileRoomMenuOpen);
                setMobilePresetMenuOpen(false);
              }}
            >
              <span>{currentRoom.name}</span>
              <span className="arrow">▾</span>
            </button>
            {mobileRoomMenuOpen && (
              <div className="mobile-dropdown-menu">
                {rooms.map((r, i) => (
                  <button
                    key={r.id}
                    type="button"
                    className={`mobile-menu-item ${i === activeRoomIndex ? 'active' : ''}`}
                    onClick={() => {
                      setActiveRoomIndex(i);
                      setMobileRoomMenuOpen(false);
                    }}
                  >
                    {r.name}
                  </button>
                ))}
              </div>
            )}
          </div>

          {/* Presets Dropdown */}
          <div className="mobile-overlay-dropdown">
            <span className="dropdown-field-label">Atmosphere</span>
            <button 
              type="button" 
              className={`mobile-dropdown-trigger ${mobilePresetMenuOpen ? 'active' : ''}`}
              onClick={() => {
                setMobilePresetMenuOpen(!mobilePresetMenuOpen);
                setMobileRoomMenuOpen(false);
              }}
            >
              <span>{getActivePresetName()}</span>
              <span className="arrow">▾</span>
            </button>
            {mobilePresetMenuOpen && (
              <div className="mobile-dropdown-menu right-aligned">
                {Object.keys(presets).map((key) => {
                  const presetLabel = key === 'relaxation' ? 'Relaxation' :
                                      key === 'art' ? 'Art Study' :
                                      key === 'entertain' ? 'Entertaining' :
                                      key === 'blackout' ? 'Blackout' :
                                      key === 'morning' ? 'Morning' :
                                      key === 'dinner' ? 'Dinner' :
                                      key === 'evening' ? 'Evening' :
                                      key === 'night' ? 'Night' : key;
                  return (
                    <button
                      key={key}
                      type="button"
                      className={`mobile-menu-item ${isPresetActive(key) ? 'active' : ''}`}
                      onClick={() => {
                        applyPreset(key);
                        setMobilePresetMenuOpen(false);
                      }}
                    >
                      {presetLabel}
                    </button>
                  );
                })}
              </div>
            )}
          </div>
        </div>

        {/* 4 Vertical Channel Sliders Side-by-Side */}
        <div className="mobile-sliders-row">
          {['cove', 'down', 'accent', 'decor'].map((cid) => {
            const ch = currentState[cid];
            const isActive = activeChannelId === cid;
            const label = cid === 'cove' ? 'Cove' :
                          cid === 'down' ? 'Down' :
                          cid === 'accent' ? 'Accent' : 'Decor';

            return (
              <div 
                key={cid} 
                className={`mobile-slider-capsule ${isActive ? 'selected' : ''}`}
                onClick={() => setActiveChannelId(cid)}
              >
                <span className="slider-percentage-label">
                  {ch.enabled ? `${ch.dim}%` : 'OFF'}
                </span>

                <div 
                  className="vertical-slider-wrapper"
                  onTouchStart={(e) => handleSliderTouch(e, cid)}
                  onTouchMove={(e) => handleSliderTouch(e, cid)}
                >
                  <input 
                    type="range" 
                    min="0" 
                    max="100" 
                    step="5"
                    disabled={!ch.enabled}
                    value={ch.enabled ? ch.dim : 0}
                    onChange={(e) => updateChannel(cid, 'dim', parseInt(e.target.value))}
                    className="vertical-slider-input"
                  />
                  <div className="vertical-slider-track">
                    <div 
                      className="vertical-slider-fill" 
                      style={{ 
                        height: `${ch.enabled ? ch.dim : 0}%`,
                        background: ch.enabled 
                          ? `rgba(${getKelvinColorRGB(ch.k)}, 0.85)` 
                          : 'rgba(255,255,255,0.05)'
                      }} 
                    />
                  </div>
                </div>

                <button 
                  type="button" 
                  className={`mobile-capsule-power-btn ${ch.enabled ? 'on' : 'off'}`}
                  onClick={(e) => {
                    e.stopPropagation();
                    updateChannel(cid, 'enabled', !ch.enabled);
                  }}
                >
                  <span className="power-led" />
                  <span className="channel-label">{label}</span>
                </button>
              </div>
            );
          })}
        </div>

        {/* Dynamic Warmth Slider for selected channel */}
        <div className="mobile-warmth-container">
          <div className="warmth-label-row">
            <span className="warmth-title">
              {activeChannelId.toUpperCase()} WARMTH
            </span>
            <span className="warmth-value">
              {getKelvinText(currentState[activeChannelId].k)}
            </span>
          </div>
          <input 
            type="range" 
            min="1800" 
            max="5000" 
            step="100"
            disabled={!currentState[activeChannelId].enabled}
            value={currentState[activeChannelId].k}
            onChange={(e) => updateChannel(activeChannelId, 'k', parseInt(e.target.value))}
            className="mobile-warmth-slider"
            style={{ 
              '--pct': `${((currentState[activeChannelId].k - 1800) / 3200) * 100}%`,
              opacity: currentState[activeChannelId].enabled ? 1 : 0.35 
            }}
          />
        </div>
      </div>
    </div>
  );
}

// ─── ATMOSPHERE CONTROL ──────────────────────────────────────────
function AtmosphereControl() {
  return (
    <section id="study" className="atmosphere-section" data-screen-label="04 Study">
      <div className="study-header">
        <div data-reveal>
          <span className="label">04 — Interactive Study</span>
          <h2 style={{ marginTop: 16 }}>The <em className="italic" style={{ color: 'var(--umber)' }}>Lumina</em> Modulator</h2>
        </div>
        <p data-reveal style={{ maxWidth: '60ch', color: 'var(--ink-soft)' }}>
          Step into our virtual lighting design laboratory. Select an architectural space to experiment with independent downlights, cove grazing, accent spotlights, and decorative sconces. Observe the realistic shifts in lumens, warmth, and power consumption.
        </p>
      </div>
      <div data-reveal style={{ marginTop: 48 }}>
        <LightModulator />
      </div>
    </section>
  );
}

// ─── SERVICES OVERVIEW ───────────────────────────────────────────
function Services() {
  const services = [
    {
      label: "Service · Interior",
      title: "Interior Design",
      body: "Concept direction, layouts, custom millwork, and final styling for the lived experience of each room.",
      points: ["Concept & mood direction", "Space planning & layouts", "FF&E sourcing", "Material palettes", "Custom millwork", "Styling & final install"],
    },
    {
      label: "Service · Lighting",
      title: "Lighting Design",
      body: "Architectural layouts, decorative fixtures, dim-to-warm strategy, and contractor-ready documentation.",
      points: ["Architectural layouts", "Decorative fixture selection", "Dim-to-warm strategy", "High CRI / R9 specifications", "Control scenes", "Staged fixture delivery"],
    },
    {
      label: "Service · Integrated",
      title: "The Integrated Residence",
      body: "A unified vision — one studio, one process, one point of communication, from concept to final glow.",
      points: ["Unified interior + lighting direction", "Single point of communication", "Coordinated procurement", "Room-by-room strategy", "Final programming", "Walkthrough"],
    },
  ];
  return (
    <section id="services" className="services-overview" data-screen-label="04 Services">
      <div className="services-head">
        <div data-reveal>
          <span className="label">04 — Services</span>
          <h2 style={{marginTop: 16}}>One vision from concept <em className="italic">to final glow.</em></h2>
        </div>
        <p data-reveal style={{maxWidth: '50ch'}}>
          Three offerings designed around the way private residences are actually built — whether
          you need the full integrated practice or a precise contribution to an in-progress project.
        </p>
      </div>
      <div className="svc-grid">
        {services.map((s, i) => (
          <article key={s.title} className="svc-card" data-reveal style={{'--reveal-delay': (i * 120) + 'ms'}}>
            <span className="label">{s.label}</span>
            <h3>{s.title}</h3>
            <p>{s.body}</p>
            <ul>
              {s.points.map(pt => <li key={pt}>{pt}</li>)}
            </ul>
            <a className="tlink arrow-link" href="Services.html" style={{marginTop: 28, alignSelf:'flex-start'}}>
              View Service Details <span className="arrow">→</span>
            </a>
          </article>
        ))}
      </div>
    </section>
  );
}

// ─── PROCESS — The Lumina Method ─────────────────────────────────
function Process() {
  const steps = [
    { n: "01", title: "Listen",    body: "We begin with how you live — your rituals, routines, taste, architecture, and the feeling you want your home to hold." },
    { n: "02", title: "Compose",   body: "We develop the interior concept, material direction, furniture language, and lighting atmosphere together." },
    { n: "03", title: "Calibrate", body: "Selections are refined, technical layouts finalized, investments aligned, controls and fixture plans documented." },
    { n: "04", title: "Procure",   body: "We coordinate orders, schedules, submittals, labeling, staged delivery, and site communication." },
    { n: "05", title: "Reveal",    body: "We bring the home into its final state through installation, styling, scene programming, and walkthrough." },
  ];
  return (
    <section id="process" className="process" data-screen-label="05 Process">
      <div className="process-inner">
        <div className="process-head">
          <div data-reveal>
            <span className="label">05 — Process</span>
            <h2 style={{marginTop:16}}>The <em className="italic">Lumina</em> Method</h2>
          </div>
          <p data-reveal style={{maxWidth: '50ch'}}>
            Five phases, refined over years of private residential work. Each step exists to remove
            decisions from the homeowner and place them inside a single, calmer creative process.
          </p>
        </div>
        <div className="steps">
          {steps.map((s, i) => (
            <div className="step" key={s.n} data-reveal style={{'--reveal-delay': (i * 90) + 'ms'}}>
              <span className="step-num">{s.n}</span>
              <h3 className="step-title">{s.title}</h3>
              <p>{s.body}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── LIGHTING STRATEGY — every room has its own hour ─────────────
function LightingStrategy() {
  const rooms = [
    { tag: "Living Spaces",   hr: "20:00", body: "Layered light for conversation, art, custom millwork, and evening comfort.", slot: "rm-living", ph: "Linen sofa · warm shadow" },
    { tag: "Kitchen & Dining", hr: "19:00", body: "Task clarity by day, hospitality and warmth by night.",                      slot: "rm-kitchen", ph: "Pendant over dining table" },
    { tag: "Primary Suite",    hr: "22:00", body: "Dim-to-warm lighting, reading light, low pathway illumination.",              slot: "rm-suite",   ph: "Bedside warm lamp" },
    { tag: "Baths",            hr: "06:30", body: "Clean functional light with soft architectural warmth and flattering rendering.", slot: "rm-bath", ph: "Limestone vanity wall" },
    { tag: "Exterior · Landscape", hr: "21:30", body: "Arrival sequences, pathways, tropical foliage, and architecture lit with restraint.", slot: "rm-exterior", ph: "Tropical foliage lit softly" },
  ];
  return (
    <section className="lighting-strategy" data-screen-label="06 Lighting Strategy">
      <div className="lighting-head">
        <div data-reveal>
          <span className="label">06 — Lighting Strategy</span>
          <h2 style={{marginTop:16}}>Every room has <em className="italic">its own hour.</em></h2>
        </div>
        <p data-reveal style={{maxWidth: '50ch'}}>
          We design lighting room by room — with attention to how the space is used in each hour
          of the day. Below: how the home moves from arrival to rest.
        </p>
      </div>
      <div className="room-rail">
        {rooms.map((r, i) => (
          <article key={r.tag} className="room hover-spotlight" data-reveal style={{'--reveal-delay': (i * 80) + 'ms'}}>
            <div className="img-frame parallax-frame curtain-frame">
              <image-slot id={r.slot} placeholder={r.ph} shape="rect"></image-slot>
            </div>
            <span className="hr-tag">{r.hr}</span>
            <h4>{r.tag}</h4>
            <p>{r.body}</p>
          </article>
        ))}
      </div>
    </section>
  );
}

// ─── TECHNICAL PROOF ─────────────────────────────────────────────
function TechIcon({ kind }) {
  const stroke = "var(--brass)";
  const common = { width: 28, height: 28, fill: "none", stroke, strokeWidth: 1.2, strokeLinecap: "square" };
  if (kind === "dim") return (
    <svg {...common} viewBox="0 0 24 24"><circle cx="12" cy="12" r="6" /><line x1="12" y1="2" x2="12" y2="5" /><line x1="12" y1="19" x2="12" y2="22" /><line x1="2" y1="12" x2="5" y2="12" /><line x1="19" y1="12" x2="22" y2="12" /></svg>
  );
  if (kind === "cri") return (
    <svg {...common} viewBox="0 0 24 24"><rect x="3" y="3" width="6" height="18" /><rect x="9" y="3" width="6" height="18" /><rect x="15" y="3" width="6" height="18" /></svg>
  );
  if (kind === "ceiling") return (
    <svg {...common} viewBox="0 0 24 24"><line x1="2" y1="5" x2="22" y2="5" /><line x1="8" y1="9" x2="8" y2="13" /><line x1="14" y1="9" x2="14" y2="13" /><line x1="20" y1="9" x2="20" y2="13" /></svg>
  );
  if (kind === "scene") return (
    <svg {...common} viewBox="0 0 24 24"><rect x="4" y="4" width="16" height="16" /><line x1="9" y1="8" x2="9" y2="16" /><line x1="15" y1="8" x2="15" y2="12" /></svg>
  );
  if (kind === "docs") return (
    <svg {...common} viewBox="0 0 24 24"><rect x="4" y="3" width="16" height="18" /><line x1="8" y1="8" x2="16" y2="8" /><line x1="8" y1="12" x2="16" y2="12" /><line x1="8" y1="16" x2="13" y2="16" /></svg>
  );
  return null;
}
function TechProof() {
  const features = [
    { icon: "dim",     title: "Dim-to-Warm",                body: "Lighting that softens as it dims, supporting evening comfort and intimacy." },
    { icon: "cri",     title: "Color Fidelity",             body: "High CRI and R9 values let wood, stone, fabric, art, and skin tones appear natural and alive." },
    { icon: "ceiling", title: "Quiet Ceilings",             body: "Flangeless, mud-in, and concealed fixtures reduce visual clutter and reveal architecture." },
    { icon: "scene",   title: "Scene Control",              body: "One-touch scenes for Morning, Bright, Dinner, Evening, and Night." },
    { icon: "docs",    title: "Contractor Documentation",   body: "Clear layouts, schedules, labels, and submittals for smooth execution on site." },
  ];
  return (
    <section className="tech-proof" data-screen-label="07 Technical Proof">
      <div className="tech-proof-inner">
        <div className="tech-head">
          <div data-reveal>
            <span className="label">07 — Technical Proof</span>
            <h2 style={{marginTop:16}}>Technology disappears. <em className="italic">Atmosphere remains.</em></h2>
          </div>
          <p data-reveal>
            The specifications behind a quiet, atmospheric home — handled so the conversation can
            stay where it should: how the residence feels.
          </p>
        </div>
        <div className="tech-grid">
          {features.map((f, i) => (
            <article key={f.title} className="tech-card" data-reveal style={{'--reveal-delay': (i * 80) + 'ms'}}>
              <TechIcon kind={f.icon} />
              <h4>{f.title}</h4>
              <p>{f.body}</p>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// ─── PORTFOLIO PREVIEW ───────────────────────────────────────────
function PortfolioPreview() {
  return (
    <section id="portfolio" className="portfolio-section" data-screen-label="08 Portfolio">
      <div className="portfolio-head">
        <div data-reveal>
          <span className="label">08 — Selected Work</span>
          <h2 style={{marginTop:16}}>Residences composed for <em className="italic">day, dusk, and night.</em></h2>
        </div>
        <div data-reveal>
          <p>A small selection of integrated residence projects and material studies. Each is photographed at the hour it was designed for.</p>
          <a className="tlink" href="Portfolio.html" style={{marginTop: 24, display:'inline-flex'}}>View Full Portfolio <span className="arrow">→</span></a>
        </div>
      </div>
      <div className="portfolio-grid">
        <article className="proj-card proj-wide hover-spotlight" data-reveal>
          <div className="img-frame parallax-frame curtain-frame-x" style={{'--ar': '5 / 4'}}>
            <image-slot id="proj-1" placeholder="Hāmākua House · evening interior" shape="rect"></image-slot>
          </div>
          <div className="meta"><span>01 · PRIVATE RESIDENCE</span><span>HĀMĀKUA · HAWAI‘I</span></div>
          <h4>Hāmākua House</h4>
          <p>A coastal residence composed in plaster, koa, and aged brass — designed for the long evenings on the cliff.</p>
        </article>
        <article className="proj-card proj-tall hover-spotlight" data-reveal style={{'--reveal-delay':'120ms'}}>
          <div className="img-frame parallax-frame curtain-frame-x" style={{'--ar': '4 / 5'}}>
            <image-slot id="proj-2" placeholder="Hanalei Kitchen · pendant" shape="rect"></image-slot>
          </div>
          <div className="meta"><span>02 · KITCHEN STUDY</span><span>HANALEI · KAUA‘I</span></div>
          <h4>Hanalei Kitchen</h4>
          <p>A working kitchen reframed as the social heart of the home, with task light by day and gather-light by night.</p>
        </article>
        <article className="proj-card proj-mid hover-spotlight" data-reveal>
          <div className="img-frame parallax-frame curtain-frame-x" style={{'--ar': '4 / 3'}}>
            <image-slot id="proj-3" placeholder="Wailea Primary Suite · dim-to-warm" shape="rect"></image-slot>
          </div>
          <div className="meta"><span>03 · PRIMARY SUITE</span><span>WAILEA · MAUI</span></div>
          <h4>Wailea Suite</h4>
          <p>A quiet bedroom suite engineered for sleep — every fixture dim-to-warm, every transition silent.</p>
        </article>
        <article className="proj-card proj-narrow hover-spotlight" data-reveal style={{'--reveal-delay':'120ms'}}>
          <div className="img-frame parallax-frame curtain-frame-x" style={{'--ar': '4 / 3'}}>
            <image-slot id="proj-4" placeholder="Material study · linen · stone · brass" shape="rect"></image-slot>
          </div>
          <div className="meta"><span>04 · MATERIAL STUDY</span><span>STUDIO ARCHIVE</span></div>
          <h4>Material Atlas vol. III</h4>
          <p>An ongoing study in how everyday surfaces age — and how the right light can make them feel inevitable.</p>
        </article>
      </div>
    </section>
  );
}

// ─── STUDIO / ABOUT ──────────────────────────────────────────────
function Studio() {
  return (
    <section id="studio" className="studio" data-screen-label="09 Studio">
      <div className="studio-inner">
        <div className="studio-text" data-reveal>
          <span className="label">09 — Studio</span>
          <h2 style={{marginTop: 16}}>Two studios. <br/><em className="italic">One composed vision.</em></h2>
          <p>
            Hale Lumina brings together interior design and lighting design as one integrated process. By aligning material selections, furniture, architecture, fixture placement, controls, and final atmosphere, the collaboration gives homeowners, architects, and builders a more seamless path from concept to completion.
          </p>
          <p>
            The work is private, residential, and quietly considered — built on long relationships with builders and craftspeople across the Hawaiian Islands.
          </p>
          <blockquote className="quote">
            “We don’t just light spaces. We reveal their essence.”
          </blockquote>
        </div>
        <div className="studio-image img-frame parallax-frame curtain-frame" data-reveal style={{'--reveal-delay':'120ms', aspectRatio: '4 / 5'}}>
          <image-slot id="studio-portrait" placeholder="Founder portrait · studio interior" shape="rect"></image-slot>
        </div>
      </div>
    </section>
  );
}

// ─── TESTIMONIALS ────────────────────────────────────────────────
function Testimonials() {
  const [activeSegment, setActiveSegment] = React.useState('general');

  const getDetails = () => {
    switch (activeSegment) {
      case 'jessica':
        return {
          title: "Jessica's Execution",
          subtitle: "Interior & Procurement Direction",
          traits: [
            { label: "High Organization", desc: "Structured project timelines and seamless coordination." },
            { label: "Procurement Efficiency", desc: "Precision material sourcing, spec validation, and delivery staging." },
            { label: "Client & Budget Focus", desc: "Clear cost tracking, client alignment, and high responsiveness." }
          ]
        };
      case 'dee':
        return {
          title: "Dee's Direction",
          subtitle: "Interior & Atmosphere Design",
          traits: [
            { label: "Bespoke Vision", desc: "Deep understanding of client lifestyle to create highly personal spaces." },
            { label: "Timeless Aesthetics", desc: "Balanced volumes, rich textures, and enduring material selections." },
            { label: "Solution-Oriented", desc: "Resolving site and design challenges while aligning to schedule and budget." }
          ]
        };
      case 'general':
      default:
        return {
          title: "Collaborative Values",
          subtitle: "The Integrated Practice",
          traits: [
            { label: "Unified Communication", desc: "One cohesive design-builder channel over 10 years of trust." },
            { label: "Dependable Partnership", desc: "Collaborative, responsive, and easy to work with on complex builds." },
            { label: "Exceptional Experience", desc: "Unwavering commitment to delivery for both clients and project teams." }
          ]
        };
    }
  };

  const details = getDetails();

  return (
    <section id="testimonials" className="testimonials" data-screen-label="10 Testimonials">
      <div className="testimonials-inner">
        <div className="testimonials-grid">
          
          {/* Left Column — Info, Stamp & Desktop Values Card */}
          <div className="testimonials-meta-col" data-reveal>
            <span className="label">10 — Collaboration</span>
            <h2>A Builder’s <em className="italic">Perspective</em></h2>
            
            <div className="builder-info-clean">
              <div className="builder-avatar-stamp">
                <span className="stamp-letters">KK</span>
                <svg className="stamp-ring" viewBox="0 0 100 100">
                  <path id="stamp-curve" fill="none" d="M 12 50 a 38 38 0 1 1 76 0 a 38 38 0 1 1 -76 0" />
                  <text className="stamp-text">
                    <textPath href="#stamp-curve" startOffset="50%" textAnchor="middle">
                      KEVIN KELLER • BUILDER • PARTNER •
                    </textPath>
                  </text>
                </svg>
              </div>
              <div className="builder-details">
                <h4 className="builder-name">Kevin Keller</h4>
                <p className="builder-title">BUILDER</p>
                <p className="builder-context">10-Year Collaboration on High-End Residential Projects</p>
              </div>
            </div>

            {/* Dynamic Values Breakdown Panel (Desktop: Left Column) */}
            <div className="values-breakdown-card hover-spotlight desktop-only-card">
              <div className="values-header">
                <span className="values-subtitle">{details.subtitle}</span>
                <h4 className="values-title">{details.title}</h4>
              </div>
              <div className="values-list">
                {details.traits.map((t, idx) => (
                  <div className="value-item" key={idx}>
                    <span className="value-bullet"></span>
                    <div className="value-text">
                      <span className="value-label">{t.label}</span>
                      <p className="value-desc">{t.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Right Column — Interactive Blockquote & Mobile Values Card */}
          <div className="testimonials-quote-col" data-reveal style={{ '--reveal-delay': '120ms' }}>
            <blockquote className="editorial-quote">
              <span 
                className={`quote-segment ${activeSegment === 'general' ? 'active' : ''}`}
                onMouseEnter={() => setActiveSegment('general')}
                onClick={() => setActiveSegment('general')}
              >
                “Having worked alongside Jessica Read and Dee Gotel on several high-end residential projects over the past 10 years, it is easy to recognize the value they both bring to every project they serve.
              </span>
              {" "}
              <span 
                className={`quote-segment highlight-jessica ${activeSegment === 'jessica' ? 'active' : ''}`}
                onMouseEnter={() => setActiveSegment('jessica')}
                onMouseLeave={() => setActiveSegment('general')}
                onClick={() => setActiveSegment('jessica')}
              >
                Jessica consistently demonstrates a high level of organization, responsiveness, and problem-solving ability, while maintaining a strong focus on budget, client service, and efficiency pertaining to material selection and procurement.
              </span>
              {" "}
              <span 
                className={`quote-segment highlight-dee ${activeSegment === 'dee' ? 'active' : ''}`}
                onMouseEnter={() => setActiveSegment('dee')}
                onMouseLeave={() => setActiveSegment('general')}
                onClick={() => setActiveSegment('dee')}
              >
                Dee brings the same level of professionalism and attention to detail through her solution-oriented approach to interior design, with a remarkable ability to understand each homeowner’s vision and create spaces that feel both personal and timeless while meeting the project’s schedule and budget.
              </span>
              {" "}
              <span 
                className={`quote-segment ${activeSegment === 'general' ? 'active' : ''}`}
                onMouseEnter={() => setActiveSegment('general')}
                onClick={() => setActiveSegment('general')}
              >
                What truly sets them apart is not only their experience, but also the way they work with people — collaborative, dependable, easy to work with, and genuinely committed to delivering an exceptional experience for both clients and project teams.”
              </span>
            </blockquote>

            {/* Dynamic Values Breakdown Panel (Mobile: stacks under the quote) */}
            <div className="values-breakdown-card hover-spotlight mobile-only-card">
              <div className="values-header">
                <span className="values-subtitle">{details.subtitle}</span>
                <h4 className="values-title">{details.title}</h4>
              </div>
              <div className="values-list">
                {details.traits.map((t, idx) => (
                  <div className="value-item" key={idx}>
                    <span className="value-bullet"></span>
                    <div className="value-text">
                      <span className="value-label">{t.label}</span>
                      <p className="value-desc">{t.desc}</p>
                    </div>
                  </div>
                ))}
              </div>
            </div>

          </div>

        </div>
      </div>
    </section>
  );
}

// ─── CTA ─────────────────────────────────────────────────────────
function CTASection() {
  return (
    <section id="contact" className="cta-section" data-screen-label="11 Contact">
      <div className="cta-glow" aria-hidden="true" />
      <div className="cta-inner">
        <span className="label" style={{color:'var(--brass)'}}>11 — Begin a Consultation</span>
        <h2 style={{marginTop: 24}} data-reveal>
          Let’s create a home that <em>fully feels like you.</em>
        </h2>
        <p data-reveal>
          Begin with a private consultation. We’ll discuss your residence, your design goals, and how interior and lighting direction can bring the home into harmony.
        </p>
        <div className="cta-buttons" data-reveal>
          <a className="btn btn-primary" href="mailto:hello@halelumina.com">Schedule a Consultation <span className="arrow">→</span></a>
          <a className="btn btn-ghost-light" href="Services.html">View Services</a>
        </div>
        <div className="cta-meta">
          <div>Studio<b>Hale Lumina</b></div>
          <div>Location<b>Maui · Hawai‘i</b></div>
          <div>Inquiries<b>hello@halelumina.com</b></div>
          <div>Hours<b>Mon — Fri · By appointment</b></div>
        </div>
      </div>
    </section>
  );
}

// ─── FOOTER ─────────────────────────────────────────────────────
function Footer() {
  return (
    <footer className="site-footer">
      <div className="footer-inner">
        <div className="footer-brand">
          <div style={{display:'flex', alignItems:'center', gap: 14}}>
            <HLMark size={48} />
            <HLWordmark size={12} tracking="0.34em" />
          </div>
          <p>Interior &amp; Light Direction for private residences. Composed in Maui, Hawai‘i.</p>
        </div>
        <div>
          <h5>Practice</h5>
          <ul>
            <li><a href="#studio">Studio</a></li>
            <li><a href="Services.html">Services</a></li>
            <li><a href="#process">Process</a></li>
            <li><a href="#journal">Journal</a></li>
          </ul>
        </div>
        <div>
          <h5>Work</h5>
          <ul>
            <li><a href="Portfolio.html">Selected Residences</a></li>
            <li><a href="Portfolio.html">Lighting Strategy</a></li>
            <li><a href="Portfolio.html">Material Studies</a></li>
            <li><a href="Portfolio.html">Detail Studies</a></li>
          </ul>
        </div>
        <div>
          <h5>Contact</h5>
          <ul>
            <li><a href="mailto:hello@halelumina.com">hello@halelumina.com</a></li>
            <li><a href="tel:+18081234567">+1 (808) 123-4567</a></li>
            <li><a href="#">Instagram</a></li>
            <li><a href="#">Journal</a></li>
          </ul>
        </div>
      </div>
      <div className="footer-base">
        <span>© 2026 HALE LUMINA · ALL RIGHTS RESERVED</span>
        <span>MAUI · HAWAI‘I</span>
        <span>INTERIOR &amp; LIGHT DIRECTION</span>
      </div>
    </footer>
  );
}

Object.assign(window, {
  BrandPromise, Philosophy, AtmosphereControl, Services, Process,
  LightingStrategy, TechProof, PortfolioPreview, Studio, Testimonials, CTASection, Footer
});