// direction-d-more.jsx
// Solution / News / Company / Member / Contact / Footer
// Uses useT() (from i18n.jsx) for all copy.

const Dm   = window.DirD_Palette;
const fSans    = window.DirD_Fonts.dSans;
const fDisplay = window.DirD_Fonts.dDisplay;
const fMono    = window.DirD_Fonts.dMono;
const DirD_SectionMark = window.DirD_SectionMark;
const DirD_Nav         = window.DirD_Nav;
const DirD_Hero        = window.DirD_Hero;
const DirD_About       = window.DirD_About;
const DirD_Business    = window.DirD_Business;

// ── Solution ─────────────────────────────────────────────────────────────────
function DirD_Solution() {
  const t = useT();
  return (
    <section id="solution" data-screen-label="04 Solution" style={{ background: Dm.bg, padding: 'var(--section-py) var(--section-px)' }}>
      <DirD_SectionMark en={t.solutionWord} />
      <p style={{
        fontFamily: fSans, fontSize: 'clamp(15px, 1.5vw, 19px)', lineHeight: 1.85, color: Dm.ink2, fontWeight: 500,
        margin: '24px 0 64px', maxWidth: 980,
      }}>
        {t.solutionLeadA}<br/>
        <span style={{ color: Dm.ink, fontWeight: 800 }}>{t.solutionLeadB}</span>
      </p>

      {/* Product card */}
      <div className="solution-product-card" style={{
        background: Dm.panel, color: Dm.bg, padding: 'clamp(32px, 4vw, 56px) clamp(24px, 4vw, 48px)',
        display: 'grid', gridTemplateColumns: 'var(--product-card-cols)', gap: 'clamp(32px, 4vw, 64px)', alignItems: 'start',
      }}>
        {/* Left: product info */}
        <div>
          <div style={{ fontFamily: fMono, fontSize: 11, letterSpacing: '0.22em', color: Dm.lime, fontWeight: 700, textTransform: 'uppercase', marginBottom: 16 }}>
            {t.productKicker}
          </div>
          <h3 style={{
            fontFamily: fDisplay, fontSize: 60, lineHeight: 0.95, letterSpacing: '-0.03em',
            color: Dm.bg, margin: '0 0 14px',
          }}>
            <span className="solution-product-main" style={{ whiteSpace: 'nowrap' }}>{t.productNameA}</span><br/>{t.productNameB}
          </h3>
          <div style={{
            fontFamily: fSans, fontSize: 15, color: 'rgba(255,255,255,0.7)',
            fontWeight: 500, marginBottom: 32, letterSpacing: '0.02em',
          }}>
            {t.productTag}
          </div>
          <p style={{ fontFamily: fSans, fontSize: 14.5, lineHeight: 2.1, color: 'rgba(255,255,255,0.78)', margin: 0 }}>
            {t.productDesc}
          </p>
        </div>

        {/* Right: metrics */}
        <div className="solution-metrics-grid" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16 }}>
          <DirD_Metric labelText={t.metricA.label} delta={t.metricA.delta} deltaPrefix={t.metricA.deltaPrefix} suffix={t.metricA.suffix} baseH={56} compareH={104} before={t.metricBefore} after={t.metricAfter} />
          <DirD_Metric labelText={t.metricB.label} delta={t.metricB.delta} deltaPrefix={t.metricB.deltaPrefix} suffix={t.metricB.suffix} baseH={104} compareH={74} before={t.metricBefore} after={t.metricAfter} />
          <div style={{
            gridColumn: '1 / -1', fontFamily: fMono, fontSize: 10, letterSpacing: '0.18em',
            color: 'rgba(255,255,255,0.45)', textTransform: 'uppercase', marginTop: 4,
          }}>{t.metricNote}</div>
        </div>
      </div>

      {/* CTA */}
      <div className="solution-cta-bar" style={{
        marginTop: 16, background: Dm.lime, color: Dm.ink,
        padding: 'clamp(20px, 3vw, 28px) clamp(20px, 3vw, 32px)',
        display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 'clamp(16px, 3vw, 24px)',
        flexWrap: 'wrap',
      }}>
        <div style={{ fontFamily: fSans, fontSize: 18, fontWeight: 700, lineHeight: 1.6 }}>
          {t.solutionCTAText}
        </div>
        <a className="solution-cta-link" href="https://forms.cloud.microsoft/r/kzpVzZHifS" target="_blank" rel="noopener" style={{
          background: Dm.panel, color: Dm.lime, padding: '16px 32px',
          textDecoration: 'none', fontFamily: fMono, fontSize: 13, letterSpacing: '0.18em', fontWeight: 700,
          display: 'inline-flex', alignItems: 'center', gap: 8, flexShrink: 0,
        }}>Contact <span>→</span></a>
      </div>
    </section>
  );
}

