// LingaFlip — License / Legal page

const B = {
  cream:    '#F7F1E6',
  creamD:   '#EDE4D2',
  ink:      '#0E1428',
  inkSoft:  '#2B3143',
  muted:    '#6B7280',
  cyan:     '#3CC8E8',
  orange:   '#FF5A2E',
  gold:     '#F5C24B',
};
const FONT = `'Nunito', system-ui, sans-serif`;
const MONO = `'Courier New', Courier, monospace`;

function useBreakpoint() {
  const [w, setW] = React.useState(typeof window !== 'undefined' ? window.innerWidth : 1280);
  React.useEffect(() => {
    const h = () => setW(window.innerWidth);
    window.addEventListener('resize', h);
    return () => window.removeEventListener('resize', h);
  }, []);
  return { isMobile: w < 768 };
}

function PageHeader() {
  const { isMobile } = useBreakpoint();
  return (
    <header style={{
      position: 'sticky', top: 0, zIndex: 50,
      background: 'rgba(247,241,230,0.95)',
      backdropFilter: 'blur(8px)',
      borderBottom: `3px solid ${B.ink}`,
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        padding: isMobile ? '14px 20px' : '14px 32px',
        display: 'flex', alignItems: 'center', justifyContent: 'space-between',
      }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 10, textDecoration: 'none' }}>
          <img src="assets/app-icon.png" alt="LingaFlip" width={isMobile ? 36 : 44} height={isMobile ? 36 : 44}
            style={{ display: 'block', borderRadius: 10 }}/>
          <div style={{
            fontFamily: FONT, fontWeight: 900, fontSize: isMobile ? 22 : 28,
            color: B.ink, letterSpacing: -0.8, lineHeight: 1,
          }}>LingaFlip</div>
        </a>
        <a href="index.html#download" style={{
          background: B.ink, color: B.cream,
          padding: isMobile ? '10px 16px' : '12px 22px', borderRadius: 999,
          fontFamily: FONT, fontWeight: 800, fontSize: isMobile ? 14 : 16,
          textDecoration: 'none', letterSpacing: 0.5,
          boxShadow: `0 4px 0 ${B.orange}`,
        }}>Download free →</a>
      </div>
    </header>
  );
}

function PageFooter() {
  const { isMobile } = useBreakpoint();
  return (
    <footer style={{
      background: B.ink, color: B.cream,
      padding: isMobile ? '28px 20px' : '32px',
      borderTop: `3px solid ${B.orange}`,
    }}>
      <div style={{
        maxWidth: 1240, margin: '0 auto',
        display: 'flex',
        flexDirection: isMobile ? 'column' : 'row',
        alignItems: isMobile ? 'flex-start' : 'center',
        justifyContent: 'space-between',
        gap: isMobile ? 20 : 24,
        flexWrap: 'wrap',
      }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'center', gap: 12, textDecoration: 'none' }}>
          <img src="assets/app-icon.png" width={36} height={36} alt="LingaFlip" style={{ borderRadius: 8 }}/>
          <div style={{ fontFamily: FONT, fontWeight: 900, fontSize: 22, letterSpacing: -0.5, color: B.cream }}>LingaFlip</div>
        </a>
        <div style={{ display: 'flex', gap: 24, fontFamily: FONT, fontWeight: 600, fontSize: 15, flexWrap: 'wrap' }}>
          <a href="mailto:support@lingaflip.com" style={{ color: 'rgba(247,241,230,0.75)', textDecoration: 'none' }}>Contact</a>
          <a href="terms.html" style={{ color: 'rgba(247,241,230,0.75)', textDecoration: 'none' }}>Terms</a>
          <a href="privacy.html" style={{ color: 'rgba(247,241,230,0.75)', textDecoration: 'none' }}>Privacy</a>
          <a href="legal.html" style={{ color: B.cream, textDecoration: 'none' }}>Legal</a>
        </div>
        <div style={{ fontFamily: FONT, fontWeight: 500, fontSize: 14, color: 'rgba(247,241,230,0.45)' }}>
          © {new Date().getFullYear()} LingaFlip
        </div>
      </div>
    </footer>
  );
}

