function BoatsCalculator() {
    const [downstream, setDownstream] = useState('');
    const [upstream, setUpstream] = useState('');
    const [boatSpeed, setBoatSpeed] = useState('');
    const [streamSpeed, setStreamSpeed] = useState('');
    const [result, setResult] = useState(null);

    const calculate = () => {
        let calculated = {};

        if (downstream && upstream) {
            const down = parseFloat(downstream);
            const up = parseFloat(upstream);
            const boat = (down + up) / 2;
            const stream = (down - up) / 2;

            calculated = {
                boatSpeed: boat.toFixed(2),
                streamSpeed: stream.toFixed(2),
                formula: 'Boat = (Down + Up)/2, Stream = (Down - Up)/2',
                calculation: `Boat = (${down} + ${up})/2 = ${boat.toFixed(2)} km/h\nStream = (${down} - ${up})/2 = ${stream.toFixed(2)} km/h`
            };
        } else if (boatSpeed && streamSpeed) {
            const boat = parseFloat(boatSpeed);
            const stream = parseFloat(streamSpeed);
            const down = boat + stream;
            const up = boat - stream;

            calculated = {
                downstream: down.toFixed(2),
                upstream: up.toFixed(2),
                formula: 'Downstream = Boat + Stream, Upstream = Boat - Stream',
                calculation: `Downstream = ${boat} + ${stream} = ${down.toFixed(2)} km/h\nUpstream = ${boat} - ${stream} = ${up.toFixed(2)} km/h`
            };
        }

        setResult(calculated);
    };

    return (
        <div>
            <div style={{ background: 'var(--bg-tertiary)', padding: '12px', borderRadius: '8px', marginBottom: '16px', fontSize: '13px' }}>
                <strong>Formulas:</strong><br />
                Downstream = Boat Speed + Stream Speed<br />
                Upstream = Boat Speed - Stream Speed<br />
                Boat Speed = (Downstream + Upstream) / 2<br />
                Stream Speed = (Downstream - Upstream) / 2
            </div>

            <div style={{ marginBottom: '16px', padding: '12px', background: 'var(--bg-secondary)', borderRadius: '6px' }}>
                <strong style={{ fontSize: '14px' }}>Option 1: Find Boat & Stream Speed</strong>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px', marginBottom: '24px' }}>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Downstream Speed (km/h)</label>
                    <input type="number" className="form-input" value={downstream} onChange={(e) => setDownstream(e.target.value)} placeholder="15" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Upstream Speed (km/h)</label>
                    <input type="number" className="form-input" value={upstream} onChange={(e) => setUpstream(e.target.value)} placeholder="9" />
                </div>
            </div>

            <div style={{ marginBottom: '16px', padding: '12px', background: 'var(--bg-secondary)', borderRadius: '6px' }}>
                <strong style={{ fontSize: '14px' }}>Option 2: Find Downstream & Upstream</strong>
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: '16px' }}>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Boat Speed in Still Water (km/h)</label>
                    <input type="number" className="form-input" value={boatSpeed} onChange={(e) => setBoatSpeed(e.target.value)} placeholder="12" />
                </div>
                <div className="form-group" style={{ marginBottom: '0' }}>
                    <label className="form-label">Stream Speed (km/h)</label>
                    <input type="number" className="form-input" value={streamSpeed} onChange={(e) => setStreamSpeed(e.target.value)} placeholder="3" />
                </div>
            </div>

            <button className="btn btn-primary mt-4" onClick={calculate}>Calculate</button>

            {result && (
                <div className="mt-4" style={{ padding: '20px', background: 'var(--bg-tertiary)', borderRadius: '8px' }}>
                    <div style={{ marginBottom: '12px' }}>
                        <strong>Formula:</strong> {result.formula}
                    </div>
                    <div style={{ marginBottom: '12px', whiteSpace: 'pre-line' }}>
                        <strong>Calculation:</strong><br />{result.calculation}
                    </div>
                    <div style={{ borderTop: '1px solid var(--border-color)', paddingTop: '12px', marginTop: '12px' }}>
                        {result.boatSpeed && <div style={{ fontSize: '18px', fontWeight: '600', color: 'var(--primary)' }}>Boat Speed in Still Water: {result.boatSpeed} km/h</div>}
                        {result.streamSpeed && <div style={{ fontSize: '18px', fontWeight: '600', color: 'var(--success)', marginTop: '8px' }}>Stream Speed: {result.streamSpeed} km/h</div>}
                        {result.downstream && <div style={{ fontSize: '18px', fontWeight: '600', color: 'var(--primary)' }}>Downstream Speed: {result.downstream} km/h</div>}
                        {result.upstream && <div style={{ fontSize: '18px', fontWeight: '600', color: 'var(--success)', marginTop: '8px' }}>Upstream Speed: {result.upstream} km/h</div>}
                    </div>
                </div>
            )}
        </div>
    );
}

// Export to global registry
window.BoatsCalculator = BoatsCalculator;