function DirD_Metric({ labelText, delta, deltaPrefix, suffix, baseH, compareH, before, after }) {
  const maxH = Math.max(baseH, compareH);
  const baseHeight = (baseH / maxH) * 100;
  const compareHeight = (compareH / maxH) * 100;
  const CHART_BASELINE = 150;
  const baseTop = CHART_BASELINE - baseHeight;
  const compareTop = CHART_BASELINE - compareHeight;
  const ax1 = 60,  ay1 = baseTop - 14;
  const ax2 = 140, ay2 = compareTop - 12;
  const apexY = Math.max(8, Math.min(baseTop, compareTop) - 32);
  const cx = 100, cy = apexY;
  const arrowId = `arr-${(labelText||'').replace(/[^A-Za-z]/g, '')||'m'}`;

  return (
    <div className="metric-card" style={{
      padding: '8px 0 0',
      display: 'flex', flexDirection: 'column', gap: 18, minHeight: 320,
      borderTop: '1px solid rgba(255,255,255,0.14)',
    }}>
      <div style={{ fontFamily: fMono, fontSize: 10, letterSpacing: '0.2em', color: 'rgba(255,255,255,0.6)', textTransform: 'uppercase' }}>
        {labelText}
      </div>
      <div style={{ display: 'inline-flex', alignItems: 'baseline', gap: 4, whiteSpace: 'nowrap' }}>
        {deltaPrefix && (
          <span style={{ fontFamily: fSans, fontSize: 20, lineHeight: 1, color: Dm.lime, fontWeight: 700, alignSelf: 'center' }}>{deltaPrefix}</span>
        )}
        <span style={{ fontFamily: fDisplay, fontSize: 'clamp(36px, 4.2vw, 52px)', lineHeight: 0.9, color: Dm.lime, letterSpacing: '-0.03em' }}>{delta}</span>
        <span style={{ fontFamily: fSans, fontSize: 14, color: Dm.lime, fontWeight: 700 }}>{suffix}</span>
      </div>

      <svg viewBox="0 0 200 220" style={{ width: '100%', maxWidth: 200, height: 'auto', display: 'block', marginTop: 'auto', alignSelf: 'center' }}>
        <defs>
          <marker id={arrowId} markerWidth="10" markerHeight="10" refX="7" refY="5" orient="auto" markerUnits="userSpaceOnUse">
            <path d="M 0 0 L 10 5 L 0 10 Z" fill={Dm.lime} />
          </marker>
        </defs>
        <line x1="20" y1={CHART_BASELINE} x2="180" y2={CHART_BASELINE} stroke="rgba(255,255,255,0.14)" strokeWidth="1" />
        <rect x="40"  y={baseTop}    width="40" height={baseHeight}    fill="rgba(255,255,255,0.22)" />
        <rect x="120" y={compareTop} width="40" height={compareHeight} fill={Dm.lime} />
        <path d={`M ${ax1} ${ay1} Q ${cx} ${cy} ${ax2} ${ay2}`}
              stroke={Dm.lime} strokeWidth="2" fill="none" strokeLinecap="round" markerEnd={`url(#${arrowId})`} />
        <text x="60"  y="180" textAnchor="middle" fill="rgba(255,255,255,0.5)" fontFamily="IBM Plex Mono, monospace" fontSize="12" letterSpacing="1">{before}</text>
        <text x="140" y="180" textAnchor="middle" fill={Dm.lime}                fontFamily="IBM Plex Mono, monospace" fontSize="12" letterSpacing="1" fontWeight="700">{after}</text>
      </svg>
    </div>
  );
}