const S = {
  h1: { fontFamily: FONT, fontWeight: 900, fontSize: 38, color: B.ink, marginBottom: 8, lineHeight: 1.15 },
  h2: { fontFamily: FONT, fontWeight: 900, fontSize: 22, color: B.ink, marginTop: 48, marginBottom: 12, paddingBottom: 8, borderBottom: `3px solid ${B.ink}` },
  h3: { fontFamily: FONT, fontWeight: 800, fontSize: 18, color: B.ink, marginTop: 28, marginBottom: 10 },
  p:  { fontFamily: FONT, fontWeight: 500, fontSize: 16, color: B.inkSoft, lineHeight: 1.75, marginBottom: 12 },
  li: { fontFamily: FONT, fontWeight: 500, fontSize: 16, color: B.inkSoft, lineHeight: 1.75, marginBottom: 4 },
  hr: { border: 'none', borderTop: `2px solid ${B.ink}`, margin: '48px 0' },
};

const TH = { border: `1px solid ${B.ink}`, padding: '10px 14px', textAlign: 'left', fontFamily: FONT, fontWeight: 800, fontSize: 14, background: B.creamD };
const TD = { border: `1px solid ${B.ink}`, padding: '10px 14px', fontFamily: FONT, fontWeight: 500, fontSize: 14, color: B.inkSoft, verticalAlign: 'top' };
const TDcode = { ...TD, fontFamily: MONO, fontSize: 13 };

