// SoftWarm — main shell (nav, hero, CTA, footer) for the polished
// standalone landing page.  Reads strings from SWStrings, pulls
// in mid-page sections from window.SW.

const { useState: useStateSW, useEffect: useEffectSW } = React;

function SoftWarmVariant({ initialLang = 'ja' }) {
  const [lang, setLang] = useStateSW(initialLang);
  const t = SWStrings[lang];

  const C = {
    bg: '#FAF6EE',
    surface: '#FFFFFF',
    ink: '#2A2620',
    inkSoft: '#6B635A',
    line: 'rgba(42,38,32,0.10)',
    green: '#2F8F5E',
    greenSoft: '#D6ECDC',
    greenDeep: '#1F6F4A',
    peach: '#F5C9A8',
    mint: '#C7E5D2',
    sand: '#EFE6D2',
  };

  const display = '"Shippori Mincho", "Noto Serif JP", Georgia, serif';
  const body = '"Noto Sans JP", -apple-system, BlinkMacSystemFont, sans-serif';

  return (
    <div style={{
      width: '100%',
      fontFamily: body,
      color: C.ink,
      background: C.bg,
      overflow: 'hidden',
      position: 'relative',
    }}>
      <SWNav lang={lang} setLang={setLang} t={t} C={C} display={display} />
      <SWHero lang={lang} t={t} C={C} display={display} />
      <SW.SWTrust t={t} C={C} display={display} />
      <SW.SWBridge t={t} C={C} display={display} />
      <SW.SWStory t={t} C={C} display={display} lang={lang} />
      {t.featBridge && <SW.SWMiniBridge text={t.featBridge} C={C} display={display} accent="green" />}
      <SW.SWFeatures t={t} C={C} display={display} lang={lang} />
      <SW.SWSpotlight t={t} C={C} display={display} lang={lang} />
      {t.compareRows && <SW.SWCompare t={t} C={C} display={display} />}
      <SW.SWHow t={t} C={C} display={display} lang={lang} />
      <SW.SWHowDetail t={t} C={C} display={display} lang={lang} />
      {t.priceBridge && <SW.SWMiniBridge text={t.priceBridge} C={C} display={display} accent="sand" />}
      <SW.SWPrice t={t} C={C} display={display} lang={lang} />
      {/* <SW.SWVoices t={t} C={C} display={display} lang={lang} /> hidden until real reviews are in */}
      <SW.SWFaq t={t} C={C} display={display} lang={lang} />
      <SW.SWDisclaimer t={t} C={C} display={display} lang={lang} />
      <SWCta lang={lang} t={t} C={C} display={display} />
      <SWFooter lang={lang} t={t} C={C} display={display} />
    </div>
  );
}

// --- Brand mark using the actual app icon -------------------------------
function SWBrand({ size = 36, display }) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
      <img
        src="assets/app-icon.png"
        alt="みまもり / Mimari"
        width={size} height={size}
        style={{ borderRadius: size * 0.22, display: 'block' }}
      />
      <div style={{ lineHeight: 1 }}>
        <div style={{ fontFamily: display, fontSize: 22, fontWeight: 500, letterSpacing: '0.06em' }}>みまもり</div>
        <div style={{ fontFamily: display, fontSize: 10, letterSpacing: '0.32em', color: '#6B635A', marginTop: 4 }}>MIMARI</div>
      </div>
    </div>
  );
}