// ── News ─────────────────────────────────────────────────────────────────
function DirD_News() {
  const t = useT();
  return (
    <section id="news" data-screen-label="05 News" style={{ background: Dm.bg, padding: 'var(--section-py) var(--section-px)' }}>
      <DirD_SectionMark en={t.newsWord} />
      <div style={{ marginTop: 48, borderTop: `1px solid ${Dm.ink}` }}>
        {t.newsItems.map((n, i) => {
          const hasLink = !!n.link;
          const Tag = hasLink ? 'a' : 'div';
          const tagProps = hasLink ? {
            href: n.link,
            target: '_blank',
            rel: 'noopener noreferrer',
            className: 'news-item news-item--link',
          } : { className: 'news-item' };
          return (
            <Tag key={i} {...tagProps} style={{
              display: 'grid', gridTemplateColumns: '180px 1fr auto', gap: 32,
              padding: '28px 0', borderBottom: `1px solid ${Dm.rule}`,
              alignItems: 'center',
              textDecoration: 'none',
            }}>
              <div className="news-date" style={{ fontFamily: fMono, fontSize: 13, letterSpacing: '0.14em', color: Dm.limeDk, fontWeight: 700 }}>
                {n.date}
              </div>
              <div className="news-title" style={{ fontFamily: fSans, fontSize: 18, color: Dm.ink, fontWeight: 700 }}>
                {n.title}
              </div>
              {hasLink && (
                <div className="news-arrow" style={{ color: Dm.limeDk, fontSize: 18, fontWeight: 700, flexShrink: 0 }}>↗</div>
              )}
            </Tag>
          );
        })}
      </div>
    </section>
  );
}