function LicenseTable({ cols, rows }) {
  return (
    <div style={{ overflowX: 'auto', marginBottom: 32 }}>
      <table style={{ minWidth: '100%', borderCollapse: 'collapse', border: `1px solid ${B.ink}` }}>
        <thead>
          <tr>{cols.map(c => <th key={c} style={TH}>{c}</th>)}</tr>
        </thead>
        <tbody>
          {rows.map((r, i) => (
            <tr key={i} style={{ background: i % 2 === 0 ? B.cream : B.creamD }}>
              {r.map((cell, j) => (
                <td key={j} style={j === 0 ? TDcode : TD}>
                  {typeof cell === 'string' ? cell : cell}
                </td>
              ))}
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

function LLink({ href, children }) {
  return <a href={href} target="_blank" rel="noreferrer" style={{ color: B.ink, textDecoration: 'underline' }}>{children}</a>;
}

function LegalPage() {
  const { isMobile } = useBreakpoint();
  React.useEffect(() => { window.scrollTo(0, 0); }, []);

  return (
    <div style={{ background: B.cream, minHeight: '100vh', fontFamily: FONT, color: B.ink }}>
      <PageHeader/>
      <main style={{ padding: isMobile ? '48px 20px 80px' : '64px 32px 96px' }}>
        <div style={{ maxWidth: 860, margin: '0 auto' }}>

          <h1 style={S.h1}>LingaFlip — License</h1>
          <p style={{ fontFamily: FONT, fontWeight: 600, fontSize: 14, color: B.muted, marginBottom: 48 }}>
            Last updated: {new Date().toLocaleDateString()}
          </p>

          {/* ── Proprietary ── */}
          <h2 style={S.h2}>Proprietary Software</h2>
          <p style={S.p}><strong>Copyright © 2024–2026 LingaFlip. All Rights Reserved.</strong></p>
          <p style={S.p}>
            <strong>Trademarks:</strong> "LingaFlip" and associated logos are trademarks of LingaFlip. No rights are granted to use them without prior written permission.
          </p>
          <p style={S.p}>
            LingaFlip's proprietary source code and algorithms are the exclusive property of LingaFlip. No part of LingaFlip's proprietary source code may be copied, modified, distributed, sublicensed, sold, or used to create derivative works without the prior written permission of the owner, except as expressly permitted by applicable law (including, without limitation, decompilation for interoperability purposes under EU Directive 2009/24/EC).
          </p>
          <p style={S.p}>
            This restriction applies solely to LingaFlip's own proprietary code. It does not affect, limit, or override the rights granted by the third-party open-source components listed below, each of which remains governed exclusively by its respective open-source license.
          </p>
          <p style={S.p}>
            End users are granted a limited, non-exclusive, non-transferable, revocable license to use the application for personal, non-commercial purposes, in accordance with the{' '}
            <LLink href="terms.html">LingaFlip Terms of Service</LLink>. The compiled application binaries distributed via the Apple App Store and Google Play Store are subject to those terms.
          </p>
          <div style={{
            background: B.creamD, border: `2px solid ${B.ink}`, borderRadius: 10,
            padding: '16px 20px', marginBottom: 24,
          }}>
            <p style={{ fontFamily: FONT, fontWeight: 800, fontSize: 13, letterSpacing: 1, textTransform: 'uppercase', marginBottom: 8, color: B.ink }}>
              Disclaimer of Warranty
            </p>
            <p style={{ fontFamily: MONO, fontSize: 13, color: B.inkSoft, lineHeight: 1.7, margin: 0 }}>
              LINGAFLIP IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE, AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
            </p>
          </div>

          <hr style={S.hr}/>

          {/* ── Open Source ── */}
          <h2 style={S.h2}>Third-Party Open-Source Acknowledgements</h2>
          <p style={S.p}>LingaFlip is built on top of open-source libraries. Their licenses are listed below.</p>

          <h3 style={S.h3}>MIT License</h3>
          <p style={S.p}>The following packages are licensed under the <LLink href="https://opensource.org/licenses/MIT">MIT License</LLink>:</p>
          <LicenseTable
            cols={['Package', 'Author / Maintainer']}
            rows={[
              ['react', 'Meta Platforms, Inc.'],
              ['react-native', 'Meta Platforms, Inc.'],
              ['react-dom', 'Meta Platforms, Inc.'],
              ['react-native-web', 'Nicolas Gallagher'],
              ['expo (and all expo-* packages)', 'Expo, Inc.'],
              ['@expo/vector-icons', 'Expo, Inc.'],
              ['@react-navigation/native', 'React Navigation contributors'],
              ['@react-navigation/native-stack', 'React Navigation contributors'],
              ['@react-navigation/bottom-tabs', 'React Navigation contributors'],
              ['@react-navigation/material-top-tabs', 'React Navigation contributors'],
              ['@reduxjs/toolkit', 'Redux contributors'],
              ['react-redux', 'Redux contributors'],
              ['redux-persist', 'Redux Persist contributors'],
              ['react-i18next', 'i18next contributors'],
              ['i18next', 'i18next contributors'],
              ['moti', 'Fernando Rojo'],
              ['react-native-reanimated', 'Software Mansion'],
              ['react-native-gesture-handler', 'Software Mansion'],
              ['react-native-screens', 'Software Mansion'],
              ['react-native-safe-area-context', 'Th3rd Wave'],
              ['react-native-svg', 'React Native SVG contributors'],
              ['react-native-tab-view', 'React Native Tab View contributors'],
              ['react-native-pager-view', 'Callstack'],
              ['react-native-purchases', 'RevenueCat, Inc.'],
              ['react-native-purchases-ui', 'RevenueCat, Inc.'],
              ['react-native-google-mobile-ads', 'Invertase'],
              ['@react-native-async-storage/async-storage', 'React Native Async Storage contributors'],
              ['@react-native-community/datetimepicker', 'React Native Community'],
              ['@react-native-google-signin/google-signin', 'Vojtěch Novák'],
              ['zod', 'Colin McDonnell'],
              ['patch-package', 'David Sheldrick'],
              ['react-native-sherpa-onnx', 'XDcobra'],
            ]}
          />

          <h3 style={S.h3}>BSD-2-Clause License</h3>
          <p style={S.p}>The following package is licensed under the <LLink href="https://opensource.org/licenses/BSD-2-Clause">BSD 2-Clause License</LLink>:</p>
          <LicenseTable
            cols={['Package', 'Author / Maintainer']}
            rows={[['dotenv', 'Scott Motte (motdotla)']]}
          />

          <h3 style={S.h3}>Apache License 2.0</h3>
          <p style={S.p}>The following packages are licensed under the <LLink href="https://www.apache.org/licenses/LICENSE-2.0">Apache License, Version 2.0</LLink>:</p>
          <LicenseTable
            cols={['Package', 'Author / Maintainer']}
            rows={[
              ['firebase', 'Google LLC'],
              ['@react-native-firebase/app', 'Invertase'],
              ['@react-native-firebase/analytics', 'Invertase'],
              ['@react-native-firebase/messaging', 'Invertase'],
              ['sherpa-onnx (Core Engine)', 'k2-fsa / contributors'],
            ]}
          />

          <h3 style={S.h3}>Fonts (SIL Open Font License 1.1)</h3>
          <p style={S.p}>The following typefaces are used in LingaFlip and are licensed under the <LLink href="https://scripts.sil.org/OFL">SIL Open Font License 1.1</LLink>:</p>
          <LicenseTable
            cols={['Typeface', 'Package', 'Copyright']}
            rows={[
              ['Inter', '@expo-google-fonts/inter', '© 2020 The Inter Project Authors (Rasmus Andersson)'],
              ['Nunito', '@expo-google-fonts/nunito', '© 2011 The Nunito Project Authors (Vernon Adams, Cyreal, Jacques Le Bailly)'],
            ]}
          />
          <div style={{
            background: B.creamD, borderLeft: `4px solid ${B.ink}`,
            padding: '14px 18px', borderRadius: '0 10px 10px 0', marginBottom: 32,
          }}>
            <p style={{ fontFamily: FONT, fontWeight: 500, fontSize: 15, color: B.inkSoft, fontStyle: 'italic', margin: 0 }}>
              <strong>System fonts:</strong> LingaFlip also uses the <strong>SF Pro</strong> typeface on iOS (Apple system font, no redistribution — used only as a system resource) and <strong>Roboto</strong> on Android (Apache 2.0, included by Google in the Android OS, no separate redistribution by LingaFlip).
            </p>
          </div>

          <hr style={S.hr}/>

          {/* ── Voice Models ── */}
          <h2 style={S.h2}>Voice Models (Piper TTS)</h2>
          <p style={S.p}>
            LingaFlip uses on-device Text-to-Speech powered by the <LLink href="https://github.com/rhasspy/piper">Piper TTS</LLink> system and the <LLink href="https://github.com/k2-fsa/sherpa-onnx">sherpa-onnx</LLink> inference engine. Voice models are downloaded on demand and are never bundled in the app binary.
          </p>
          <p style={S.p}>
            LingaFlip uses a 100% MIT/Apache-licensed inference stack. On-device phonemization is handled by the Sherpa-ONNX internal engine, which does not require GPL-licensed components (such as eSpeak NG) for the supported languages.
          </p>

          <h3 style={S.h3}>Inference stack</h3>
          <LicenseTable
            cols={['Component', 'License', 'Source']}
            rows={[
              ['Piper TTS', <LLink href="https://github.com/rhasspy/piper/blob/master/LICENSE.md">MIT</LLink>, 'rhasspy/piper'],
              ['sherpa-onnx (Core)', <LLink href="https://github.com/k2-fsa/sherpa-onnx/blob/master/LICENSE">Apache 2.0</LLink>, 'k2-fsa/sherpa-onnx'],
              ['ONNX Runtime', <LLink href="https://github.com/microsoft/onnxruntime/blob/main/LICENSE">MIT</LLink>, 'microsoft/onnxruntime'],
            ]}
          />

          <h3 style={S.h3}>Individual voice model licenses</h3>
          <p style={S.p}>
            Each voice model is a VITS neural network trained on a specific voice corpus. All voice models are used in their original form as distributed by the k2-fsa project; no modifications were made to the neural network weights.
          </p>
          <LicenseTable
            cols={['Model ID', 'Language', 'Voice', 'License', 'Original Corpus']}
            rows={[
              ['en_GB-alba-medium', 'English (GB)', 'Alba', <><LLink href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</LLink> ⚠️</>, 'Scottish Government / Coqui AI'],
              ['de_DE-thorsten-medium', 'German', 'Thorsten', <LLink href="https://creativecommons.org/publicdomain/zero/1.0/">CC0 1.0</LLink>, 'Thorsten Müller'],
              ['fr_FR-siwis-medium', 'French', 'SIWIS', <><LLink href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</LLink> ⚠️</>, 'SIWIS corpus — IDIAP Research Institute'],
              ['it_IT-paola-medium', 'Italian', 'Paola', <><LLink href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</LLink> ⚠️</>, 'M-AI Labs Italian corpus'],
              ['es_ES-davefx-medium', 'Spanish', 'DaveFX', <LLink href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0</LLink>, 'M-AI Labs Spanish corpus'],
              ['tr_TR-dfki-medium', 'Turkish', 'DFKI', <LLink href="https://www.apache.org/licenses/LICENSE-2.0">Apache 2.0</LLink>, 'DFKI TTS (Blizzard Challenge 2021)'],
              ['ru_RU-irina-medium', 'Russian', 'Irina', <><LLink href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</LLink> ⚠️</>, 'M-AI Labs Russian corpus'],
              ['zh_CN-huayan-medium', 'Chinese (S)', 'Huayan', <><LLink href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</LLink> ⚠️</>, 'Huayan Chinese TTS corpus'],
            ]}
          />

          <div style={{
            background: '#FFFBEB', border: `2px solid ${B.ink}`, borderLeft: `6px solid ${B.gold}`,
            padding: '16px 20px', borderRadius: '0 12px 12px 0', marginBottom: 32,
          }}>
            <p style={{ fontFamily: FONT, fontWeight: 800, fontSize: 15, color: B.ink, marginBottom: 10 }}>⚠️ Attribution (CC BY 4.0)</p>
            <p style={{ ...S.p, marginBottom: 10 }}>
              The five voice models marked above are licensed under the Creative Commons Attribution 4.0 International License. No changes were made to the model weights or data.
            </p>
            <ul style={{ paddingLeft: 24, marginBottom: 10 }}>
              {[
                ['Alba', 'Scottish Government / Coqui AI'],
                ['SIWIS', 'IDIAP Research Institute'],
                ['Paola', 'M-AI Labs Italian corpus'],
                ['Irina', 'M-AI Labs Russian corpus'],
                ['Huayan', 'Huayan Chinese TTS corpus'],
              ].map(([name, attr]) => (
                <li key={name} style={S.li}><strong>{name}</strong> — {attr}</li>
              ))}
            </ul>
            <p style={{ fontFamily: FONT, fontWeight: 500, fontSize: 13, color: B.muted, margin: 0 }}>
              Full license text: <LLink href="https://creativecommons.org/licenses/by/4.0/">https://creativecommons.org/licenses/by/4.0/</LLink>
            </p>
          </div>

          <hr style={S.hr}/>

          {/* ── Full License Texts ── */}
          <h2 style={S.h2}>Full License Texts</h2>

          <h3 style={S.h3}>MIT License</h3>
          <pre style={{
            background: B.creamD, border: `2px solid ${B.ink}`, borderRadius: 10,
            padding: '16px 20px', overflowX: 'auto', fontSize: 13,
            fontFamily: MONO, lineHeight: 1.65, whiteSpace: 'pre-wrap',
            marginBottom: 16,
          }}>{`Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.`}</pre>
          <div style={{ marginBottom: 32 }}>
            <p style={{ fontFamily: FONT, fontWeight: 700, fontSize: 14, color: B.ink, marginBottom: 8 }}>MIT Package Copyright Notices:</p>
            <ul style={{ paddingLeft: 24, columns: isMobile ? 1 : 2, columnGap: 32 }}>
              {[
                ['Meta Platforms, Inc.', 'react, react-native, react-dom'],
                ['Nicolas Gallagher', 'react-native-web'],
                ['Expo, Inc.', 'expo, expo-* packages, @expo/vector-icons'],
                ['React Navigation contributors', '@react-navigation/*'],
                ['Redux contributors', '@reduxjs/toolkit, react-redux'],
                ['Ziad Tamim (rt2zz)', 'redux-persist'],
                ['Jan Mühlemann & Adriano Raiano', 'react-i18next, i18next'],
                ['Fernando Rojo', 'moti'],
                ['Software Mansion S.A.', 'react-native-reanimated, react-native-gesture-handler, react-native-screens'],
                ['Janic Duplessis', 'react-native-safe-area-context'],
                ['React Native Community', 'react-native-svg, @react-native-community/datetimepicker'],
                ['Callstack (troZee)', 'react-native-pager-view'],
                ['RevenueCat, Inc.', 'react-native-purchases, react-native-purchases-ui'],
                ['Krzysztof Borowy', '@react-native-async-storage/async-storage'],
                ['Vojtech Novak', '@react-native-google-signin/google-signin'],
                ['Colin McDonnell', 'zod'],
                ['David Sheldrick', 'patch-package'],
                ['XDcobra', 'react-native-sherpa-onnx'],
                ['Microsoft Corporation', 'ONNX Runtime'],
                ['Michael Hansen / Rhasspy', 'Piper TTS'],
              ].map(([author, pkgs]) => (
                <li key={author} style={{ ...S.li, breakInside: 'avoid', marginBottom: 6 }}>
                  <strong>{author}</strong>: {pkgs}
                </li>
              ))}
            </ul>
          </div>

          <h3 style={S.h3}>Apache License 2.0</h3>
          <pre style={{
            background: B.creamD, border: `2px solid ${B.ink}`, borderRadius: 10,
            padding: '16px 20px', overflowX: 'auto', fontSize: 13,
            fontFamily: MONO, lineHeight: 1.65, whiteSpace: 'pre-wrap',
            maxHeight: 320, overflowY: 'scroll', marginBottom: 16,
          }}>{`Apache License
Version 2.0, January 2004
http://www.apache.org/licenses/

TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION

1. Definitions.

"License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.

"Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.

"Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity.

"You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License.

"Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.

"Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.

"Work" shall mean the work of authorship made available under the License, as indicated by a copyright notice that is included in or attached to the work.

"Derivative Works" shall mean any work that is based on (or derived from) the Work for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship.

"Contribution" shall mean any work of authorship intentionally submitted to Licensor for inclusion in the Work by the copyright owner.

"Contributor" shall mean Licensor and any individual on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.

2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.

3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work.

4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) give recipients a copy of this License; (b) cause modified files to carry prominent notices; (c) retain all copyright, patent, trademark, and attribution notices; (d) include a readable copy of attribution notices from any NOTICE file.

5. Submission of Contributions. Any Contribution submitted for inclusion in the Work shall be under the terms of this License.

6. Trademarks. This License does not grant permission to use trade names, trademarks, or product names of the Licensor.

7. Disclaimer of Warranty. The Work is provided on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.

8. Limitation of Liability. In no event shall any Contributor be liable for damages arising from this License or out of the use or inability to use the Work.

9. Accepting Warranty or Additional Liability. While redistributing the Work, You may offer support, warranty, indemnity, or other liability obligations consistent with this License.

END OF TERMS AND CONDITIONS`}</pre>
          <div style={{ marginBottom: 32 }}>
            <p style={{ fontFamily: FONT, fontWeight: 700, fontSize: 14, color: B.ink, marginBottom: 8 }}>Apache 2.0 Package Copyright Notices:</p>
            <ul style={{ paddingLeft: 24 }}>
              {[
                ['Google LLC', 'firebase'],
                ['Invertase Limited', '@react-native-firebase/*'],
                ['k2-fsa / sherpa-onnx contributors', 'sherpa-onnx (inference engine)'],
                ['M-AI Labs', 'es_ES-davefx-medium voice model'],
                ['DFKI GmbH', 'tr_TR-dfki-medium voice model'],
              ].map(([author, pkg]) => (
                <li key={author} style={S.li}><strong>{author}</strong>: {pkg}</li>
              ))}
            </ul>
          </div>

          <h3 style={S.h3}>BSD 2-Clause License</h3>
          <pre style={{
            background: B.creamD, border: `2px solid ${B.ink}`, borderRadius: 10,
            padding: '16px 20px', overflowX: 'auto', fontSize: 13,
            fontFamily: MONO, lineHeight: 1.65, whiteSpace: 'pre-wrap',
            marginBottom: 32,
          }}>{`BSD 2-Clause License

Copyright (c) dotenv contributors (Scott Motte / motdotla)

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:

1. Redistributions of source code must retain the above copyright notice,
   this list of conditions and the following disclaimer.

2. Redistributions in binary form must reproduce the above copyright notice,
   this list of conditions and the following disclaimer in the documentation
   and/or other materials provided with the distribution.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.`}</pre>

          <div style={{
            background: B.creamD, borderLeft: `4px solid ${B.ink}`, borderRadius: '0 10px 10px 0',
            padding: '14px 18px',
          }}>
            <p style={{ fontFamily: FONT, fontWeight: 500, fontSize: 13, color: B.inkSoft, fontStyle: 'italic', margin: 0 }}>
              This page covers direct production dependencies. Each dependency may itself include additional third-party components under their own licenses. Consult the respective <code style={{ fontFamily: MONO }}>node_modules/&lt;package&gt;/LICENSE</code> file for the full text of each license.
            </p>
          </div>

        </div>
      </main>
      <PageFooter/>
    </div>
  );
}

Object.assign(window, { LegalPage });
