// hifi-app.jsx — composes the whole site + Tweaks panel

// ───────────────────────────────────────────────────────────
// Locked content — confirmed values for the live site.
// Edit these strings to update the headline / about copy in one place.
// ───────────────────────────────────────────────────────────
const TAGLINE = ['となりの席の', 'IT屋さん'];

const ABOUT = [
  '私たちは、<strong>Web制作・システム開発・AI活用支援</strong>を行うIT会社です。お客さま一人ひとりに丁寧に向き合いながら、技術で日々の仕事を支えていきます。',
  '声がよく聞こえる距離感を大切に。スピード感のある対応と、長くおつきあいできる関係づくりを心がけています。',
];

const LEAD = 'お客さまの「やってみたい」を、無理なくかたちにします。';

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "companyName": "株式会社コントリ",
  "heroVariant": "thread",
  "heroEcho": false,
  "aiIconVariant": "chat",
  "headingFont": "mplus",
  "showThanks": false
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [showFallback, setShowFallback] = React.useState(false);

  // Heading font swap — applies to all English headings (Section EN labels,
  // nav English, "CASE" labels, etc.) via CSS variables.
  React.useEffect(() => {
    const presets = {
      dmserif:    { family: "'DM Serif Display', serif",         style: 'italic', weight: '400' },
      fraunces:   { family: "'Fraunces', serif",                  style: 'italic', weight: '500' },
      caveat:     { family: "'Caveat', cursive",                  style: 'normal', weight: '600' },
      bricolage:  { family: "'Bricolage Grotesque', sans-serif",  style: 'normal', weight: '500' },
      mplus:      { family: "'M PLUS 1p', sans-serif",            style: 'normal', weight: '700' },
      outfit:     { family: "'Outfit', sans-serif",               style: 'normal', weight: '600' },
      spacegrot:  { family: "'Space Grotesk', sans-serif",        style: 'normal', weight: '500' },
    };
    const p = presets[t.headingFont] || presets.dmserif;
    const r = document.documentElement;
    r.style.setProperty('--f-en', p.family);
    r.style.setProperty('--f-en-style', p.style);
    r.style.setProperty('--f-en-weight', p.weight);
  }, [t.headingFont]);

  // In the design editor, the host's toolbar drives the Tweaks panel.
  // For the published site, we still allow opening Tweaks by adding `?tweaks`
  // to the URL — useful while iterating, hidden by default for visitors.
  React.useEffect(() => {
    const wantTweaks =
      typeof window !== 'undefined' &&
      (window.location.search.includes('tweaks') ||
       window.location.hash.includes('tweaks'));
    if (!wantTweaks) return;
    const id = setTimeout(() => setShowFallback(true), 600);
    return () => clearTimeout(id);
  }, []);

  const openTweaks = () => {
    window.postMessage({ type: '__activate_edit_mode' }, '*');
  };

  useReveal();

  const tagline = TAGLINE;
  const about = ABOUT;
  const lead = LEAD;

  return (
    <React.Fragment>
      <Header companyName={t.companyName} />
      <main>
        <Hero tagline={tagline} lead={lead} heroVariant={t.heroVariant} heroEcho={t.heroEcho} />
        <About paragraphs={about} />
        <Service aiIconVariant={t.aiIconVariant} />
        {/* Works は公開準備中のため非表示 */}
        <Company companyName={t.companyName} />
        <Contact />
      </main>
      <Footer companyName={t.companyName} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="見出しの英文フォント" />
        <TweakSelect
          label="フォント"
          value={t.headingFont}
          options={[
            { value: 'mplus',     label: 'A. M PLUS 1p（現在・幾何学ゴシック）' },
            { value: 'dmserif',   label: 'B. DM Serif Display（エディトリアル）' },
            { value: 'fraunces',  label: 'C. Fraunces Italic（モダンセリフ）' },
            { value: 'caveat',    label: 'D. Caveat（手書き・温かみ）' },
            { value: 'bricolage', label: 'E. Bricolage Grotesque（モダンサンセリフ）' },
            { value: 'outfit',    label: 'F. Outfit（モダンゴシック・きりっと）' },
            { value: 'spacegrot', label: 'G. Space Grotesk（ニュートラルゴシック）' },
          ]}
          onChange={(v) => setTweak('headingFont', v)}
        />

        <TweakSection label="メインビジュアル" />
        <TweakSelect
          label="ヒーロー画像"
          value={t.heroVariant}
          options={[
            { value: 'thread',     label: 'A. Thread（糸を結ぶ／丁寧に編む）' },
            { value: 'twocircles', label: 'B. Two Circles（重なり・関係性の中心）' },
            { value: 'ripples',    label: 'C. Ripples Meet（響き合い・歩み寄り）' },
            { value: 'topo',       label: '— Topo Lines' },
            { value: 'arcs',       label: '— Sunrise Arcs' },
            { value: 'shapes',     label: '— Soft Shapes' },
          ]}
          onChange={(v) => setTweak('heroVariant', v)}
        />
        <TweakToggle
          label="内側の点線C（Threadのみ）"
          value={t.heroEcho}
          onChange={(v) => setTweak('heroEcho', v)}
        />

        <TweakSection label="事業内容 03 のアイコン" />
        <TweakSelect
          label="AI & DX アイコン"
          value={t.aiIconVariant}
          options={[
            { value: 'robot', label: 'A. ロボット' },
            { value: 'chat',  label: 'B. 対話バブル＋スパーク（現在）' },
            { value: 'spark', label: 'C. 手のひらにのるスパーク' },
          ]}
          onChange={(v) => setTweak('aiIconVariant', v)}
        />

        <TweakSection label="会社名" />
        <TweakText
          label="表示名"
          value={t.companyName}
          onChange={(v) => setTweak('companyName', v)}
        />
      </TweaksPanel>

      {showFallback && (
        <button
          onClick={openTweaks}
          style={{
            position: 'fixed', right: 16, bottom: 16, zIndex: 999,
            padding: '10px 18px',
            borderRadius: 999,
            background: '#306b3a', color: '#fff',
            border: 0, cursor: 'pointer',
            fontFamily: 'DM Sans, system-ui, sans-serif',
            fontSize: 12, fontWeight: 600, letterSpacing: '.16em',
            boxShadow: '0 6px 20px rgba(48,107,58,.25)',
          }}
        >
          ⚙ TWEAKS
        </button>
      )}
    </React.Fragment>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);