// ── Company ─────────────────────────────────────────────────────────────────
function DirD_Company() {
  const t = useT();
  return (
    <section id="company" data-screen-label="06 Company" style={{ background: Dm.bg, padding: 'var(--section-py) var(--section-px)' }}>
      <DirD_SectionMark en={t.companyWord} />
      <table className="company-table" style={{ width: '100%', borderCollapse: 'collapse', marginTop: 48, maxWidth: 1100 }}>
        <tbody>
          {t.companyRows.map(([l, v], i) => (
            <tr key={l} className="company-row" style={{ borderTop: i === 0 ? `1px solid ${Dm.ink}` : 'none', borderBottom: `1px solid ${Dm.rule}` }}>
              <td className="company-label" style={{
                width: 220, padding: '24px 0', verticalAlign: 'top',
                fontFamily: fMono, fontSize: 11, letterSpacing: '0.22em',
                color: Dm.limeDk, fontWeight: 700, textTransform: 'uppercase',
              }}>{l}</td>
              <td className="company-value" style={{
                padding: '24px 0', verticalAlign: 'top',
                fontFamily: fSans, fontSize: 16, color: Dm.ink, fontWeight: 600, lineHeight: 1.7,
              }}>{v}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </section>
  );
}

// ── Member ─────────────────────────────────────────────────────────────────
function DirD_Member() {
  const t = useT();
  // Image paths zipped by index — assumes member order is the same in both langs
  const images = [
    (window.__resources&&window.__resources.photoYajima)||'assets/photo_yajima.png',
    (window.__resources&&window.__resources.photoMorita)||'assets/photo_morita.jpg',
    (window.__resources&&window.__resources.photoMotomura)||'assets/photo_motomura.jpg',
    (window.__resources&&window.__resources.photoTajima)||'assets/photo_tajima.jpg',
    (window.__resources&&window.__resources.photoMiyai)||'assets/photo_miyai.png',
    (window.__resources&&window.__resources.photoOyagi)||'assets/photo_oyagi.jpg',
  ];
  return (
    <section id="member" data-screen-label="07 Member" style={{ background: Dm.bg, padding: 'var(--section-py) var(--section-px)' }}>
      <DirD_SectionMark en={t.memberWord} />
      <div className="member-grid" style={{
        marginTop: 56, display: 'grid', gridTemplateColumns: 'var(--grid-6)', gap: 16,
        maxWidth: 'var(--member-grid-max, 1280px)',
      }}>
        {t.members.map((m, idx) => (
          m.placeholder ? (
            <div key={idx} style={{ background: 'transparent', padding: 16, visibility: 'hidden' }} aria-hidden="true">
              <div style={{ width: '100%', aspectRatio: '1' }}></div>
            </div>
          ) : (
            <div key={idx} className="member-card" style={{ background: '#E5E4E0', padding: 16 }}>
              <img src={images[idx]} alt={m.name} style={{ width: '100%', aspectRatio: '1', objectFit: 'cover', background: '#D6D4CE' }} />
              <div className="member-card-body" style={{ paddingTop: 14 }}>
                <div className="member-name" style={{ fontFamily: fSans, fontSize: 16, fontWeight: 900, color: Dm.ink, letterSpacing: '0.02em' }}>
                  {m.name}
                </div>
                <div className="member-role" style={{ fontFamily: fMono, fontSize: 12, letterSpacing: '0.12em', color: Dm.limeDk, fontWeight: 700, textTransform: 'uppercase', marginTop: 6 }}>
                  {m.role}
                </div>
                {m.sub && (
                  <div className="member-sub" style={{ fontFamily: fSans, fontSize: m.subSize || 13, color: Dm.mute, marginTop: 8, lineHeight: 1.7, whiteSpace: 'pre-line' }}>
                    {m.sub}
                  </div>
                )}
              </div>
            </div>
          )
        ))}
      </div>
    </section>
  );
}

// ── Contact ─────────────────────────────────────────────────────────────────
function DirD_Contact() {
  const t = useT();
  return (
    <section id="contact" data-screen-label="08 Contact" style={{ background: Dm.bg, padding: 'var(--section-py) var(--section-px)' }}>
      <DirD_SectionMark en={t.contactWord} />
      <div className="contact-panel" style={{
        marginTop: 32, background: Dm.panel, color: Dm.bg,
        padding: 'clamp(40px, 6vw, 72px) clamp(28px, 4vw, 56px)',
        display: 'flex', alignItems: 'center', gap: 'clamp(24px, 4vw, 48px)', flexWrap: 'wrap',
      }}>
        <h2 style={{
          fontFamily: fSans, fontWeight: 700, fontSize: 'clamp(20px, 2.4vw, 26px)', lineHeight: 1.7,
          letterSpacing: '0.01em', color: Dm.bg, margin: 0, flex: '1 1 320px',
        }}>
          {t.contactBodyA}<br/>{t.contactBodyB}
        </h2>
        <a className="contact-cta-link" href="https://forms.cloud.microsoft/r/kzpVzZHifS" target="_blank" rel="noopener" style={{
          background: Dm.lime, color: Dm.ink, padding: '22px 40px',
          textDecoration: 'none', fontFamily: fMono, fontSize: 14, letterSpacing: '0.18em', fontWeight: 700,
          display: 'inline-flex', alignItems: 'center', gap: 12,
          flexShrink: 0, marginLeft: 'auto',
        }}>Contact <span>→</span></a>
      </div>
    </section>
  );
}

// ── Footer ─────────────────────────────────────────────────────────────────
function DirD_Footer() {
  const t = useT();
  return (
    <footer className="site-footer" style={{
      background: Dm.bg, borderTop: `1px solid ${Dm.rule}`,
      padding: '32px var(--section-px)', display: 'flex', alignItems: 'center', gap: 'clamp(12px, 2vw, 24px)', flexWrap: 'wrap',
    }}>
      <a href="https://www.hakuhodody-holdings.co.jp/terms/" target="_blank" rel="noopener" style={{ fontFamily: fSans, fontSize: 12, color: Dm.mute, textDecoration: 'none' }}>{t.terms}</a>
      <a href="https://www.hakuhodody-holdings.co.jp/privacy_policy/" target="_blank" rel="noopener" style={{ fontFamily: fSans, fontSize: 12, color: Dm.mute, textDecoration: 'none' }}>{t.privacy}</a>
      <a href="https://www.hakuhodody-holdings.co.jp/" target="_blank" rel="noopener" style={{ fontFamily: fSans, fontSize: 12, color: Dm.mute, textDecoration: 'none' }}>{t.holdings}</a>
      <span style={{ flex: 1 }}></span>
      <span style={{ fontFamily: fMono, fontSize: 11, color: Dm.mute, letterSpacing: '0.12em' }}>
        {t.copyright}
      </span>
    </footer>
  );
}

// ── Full site ────────────────────────────
function DirectionDFull() {
  return (
    <div style={{ background: Dm.bg, color: Dm.ink, width: '100%', minHeight: '100%', scrollBehavior: 'smooth' }}>
      <DirD_Nav />
      <DirD_Hero />
      <div style={{ maxWidth: 1440, margin: '0 auto', position: 'relative' }}>
        <DirD_About />
        <DirD_Business />
        <DirD_Solution />
        <DirD_News />
        <DirD_Company />
        <DirD_Member />
        <DirD_Contact />
      </div>
      <DirD_Footer />
    </div>
  );
}

window.DirectionDFull = DirectionDFull;
Object.assign(window, { DirD_Solution, DirD_News, DirD_Company, DirD_Member, DirD_Contact, DirD_Footer });