// --- Top navigation ------------------------------------------------------
function SWNav({ lang, setLang, t, C, display }) {
  const [scrolled, setScrolled] = useStateSW(false);
  useEffectSW(() => {
    const onScroll = () => setScrolled(window.scrollY > 12);
    window.addEventListener('scroll', onScroll, { passive: true });
    return () => window.removeEventListener('scroll', onScroll);
  }, []);

  const navAnchor = [
    { href: '#features', label: t.nav[0], icon: 'M12 3l2.09 5.26L20 9l-4 3.9.94 5.6L12 16l-4.94 2.5L8 12.9 4 9l5.91-.74L12 3z' },
    { href: '#how',      label: t.nav[1], icon: 'M4 6h16 M4 12h16 M4 18h10' },
    { href: '#price',    label: t.nav[2], icon: 'M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z M7 7h.01' },
    { href: '#faq',      label: t.nav[3], icon: 'M12 22a10 10 0 1 0 0-20 10 10 0 0 0 0 20z M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3 M12 17h.01' },
  ];

  return (
    <nav style={{
      position: 'sticky',
      top: 0,
      zIndex: 50,
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'space-between',
      padding: '18px 56px',
      background: scrolled ? 'rgba(250,246,238,0.86)' : 'rgba(250,246,238,0)',
      backdropFilter: scrolled ? 'saturate(140%) blur(12px)' : 'none',
      WebkitBackdropFilter: scrolled ? 'saturate(140%) blur(12px)' : 'none',
      borderBottom: scrolled ? `1px solid ${C.line}` : '1px solid transparent',
      transition: 'background .25s ease, border-color .25s ease',
    }} className="sw-nav">
      <SWBrand display={display} size={36} />
      <div style={{ display: 'flex', alignItems: 'center', gap: 32, fontSize: 14 }} className="sw-nav-links">
        {navAnchor.map((n, i) => (
          <a key={i} href={n.href} style={{ display: 'inline-flex', alignItems: 'center', gap: 6, color: C.ink, textDecoration: 'none', opacity: 0.78 }}>
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
              <path d={n.icon} />
            </svg>
            {n.label}
          </a>
        ))}
        <a
          href={lang === 'ja' ? 'docs/manual/mimamori_manual_ja.html' : 'docs/manual/mimamori_manual_en.html'}
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 6,
            color: C.ink, textDecoration: 'none', opacity: 0.78,
            whiteSpace: 'nowrap',
          }}
        >
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
            <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
            <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z" />
          </svg>
          {lang === 'ja' ? '取扱説明書' : 'Manual'}
        </a>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14 }}>
        <a
          href={`https://twitter.com/intent/tweet?text=${encodeURIComponent(t.shareText)}&url=${encodeURIComponent(typeof window !== 'undefined' ? window.location.href : '')}&via=KeiceSoft`}
          target="_blank"
          rel="noopener noreferrer"
          aria-label={t.shareLabel}
          className="sw-nav-share"
          style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '8px 16px', borderRadius: 999,
            background: C.ink, color: '#fff', textDecoration: 'none',
            fontSize: 13, fontWeight: 500, letterSpacing: '0.02em',
            transition: 'opacity .15s ease', whiteSpace: 'nowrap',
          }}
          onMouseEnter={e => e.currentTarget.style.opacity = '0.82'}
          onMouseLeave={e => e.currentTarget.style.opacity = '1'}
        >
          <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden>
            <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z" />
          </svg>
          <span className="sw-nav-share-label">{t.shareLabel}</span>
        </a>
        <LangToggle lang={lang} setLang={setLang} accent={C.green} bg="rgba(47,143,94,0.10)" />
      </div>
    </nav>
  );
}

