/* Home A — Tweaks panel */

const HOME_A_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroPhoto": 0,
  "headline": "stellar",
  "accent": "cyan",
  "showStars": true
}/*EDITMODE-END*/;

const HERO_PHOTOS_A = [
  { name: "Our pool (your photo)", url: "assets/hero-pool.jpg" },
  { name: "Sunset pool (stock)", url: "https://images.unsplash.com/photo-1582610116397-edb318620f90?w=2400&q=85" },
  { name: "Twilight patio (stock)", url: "https://images.unsplash.com/photo-1613977257363-707ba9348227?w=2400&q=85" },
  { name: "Modern night (stock)", url: "https://images.unsplash.com/photo-1600585154340-be6161a56a0c?w=2400&q=85" }
];

const HEADLINES_A = {
  stellar: { line1: "Stellar stays", line2: "await" },
  perfect: { line1: "Your perfect escape", line2: "starts here" },
  cosmic:  { line1: "Welcome to the", line2: "Cosmic Selection" }
};

function HomeATweaks() {
  const [tweaks, setTweak] = useTweaks(HOME_A_DEFAULTS);

  // Apply hero photo
  React.useEffect(() => {
    const el = document.getElementById('heroPhoto');
    if (el) el.style.backgroundImage = `url('${HERO_PHOTOS_A[tweaks.heroPhoto].url}')`;
  }, [tweaks.heroPhoto]);

  // Apply headline
  React.useEffect(() => {
    const el = document.getElementById('heroHeadline');
    if (!el) return;
    const h = HEADLINES_A[tweaks.headline];
    el.innerHTML = `${h.line1}<br><span class="accent">${h.line2}</span>`;
  }, [tweaks.headline]);

  // Apply accent color of bottom line of headline
  React.useEffect(() => {
    const styleId = 'home-a-accent-style';
    let s = document.getElementById(styleId);
    if (!s) { s = document.createElement('style'); s.id = styleId; document.head.appendChild(s); }
    const color = tweaks.accent === 'cyan' ? 'var(--cv-moon-400)' : 'var(--cv-magenta-400)';
    s.textContent = `.hero-a h1 .accent { color: ${color} !important; }`;
  }, [tweaks.accent]);

  // Stars on/off
  React.useEffect(() => {
    const el = document.querySelector('.hero-a .stars');
    if (el) el.style.display = tweaks.showStars ? '' : 'none';
  }, [tweaks.showStars]);

  return (
    <TweaksPanel title="Tweaks · Home A">
      <TweakSection label="Hero">
        <TweakSelect
          label="Hero photo"
          value={tweaks.heroPhoto}
          onChange={(v) => setTweak('heroPhoto', Number(v))}
          options={HERO_PHOTOS_A.map((p, i) => ({ value: i, label: p.name }))}
        />
        <TweakRadio
          label="Headline"
          value={tweaks.headline}
          onChange={(v) => setTweak('headline', v)}
          options={[
            { value: 'stellar', label: 'Stellar' },
            { value: 'perfect', label: 'Perfect' },
            { value: 'cosmic',  label: 'Cosmic' }
          ]}
        />
        <TweakRadio
          label="Accent color"
          value={tweaks.accent}
          onChange={(v) => setTweak('accent', v)}
          options={[
            { value: 'cyan', label: 'Cyan' },
            { value: 'magenta', label: 'Magenta' }
          ]}
        />
        <TweakToggle
          label="Twinkling stars"
          value={tweaks.showStars}
          onChange={(v) => setTweak('showStars', v)}
        />
      </TweakSection>
    </TweaksPanel>
  );
}

ReactDOM.createRoot(document.getElementById('tweaks-root')).render(<HomeATweaks />);