// Nordbank — static pages: Landing, Loans, ConsumerLoan, InsurancePortal, Login, About.

// -----------------------------------------------------------------------------
// Landing  /
// -----------------------------------------------------------------------------

function Landing() {
  useLang();
  return (
    <div className="nb-fade">
      {/* Hero */}
      <section className="relative">
        <div className="absolute inset-0 -z-10 overflow-hidden">
          {/* Abstract Nordic geometry — a subtle peak motif behind the hero */}
          <svg className="absolute -right-20 top-10 opacity-[0.07]" width="640" height="520" viewBox="0 0 640 520" aria-hidden="true">
            <path d="M0 480 L160 200 L260 320 L400 120 L520 340 L640 240 L640 520 L0 520 Z" fill="#0B2545"/>
            <path d="M0 480 L160 320 L260 400 L400 240 L520 380 L640 320 L640 520 L0 520 Z" fill="#13B5B1"/>
          </svg>
        </div>

        <div className="max-w-6xl mx-auto px-4 md:px-6 pt-16 md:pt-24 pb-16 md:pb-20 grid md:grid-cols-12 gap-10 items-start">
          <div className="md:col-span-7">
            <p className="text-xs font-semibold tracking-[0.18em] uppercase text-teal-700">{t('hero.eyebrow')}</p>
            <h1 className="mt-3 text-[clamp(2.5rem,6vw,4.5rem)] font-semibold tracking-tight text-navy-900 leading-[1.02]" style={{ textWrap: 'balance' }}>
              {t('hero.title')}
            </h1>
            <p className="mt-5 text-lg md:text-xl text-navy-500 leading-relaxed max-w-xl" style={{ textWrap: 'pretty' }}>
              {t('hero.subtitle')}
            </p>
            <div className="mt-8 flex flex-wrap items-center gap-3">
              <RouterLink to="/apply" className="inline-flex items-center gap-2 bg-navy-900 hover:bg-navy-700 text-white text-sm font-semibold px-6 py-3.5 rounded-full transition-colors shadow-card">
                {t('hero.cta')}
                <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 7 H12 M8 3 L12 7 L8 11" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </RouterLink>
              <RouterLink to="/loans/consumer" className="inline-flex items-center gap-2 text-sm font-semibold text-navy-900 hover:text-teal-700 px-3 py-3.5">
                {t('hero.secondary')}
                <span aria-hidden="true">→</span>
              </RouterLink>
            </div>

            <ul className="mt-10 grid sm:grid-cols-3 gap-3 max-w-xl">
              {['hero.bullet1','hero.bullet2','hero.bullet3'].map(k => (
                <li key={k} className="flex items-start gap-2 text-sm text-navy-700">
                  <span className="mt-0.5 text-teal-500" aria-hidden="true">
                    <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 7 L6 11 L12 3" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
                  </span>
                  <span>{t(k)}</span>
                </li>
              ))}
            </ul>
          </div>

          {/* Right-side rate teaser card */}
          <div className="md:col-span-5 md:pl-6">
            <RateTeaserCard />
          </div>
        </div>
      </section>

      {/* Products */}
      <section className="bg-white border-t hairline">
        <div className="max-w-6xl mx-auto px-4 md:px-6 py-16 md:py-20">
          <SectionHeading
            eyebrow={t('hero.eyebrow').split(' · ')[0]}
            title={t('landing.productsTitle')}
            lede={t('landing.productsLede')}
          />
          <div className="mt-10 grid md:grid-cols-3 gap-4">
            <ProductCard
              icon={<IconWallet/>}
              title={t('landing.products.consumer')}
              copy={t('landing.products.consumerCopy')}
              to="/loans/consumer"
              cta={t('landing.openProduct')}
            />
            <ProductCard
              icon={<IconHouse/>}
              title={t('landing.products.mortgage')}
              copy={t('landing.products.mortgageCopy')}
              soon
              comingSoonLabel={t('landing.comingSoon')}
            />
            <ProductCard
              icon={<IconCar/>}
              title={t('landing.products.car')}
              copy={t('landing.products.carCopy')}
              soon
              comingSoonLabel={t('landing.comingSoon')}
            />
          </div>
        </div>
      </section>

      {/* How it works */}
      <section>
        <div className="max-w-6xl mx-auto px-4 md:px-6 py-16 md:py-20">
          <SectionHeading title={t('landing.howTitle')} />
          <ol className="mt-10 grid md:grid-cols-3 gap-6">
            {[
              { title: t('landing.how1Title'), copy: t('landing.how1Copy') },
              { title: t('landing.how2Title'), copy: t('landing.how2Copy') },
              { title: t('landing.how3Title'), copy: t('landing.how3Copy') },
            ].map((s, i) => (
              <li key={i} className="relative">
                <div className="flex items-center gap-3">
                  <span className="flex h-9 w-9 items-center justify-center rounded-full bg-navy-900 text-white text-sm font-semibold tnum">
                    {i + 1}
                  </span>
                  <h3 className="text-lg font-semibold text-navy-900">{s.title}</h3>
                </div>
                <p className="mt-3 text-navy-500 leading-relaxed">{s.copy}</p>
              </li>
            ))}
          </ol>
        </div>
      </section>

      {/* Trust strip */}
      <section className="bg-navy-900 text-white">
        <div className="max-w-6xl mx-auto px-4 md:px-6 py-16 md:py-20">
          <div className="grid md:grid-cols-2 gap-12 items-center">
            <h2 className="text-3xl md:text-4xl font-semibold tracking-tight" style={{ textWrap: 'balance' }}>
              {t('landing.trustTitle')}
            </h2>
            <ul className="space-y-4">
              {[
                ['bankid', 'landing.trust.bankid'],
                ['gdpr', 'landing.trust.gdpr'],
                ['finanstilsynet', 'landing.trust.finanstilsynet'],
              ].map(([k, key]) => (
                <li key={k} className="flex items-center gap-4 pb-4 border-b border-white/10 last:border-0 last:pb-0">
                  <TrustGlyph kind={k}/>
                  <span className="text-base text-white/90">{t(key)}</span>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </section>
    </div>
  );
}

function RateTeaserCard() {
  const lang = useLang();
  // Static teaser: 150k @ 5 years.
  const q = quoteLoan(150000, 5);
  // Use NOK for visual consistency; this is purely a teaser, not a quote.
  const currency = 'NOK';
  return (
    <Card className="p-6 md:p-7">
      <div className="flex items-center justify-between">
        <p className="text-xs font-semibold tracking-[0.18em] uppercase text-navy-500">
          {t('consumer.exampleTitle')}
        </p>
        <span className="text-[10px] font-semibold tracking-wider uppercase px-2 py-1 rounded-md bg-teal-50 text-teal-700">
          {t('apply.step1.nominalRate')} {formatPercent(q.nominalRate, lang, 1)}
        </span>
      </div>
      <p className="mt-4 text-sm text-navy-500">
        {formatMoney(150000, currency, lang)} · 5 {t('apply.step1.termYears', { n: 5 }).replace(/^[\d\s]*/, '').trim() || 'år'}
      </p>
      <div className="mt-2 flex items-baseline gap-2">
        <span className="text-4xl font-semibold text-navy-900 tnum">{formatMoney(q.monthly, currency, lang, { fraction: 0 })}</span>
        <span className="text-sm text-navy-500">/ {t('apply.step5.insurancePremiumSuffix').replace('/','').trim() || 'mo'}</span>
      </div>
      <dl className="mt-5 grid grid-cols-2 gap-3 text-sm">
        <div>
          <dt className="text-navy-500">{t('apply.step1.effectiveRate')}</dt>
          <dd className="text-navy-900 font-semibold tnum mt-0.5">{formatPercent(q.effectiveRate, lang, 1)}</dd>
        </div>
        <div>
          <dt className="text-navy-500">{t('apply.step1.totalCost')}</dt>
          <dd className="text-navy-900 font-semibold tnum mt-0.5">{formatMoney(q.totalCost, currency, lang)}</dd>
        </div>
      </dl>
      <RouterLink to="/apply" className="mt-6 inline-flex items-center justify-center w-full bg-navy-900 hover:bg-navy-700 text-white text-sm font-semibold py-3 rounded-full transition-colors">
        {t('hero.cta')}
      </RouterLink>
      <p className="mt-3 text-[11px] text-navy-300 leading-relaxed">
        {t('apply.step1.disclaimer')}
      </p>
    </Card>
  );
}

function ProductCard({ icon, title, copy, to, cta, soon, comingSoonLabel }) {
  const inner = (
    <div className={'group h-full rounded-2xl bg-white border hairline p-6 transition-all ' +
      (soon ? 'opacity-90' : 'hover:-translate-y-0.5 hover:shadow-cardHover hover:border-navy-100')}>
      <div className="flex items-center justify-between">
        <div className="h-11 w-11 rounded-xl bg-navy-50 text-navy-900 flex items-center justify-center">
          {icon}
        </div>
        {soon && (
          <span className="text-[10px] font-semibold tracking-wider uppercase px-2 py-1 rounded-md bg-navy-50 text-navy-500">
            {comingSoonLabel}
          </span>
        )}
      </div>
      <h3 className="mt-5 text-xl font-semibold text-navy-900">{title}</h3>
      <p className="mt-2 text-sm text-navy-500 leading-relaxed">{copy}</p>
      {cta && (
        <div className="mt-5 inline-flex items-center gap-1.5 text-sm font-semibold text-navy-900 group-hover:text-teal-700 transition-colors">
          {cta}
          <span aria-hidden="true">→</span>
        </div>
      )}
    </div>
  );
  return soon ? <div>{inner}</div> : <RouterLink to={to}>{inner}</RouterLink>;
}

function IconWallet() {
  return (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
      <rect x="2.5" y="5" width="17" height="13" rx="2.5" stroke="currentColor" strokeWidth="1.6"/>
      <path d="M2.5 9 H19.5" stroke="currentColor" strokeWidth="1.6"/>
      <circle cx="15.5" cy="13.5" r="1.2" fill="currentColor"/>
    </svg>
  );
}
function IconHouse() {
  return (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
      <path d="M3 11 L11 4 L19 11 V18 A1 1 0 0 1 18 19 H4 A1 1 0 0 1 3 18 Z" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
      <path d="M9 19 V13 H13 V19" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
    </svg>
  );
}
function IconCar() {
  return (
    <svg width="22" height="22" viewBox="0 0 22 22" fill="none" aria-hidden="true">
      <path d="M3 14 V10 L5.5 6 H16.5 L19 10 V14" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round"/>
      <rect x="2" y="14" width="18" height="3" rx="1" stroke="currentColor" strokeWidth="1.6"/>
      <circle cx="7" cy="17" r="1.4" fill="#fff" stroke="currentColor" strokeWidth="1.4"/>
      <circle cx="15" cy="17" r="1.4" fill="#fff" stroke="currentColor" strokeWidth="1.4"/>
    </svg>
  );
}

function TrustGlyph({ kind }) {
  const common = 'h-12 w-12 shrink-0 rounded-xl bg-white/5 border border-white/10 flex items-center justify-center';
  if (kind === 'bankid') {
    return (
      <div className={common}>
        <svg width="26" height="26" viewBox="0 0 26 26" aria-hidden="true">
          <rect x="3" y="6" width="20" height="14" rx="2.5" fill="#5BD2CE"/>
          <text x="13" y="16" textAnchor="middle" fontSize="9" fontWeight="700" fill="#0B2545" fontFamily="Inter, sans-serif">BID</text>
        </svg>
      </div>
    );
  }
  if (kind === 'gdpr') {
    return (
      <div className={common}>
        <svg width="26" height="26" viewBox="0 0 26 26" aria-hidden="true">
          <path d="M13 3 L21 6 V13 C21 18 13 23 13 23 C13 23 5 18 5 13 V6 Z" stroke="#FFFFFF" strokeWidth="1.5" fill="none"/>
          <path d="M9 13 L12 16 L18 9" stroke="#5BD2CE" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </div>
    );
  }
  // finanstilsynet — geometric "scales" mark
  return (
    <div className={common}>
      <svg width="26" height="26" viewBox="0 0 26 26" aria-hidden="true">
        <path d="M13 4 V22 M5 8 H21" stroke="#FFFFFF" strokeWidth="1.5" strokeLinecap="round"/>
        <circle cx="8" cy="14" r="3" stroke="#5BD2CE" strokeWidth="1.5" fill="none"/>
        <circle cx="18" cy="14" r="3" stroke="#5BD2CE" strokeWidth="1.5" fill="none"/>
      </svg>
    </div>
  );
}

// -----------------------------------------------------------------------------
// Loans  /loans
// -----------------------------------------------------------------------------

function Loans() {
  useLang();
  return (
    <div className="nb-fade max-w-6xl mx-auto px-4 md:px-6 py-16 md:py-20">
      <SectionHeading
        eyebrow="—"
        title={t('loans.title')}
        lede={t('loans.lede')}
      />
      <div className="mt-10 grid md:grid-cols-3 gap-4">
        <ProductCard icon={<IconWallet/>} title={t('landing.products.consumer')} copy={t('landing.products.consumerCopy')} to="/loans/consumer" cta={t('landing.openProduct')} />
        <ProductCard icon={<IconHouse/>}  title={t('landing.products.mortgage')} copy={t('landing.products.mortgageCopy')} soon comingSoonLabel={t('landing.comingSoon')} />
        <ProductCard icon={<IconCar/>}    title={t('landing.products.car')}      copy={t('landing.products.carCopy')}      soon comingSoonLabel={t('landing.comingSoon')} />
      </div>
    </div>
  );
}

// -----------------------------------------------------------------------------
// Consumer loan detail  /loans/consumer
// -----------------------------------------------------------------------------

function ConsumerLoan() {
  useLang();
  const features = [
    { title: t('consumer.feature1Title'), copy: t('consumer.feature1Copy') },
    { title: t('consumer.feature2Title'), copy: t('consumer.feature2Copy') },
    { title: t('consumer.feature3Title'), copy: t('consumer.feature3Copy') },
  ];
  return (
    <div className="nb-fade">
      <div className="max-w-6xl mx-auto px-4 md:px-6 pt-12 md:pt-16">
        <RouterLink to="/loans" className="text-sm text-navy-500 hover:text-navy-900 inline-flex items-center gap-1">
          <span aria-hidden="true">←</span> {t('nav.loans')}
        </RouterLink>
      </div>
      <section className="max-w-6xl mx-auto px-4 md:px-6 pt-6 pb-12">
        <div className="grid md:grid-cols-12 gap-10 items-start">
          <div className="md:col-span-7">
            <p className="text-xs font-semibold tracking-[0.18em] uppercase text-teal-700">{t('hero.eyebrow').split(' · ')[0]}</p>
            <h1 className="mt-3 text-4xl md:text-5xl font-semibold tracking-tight text-navy-900" style={{ textWrap: 'balance' }}>
              {t('consumer.title')}
            </h1>
            <p className="mt-4 text-lg text-navy-500 leading-relaxed max-w-xl">
              {t('consumer.subtitle')}
            </p>
            <RouterLink to="/apply" className="mt-8 inline-flex items-center gap-2 bg-navy-900 hover:bg-navy-700 text-white text-sm font-semibold px-6 py-3.5 rounded-full transition-colors shadow-card">
              {t('consumer.cta')}
              <svg width="14" height="14" viewBox="0 0 14 14"><path d="M2 7 H12 M8 3 L12 7 L8 11" stroke="currentColor" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round"/></svg>
            </RouterLink>
          </div>
          <div className="md:col-span-5">
            <RateTeaserCard />
          </div>
        </div>
      </section>

      <section className="bg-white border-t hairline">
        <div className="max-w-6xl mx-auto px-4 md:px-6 py-16 grid md:grid-cols-3 gap-8">
          {features.map((f, i) => (
            <div key={i}>
              <div className="h-10 w-10 rounded-xl bg-teal-50 text-teal-700 flex items-center justify-center font-semibold text-sm tnum">
                {i + 1}
              </div>
              <h3 className="mt-4 text-lg font-semibold text-navy-900">{f.title}</h3>
              <p className="mt-2 text-navy-500 leading-relaxed">{f.copy}</p>
            </div>
          ))}
        </div>
      </section>

      <section className="max-w-6xl mx-auto px-4 md:px-6 py-16">
        <Card className="p-8 md:p-10">
          <p className="text-xs font-semibold tracking-[0.18em] uppercase text-navy-500">{t('consumer.exampleTitle')}</p>
          <p className="mt-3 text-base md:text-lg text-navy-700 leading-relaxed max-w-3xl">
            {t('consumer.exampleBody')}
          </p>
        </Card>
      </section>
    </div>
  );
}

// -----------------------------------------------------------------------------
// Insurance portal redirect: the standalone /insurance-portal route is gone.
// Anyone hitting it ends up at /portal/insurance (logged in) or /login.
// -----------------------------------------------------------------------------

function InsurancePortal() {
  const user = useCurrentUser();
  React.useEffect(() => {
    if (user) navigate('/portal/insurance');
    else      navigate('/login');
  }, [user]);
  return null;
}

function SignInPlaceholder() { return null; /* kept for API compatibility */ }

// -----------------------------------------------------------------------------
// Login  /login
// -----------------------------------------------------------------------------

function Login() {
  useLang();
  const [email, setEmail] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [busy, setBusy] = React.useState(false);
  const [error, setError] = React.useState('');
  const submit = async (e) => {
    e.preventDefault();
    if (busy) return;
    setError('');
    setBusy(true);
    try {
      await loginUser(email, password);
      navigate('/portal');
    } catch (err) {
      setError(t('auth.login.error'));
    } finally {
      setBusy(false);
    }
  };
  return (
    <div className="nb-fade max-w-md mx-auto px-4 md:px-6 py-16 md:py-24">
      <Card className="p-8 md:p-10">
        <h1 className="text-2xl font-semibold text-navy-900">{t('login.title')}</h1>
        <p className="mt-2 text-sm text-navy-500">{t('login.subtitle')}</p>
        <form className="mt-6 space-y-4" onSubmit={submit}>
          <Field label={t('login.email')} required htmlFor="login-email">
            <TextInput id="login-email" type="email" value={email} onChange={setEmail} placeholder="you@example.com" autoComplete="email" />
          </Field>
          <Field label={t('login.password')} required htmlFor="login-password">
            <TextInput id="login-password" type="password" value={password} onChange={setPassword} placeholder="••••••••" autoComplete="current-password" />
          </Field>
          {error && <p className="text-sm text-danger">{error}</p>}
          <button
            type="submit"
            disabled={busy || !email || !password}
            className="w-full bg-navy-900 hover:bg-navy-700 text-white text-sm font-semibold py-3 rounded-full transition-colors disabled:opacity-60 flex items-center justify-center gap-2"
          >
            {busy && <Spinner />}
            {busy ? t('auth.login.busy') : t('login.cta')}
          </button>
          <a href="#/login" onClick={e => e.preventDefault()} className="block text-center text-sm text-navy-500 hover:text-navy-900">
            {t('login.forgot')}
          </a>
          <p className="pt-3 text-center text-xs text-navy-500">
            {t('auth.login.noAccount')}{' '}
            <RouterLink to="/apply" className="font-semibold text-navy-900 hover:text-teal-700">
              {t('auth.login.apply')} →
            </RouterLink>
          </p>
        </form>
      </Card>
    </div>
  );
}

// -----------------------------------------------------------------------------
// About  /about
// -----------------------------------------------------------------------------

function About() {
  useLang();
  return (
    <div className="nb-fade max-w-3xl mx-auto px-4 md:px-6 py-16 md:py-20">
      <h1 className="text-4xl md:text-5xl font-semibold tracking-tight text-navy-900" style={{ textWrap: 'balance' }}>
        {t('about.title')}
      </h1>
      <p className="mt-5 text-lg text-navy-500 leading-relaxed" style={{ textWrap: 'pretty' }}>
        {t('about.body')}
      </p>
    </div>
  );
}

Object.assign(window, {
  Landing, Loans, ConsumerLoan, InsurancePortal, SignInPlaceholder, Login, About,
  RateTeaserCard, ProductCard, IconWallet, IconHouse, IconCar, TrustGlyph,
});