// --- Hero ----------------------------------------------------------------
function SWHero({ lang, t, C, display }) {
  return (
    <section className="sw-hero-sec" style={{ position: 'relative', padding: '72px 56px 96px' }}>
      <div aria-hidden style={{
        position: 'absolute', top: -80, right: -120, width: 580, height: 580,
        background: `radial-gradient(circle at 30% 30%, ${C.greenSoft} 0%, transparent 70%)`,
        filter: 'blur(20px)', zIndex: 0,
      }} />
      <div aria-hidden style={{
        position: 'absolute', top: 200, left: -80, width: 380, height: 380,
        background: `radial-gradient(circle, ${C.peach}66 0%, transparent 70%)`,
        filter: 'blur(30px)', zIndex: 0,
      }} />

      <div style={{
        display: 'grid', gridTemplateColumns: '1.05fr 0.95fr',
        gap: 56, alignItems: 'center',
        position: 'relative', zIndex: 1,
        maxWidth: 1280, margin: '0 auto',
      }} className="sw-hero-grid">
        <div>
          <div style={{
            display: 'inline-flex', alignItems: 'center', gap: 8,
            padding: '8px 16px', borderRadius: 999,
            background: C.surface, border: `1px solid ${C.line}`,
            fontSize: 12, fontWeight: 600, color: C.greenDeep, letterSpacing: '0.04em',
            whiteSpace: 'nowrap',
          }}>
            <span style={{ width: 6, height: 6, background: C.green, borderRadius: 999 }} />
            {t.eyebrow}
          </div>
          <h1 style={{
            fontFamily: display,
            fontSize: 'clamp(40px, 5vw, 64px)',
            fontWeight: 500,
            lineHeight: 1.22,
            letterSpacing: '0.005em',
            margin: '28px 0 24px',
            textWrap: 'pretty',
          }}>
            {t.h1Top}<br />
            <span style={{ color: C.greenDeep }}>{t.h1Bot}</span>
          </h1>
          <p className="sw-hero-lead" style={{
            fontSize: 18, lineHeight: 1.9, color: C.inkSoft, whiteSpace: 'pre-line',
            maxWidth: 480, margin: '0 0 36px',
          }}>{t.leadP}</p>

          <AppBadges lang={lang} size="lg" />

          {/* Inline pilot note */}
          <div style={{
            marginTop: 20, display: 'inline-flex', alignItems: 'center', gap: 10,
            padding: '10px 14px', borderRadius: 12,
            background: C.peach + '40',
            fontSize: 13, color: '#7E4F39', maxWidth: 480,
          }}>
            <span style={{ width: 6, height: 6, background: '#C4564B', borderRadius: 999, flexShrink: 0 }} />
            <span>
              {lang === 'ja'
                ? '現在「試験運用中」 — 料金は無料でご利用いただけます。'
                : 'Currently in pilot — free to use during the trial.'}
            </span>
          </div>
        </div>

        {/* Phone composition */}
        <div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: 680 }} className="sw-hero-phone">
          <svg className="sw-hero-phone-leaf" width="140" height="140" viewBox="0 0 120 120" style={{ position: 'absolute', top: 30, right: 10, opacity: 0.6 }} aria-hidden>
            <path d="M20,80 Q40,20 100,30 Q70,60 60,100 Q40,95 20,80 Z" fill={C.mint} />
            <path d="M30,70 Q50,40 90,42" stroke={C.green} strokeWidth="1.2" fill="none" opacity="0.5" />
          </svg>
          <div className="sw-hero-phone-bg" style={{
            position: 'absolute', width: 400, height: 400,
            background: C.sand, borderRadius: '50%',
            top: '50%', left: '50%', transform: 'translate(-50%,-50%)',
            opacity: 0.7,
          }} />
          <div className="sw-hero-phone-frame-wrap">
          <PhoneFrame
            src="assets/app-screenshot.webp"
            width={300}
            frameColor="#26221C"
            shadow="0 40px 80px -20px rgba(31,111,74,.30), 0 18px 40px -12px rgba(20,40,30,.20)"
          />
          </div>
          {/* Floating notification card */}
          <div className="sw-hero-float" style={{
            position: 'absolute', bottom: 60, left: 0,
            background: C.surface,
            padding: '14px 18px',
            borderRadius: 16,
            boxShadow: '0 18px 40px -12px rgba(20,40,30,.18)',
            display: 'flex', alignItems: 'center', gap: 12,
            maxWidth: 240,
          }}>
            <div style={{
              width: 36, height: 36, borderRadius: 999, background: C.greenSoft,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: C.greenDeep, fontSize: 18,
            }}>✓</div>
            <div>
              <div style={{ fontSize: 12, color: C.inkSoft, marginBottom: 2 }}>{t.heroCardTime}</div>
              <div style={{ fontSize: 13, fontWeight: 600 }}>{t.heroCardMsg}</div>
            </div>
          </div>
          {/* Floating SOS pill */}
          <div className="sw-hero-float" style={{
            position: 'absolute', top: 110, right: -10,
            background: C.surface, padding: '10px 14px', borderRadius: 14,
            boxShadow: '0 18px 40px -12px rgba(20,40,30,.18)',
            fontSize: 12, color: C.ink, display: 'flex', alignItems: 'center', gap: 10,
          }}>
            <span style={{ width: 8, height: 8, background: '#C4564B', borderRadius: 999 }} />
            <span style={{ fontFamily: display, fontWeight: 600 }}>{t.heroSosLabel}</span>
            <span style={{ color: C.inkSoft }}>{t.heroSosNote}</span>
          </div>
        </div>
      </div>
    </section>
  );
}

// --- CTA -----------------------------------------------------------------
function SWCta({ lang, t, C, display }) {
  const ref = SW.useReveal();
  return (
    <section ref={ref} style={{ padding: '110px 56px' }}>
      <div style={{
        maxWidth: 1280, margin: '0 auto',
        background: `linear-gradient(135deg, ${C.greenDeep} 0%, ${C.green} 100%)`,
        borderRadius: 32,
        padding: '72px 72px',
        color: '#fff',
        display: 'grid', gridTemplateColumns: '1.2fr 0.8fr', gap: 40, alignItems: 'center',
        position: 'relative', overflow: 'hidden',
      }} className="sw-cta-grid sw-cta-card">
        <div aria-hidden style={{
          position: 'absolute', right: -100, top: -100, width: 360, height: 360,
          background: 'rgba(255,255,255,0.08)', borderRadius: '50%',
        }} />
        <div aria-hidden style={{
          position: 'absolute', right: 140, bottom: -80, width: 220, height: 220,
          background: 'rgba(255,255,255,0.06)', borderRadius: '50%',
        }} />
        <div style={{ position: 'relative' }}>
          <div style={{ fontSize: 12, fontWeight: 700, letterSpacing: '0.22em', color: C.greenSoft, marginBottom: 18 }}>
            {t.ctaEyebrow.toUpperCase()}
          </div>
          <h2 style={{ fontFamily: display, fontSize: 48, fontWeight: 500, margin: '0 0 18px', lineHeight: 1.3, whiteSpace: 'pre-line' }}>
            {t.ctaTitle}
          </h2>
          <p style={{ fontSize: 17, opacity: 0.88, lineHeight: 1.8, margin: '0 0 36px', maxWidth: 480 }}>
            {t.ctaSub}
          </p>
          <AppBadges lang={lang} dark size="lg" />
        </div>
        <div style={{ display: 'flex', justifyContent: 'flex-end', position: 'relative' }}>
          <div style={{
            background: 'rgba(255,255,255,0.12)',
            backdropFilter: 'blur(8px)',
            WebkitBackdropFilter: 'blur(8px)',
            padding: 36, borderRadius: 28,
            display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 16,
          }}>
            <img src="assets/app-icon.png" width={120} height={120} alt="" style={{ borderRadius: 28, display: 'block', boxShadow: '0 16px 32px -10px rgba(0,0,0,0.25)' }} />
            <div style={{ fontFamily: display, fontSize: 16, letterSpacing: '0.12em' }}>みまもり · MIMARI</div>
          </div>
        </div>
      </div>
    </section>
  );
}

// --- Footer --------------------------------------------------------------
function SWFooter({ lang, t, C, display }) {
  return (
    <footer className="sw-footer-sec" style={{ padding: '64px 56px 40px', borderTop: `1px solid ${C.line}`, background: C.surface }}>
      <div style={{ maxWidth: 1280, margin: '0 auto' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr 1fr 1fr', gap: 48, marginBottom: 48 }} className="sw-footer-grid">
          <div>
            <SWBrand display={display} size={32} />
            <p style={{ fontSize: 13, color: C.inkSoft, lineHeight: 1.8, margin: '18px 0 24px', maxWidth: 320 }}>
              {t.footerTagline}
            </p>
            <a
              href="https://play.google.com/store/apps/details?id=com.keice.mima"
              target="_blank"
              rel="noopener noreferrer"
              style={{ display: 'inline-block', textDecoration: 'none' }}
              onMouseEnter={e => e.currentTarget.style.transform = 'translateY(-2px)'}
              onMouseLeave={e => e.currentTarget.style.transform = 'none'}
            >
              <img
                src={lang === 'ja' ? 'assets/google-play-badge-ja.png' : 'assets/google-play-badge-en.png'}
                alt={lang === 'ja' ? 'Google Play で手に入れよう' : 'Get it on Google Play'}
                style={{ height: 44, width: 'auto', display: 'block', transition: 'transform .15s ease' }}
              />
            </a>
          </div>
          {t.footerCols.map((col, i) => (
            <div key={i}>
              <div style={{ fontSize: 13, fontWeight: 700, marginBottom: 16, fontFamily: display, letterSpacing: '0.06em' }}>{col.h}</div>
              {col.items.map((it, j) => {
                const label = typeof it === 'string' ? it : it.label;
                const href  = typeof it === 'string' ? '#'    : it.href;
                const isExternal = href.startsWith('http');
                return (
                  <a
                    key={j}
                    href={href}
                    target={isExternal ? '_blank' : undefined}
                    rel={isExternal ? 'noopener noreferrer' : undefined}
                    style={{
                      display: 'block', fontSize: 13, color: C.inkSoft,
                      marginBottom: 10, textDecoration: 'none',
                    }}
                    onMouseEnter={e => e.currentTarget.style.color = C.ink}
                    onMouseLeave={e => e.currentTarget.style.color = C.inkSoft}
                  >{label}</a>
                );
              })}
            </div>
          ))}
        </div>
        <div className="sw-footer-bot" style={{ paddingTop: 28, borderTop: `1px solid ${C.line}`, display: 'flex', justifyContent: 'space-between', flexWrap: 'wrap', gap: 16, fontSize: 12, color: C.inkSoft, alignItems: 'center' }}>
          <span>{t.copy}</span>
        </div>
      </div>
    </footer>
  );
}

window.SoftWarmVariant = SoftWarmVariant;